Week14 paper

Next.js에서 SSR을 실행하는 과정과 hydration

1. 클라이언트에서 페이지 요청을 보낸다.
2. Next.js 서버에서 해당 페이지 HTML을 렌더링한 상태로 클라이언트에 전달한다.
   서버 단에서 렌더링이 이루어진 후 클라이언트에게 전달되기 때문에 이를 서버사이드 렌더링이라고 칭한다.
   이 때 아직 자바스크립트 파일을 받지 않았기 때문에 인터랙션은 불가능하다.
3. 자바스크립트 번들을 서버에서 전달해주고, 클라이언트에서 자바스크립트와 HTML을 연결시킨다.
   이 과정을 hydration이라고 하며, 이제 인터랙션이 가능하다.

CORS 에러와 해결 방법

CORS

• Cross Origin Resource Sharing의 약자
• 웹 애플리케이션이 다른 출처(도메인)에 있는 리소스에 접근할 때 발생하는 보안 정책 (same-origin policy)
• 즉, 서로 다른 도메인에서 호스팅 되는 웹 페이지 A, B가 있을 때 A 또는 B가 상대 도메인의 API에 요청을 보낼 때 발생함
• CSS, image, script 등의 리소스에는 접근 가능(cross-origin)
• XMLHttpRequest, Fetch API 등 다른 도메인 소스에 대한 자바스크립트 ajax 요청은 요청이 제한됨 (same-origin)
• 웹 보안을 위해 존재함 (데이터 접근을 통한 개인정보 유출 위험, CSRF 공격 방지)
• 서버 측에서 CORS 헤더를 설정해 요청을 허용할 도메인을 명시함
  일반적으로 Access-Control-Allow-Origin 헤더 사용
• 출처를 비교하는 로직은 브라우저에 구현된 스펙임

CORS 에러 해결 방법

• (서버) 서버단에서 위에서 언급한 CORS 헤더를 설정한다.
• JSONP를 사용해 CORS를 우회하기
  자바스크립트, CSS 파일은 동일 출처 정책에 영향을 받지 않으므로 자바스크립트 파일을 가져와 json 형식으로 파싱한다.
• 프록시 서버 사용하기
  클라이언트에서 직접 API 요청을 보내지 않고 프록시 서버를 사용해 요청을 보낸다.
• 미들웨어 사용 (cors)
  프레임워크나 라이브러리에서 제공하는 미들웨어를 사용해 에러를 해결한다.
  CORS 미들웨어를 생성 → API 경로에서 미들웨어 적용(origin, method 옵션에 허용할 출처와 HTTP 메서드 지정)