2. 실행환경 구축 (VS CODE)

💡 Visual Studio Code(VS Code)에서 웹 개발을 위한 실행 환경을 구성할 때, "Live Server" 플러그인을 사용할 예정입니다. 이 플러그인은 정적인 웹 페이지를 실시간으로 확인할 수 있도록 해주며, 로컬 개발 환경에서 쉽게 웹 애플리케이션을 실행하고 테스트할 수 있는 환경을 제공합니다.

 

Live Server 플러그인이란?

Live Server는 VS Code에서 사용할 수 있는 확장 플러그인 중 하나로, 로컬 개발 환경에서 HTML, CSS, JavaScript로 구성된 웹 페이지를 실시간으로 미리보기 할 수 있게 해줍니다. 이 플러그인은 코드가 변경될 때마다 자동으로 브라우저를 새로 고침하여 개발 중인 웹 페이지의 최신 상태를 바로바로 확인할 수 있게 해줍니다.

Live Server의 주요 기능

• 실시간 미리보기:
  • Live Server는 HTML 파일을 저장할 때마다 브라우저가 자동으로 새로 고침되어 변경된 내용을 바로 볼 수 있습니다. 이 기능 덕분에 개발 속도가 크게 향상됩니다.
• 로컬 개발 서버:
  • Live Server는 로컬에서 웹 서버를 실행하여 웹 페이지를 제공 합니다. 이를 통해, 브라우저에서 웹 페이지를 로컬 파일 시스템이 아닌 HTTP 프로토콜을 통해 접속하게 됩니다. 이는 개발 중에 CORS(Cross-Origin Resource Sharing) 문제를 방지하고, 실제 서버 환경과 유사한 테스트 환경을 제공하는 데 도움이 됩니다.
• 브라우저 동기화:
  • Live Server는 여러 브라우저에서 동시에 열려있는 경우에도 동기화가 가능합니다. 예를 들어, 크롬과 파이어폭스에서 같은 페이지를 열어두었을 때, 한 브라우저에서 코드 변경 사항이 발생하면 다른 브라우저에서도 자동으로 변경된 내용을 확인할 수 있습니다.
• 사용이 간편함:
  • VS Code에서 Live Server를 실행하려면 단순히 HTML 파일을 열고 마우스 오른쪽 버튼을 클릭한 후 "Open with Live Server"를 선택하면 됩니다. 그러면 플러그인이 자동으로 로컬 서버를 시작하고 브라우저에 페이지를 열어줍니다.

 

사전 기반 지식 확인

 

💡 CORS(Cross-Origin Resource Sharing) 문제는 웹 개발에서 흔히 겪는 보안 이슈 중 하나입니다. 이는 웹 페이지가 자신의 도메인이 아닌 다른 도메인의 리소스를 요청할 때 발생하는 문제로, 웹 브라우저의 보안 정책 때문에 발생합니다. CORS는 이러한 상황에서 어떤 요청이 허용되고, 어떤 요청이 차단되어야 하는지를 결정하는 메커니즘을 제공합니다.

 

CORS 문제의 개념

1. 동일 출처 정책 (Same-Origin Policy)

• 웹 브라우저에는 "동일 출처 정책(Same-Origin Policy)"이라는 보안 정책이 적용됩니다. 이 정책은 웹 페이지가 자신이 로드된 도메인(출처) 이외의 다른 도메인(출처)에서 리소스를 가져오는 것을 제한합니다.
• 동일 출처는 다음 세 가지 요소가 모두 일치하는 경우를 말합니다:
  • 프로토콜 (예: http, https)
  • 호스트 (예: example.com)
  • 포트 (예: 80, 443)
• 예를 들어, http://example.com에서 로드된 웹 페이지는 https://example.com 또는 http://api.example.com:8080과 같은 다른 출처의 리소스에 접근할 수 없습니다.

2. 교차 출처 요청 (Cross-Origin Request)

• 만약 웹 페이지가 다른 도메인에서 API 호출이나 리소스 요청을 하고자 할 때(예: http://example.com에서 http://api.anotherdomain.com의 데이터를 가져오려는 경우), 브라우저는 이러한 요청을 차단할 수 있습니다. 이러한 요청을 "교차 출처 요청(Cross-Origin Request)"이라고 합니다.

웹 페이지가 JavaScript로 API를 호출할 때, 요청된 리소스가 다른 도메인에 있을 경우 CORS 문제가 발생할 수 있습니다. 예를 들어:

// Example of a fetch request that may trigger CORS issue
fetch('http://api.anotherdomain.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

위의 코드에서 http://api.anotherdomain.com에서 데이터를 가져오려고 할 때, 브라우저는 동일 출처 정책에 의해 이 요청을 차단할 수 있습니다.

 

CORS 해결 방법

CORS 문제를 해결하려면, 서버 측에서 브라우저가 요청을 허용할 수 있도록 응답 헤더에 적절한 정보를 추가해야 합니다. 이를 위해 서버는 Access-Control-Allow-Origin 헤더를 사용합니다.

1. Access-Control-Allow-Origin 헤더

• 이 헤더는 서버가 어떤 출처의 요청을 허용할지를 지정합니다. 예를 들어:
  • Access-Control-Allow-Origin: * : 모든 도메인의 요청을 허용합니다.
  • Access-Control-Allow-Origin: <http://example.com> : 특정 도메인(http://example.com)에서의 요청만 허용합니다.

2. Preflight 요청

• 일부 경우, 브라우저는 실제 요청을 보내기 전에 서버에 "Preflight 요청"을 보내 CORS 규칙을 확인합니다. 이는 OPTIONS 메서드를 사용하여 서버가 요청을 허용할지 여부를 확인하는 과정입니다.
• 서버는 Access-Control-Allow-Methods, Access-Control-Allow-Headers와 같은 추가 헤더를 응답에 포함시켜 어떤 요청 메서드와 헤더가 허용되는지 브라우저에 알려줍니다.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

 

이와 같이 설정된 서버는 http://example.com에서 오는 GET 및 POST 요청을 허용하며, 클라이언트는 이 도메인에서 해당 리소스에 접근할 수 있습니다.

결론

CORS 문제는 보안상의 이유로 웹 브라우저가 다른 도메인에서 리소스를 가져오는 것을 제한하는 상황에서 발생합니다. 이를 해결하려면 서버 측에서 CORS 정책을 적절하게 설정해야 합니다. 개발자는 이 정책을 이해하고, 서버와 클라이언트 간의 상호작용을 조정함으로써 CORS 문제를 해결하고, 안전한 웹 애플리케이션을 개발할 수 있습니다.