코드잇 스프린트 14주 차 위클리 페이퍼

코드잇 스프린트 4기

14주 차 위클리 페이퍼

 

https://codingaring.tistory.com

 

 

1. Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.

• 페이지 요청이 왔을 때 Next는 해당 라우팅 파일에서 SSR 함수를 만나면 HTML만 렌더링해서 보내주게 된다.
• HTML에 이벤드 리스너가 등록되지 않았기 때문에 동적인 작업을 진행할 수 없다.
• 이후 JS 파일을 로드하고 hydration을 통해서 HTML에 이벤트 리스너를 연결한다.

hydraion

hydration은 서버에서 렌더링된 HTML에 자바스크립트 코드를 연결하는 과정을 뜻한다.

pre-rendering 과정에서는 자바스크립트 요소들이 빠졌기 때문에 빠른 로딩이 가능하고 hydration을 통해서 자바스크립트가 렌더링을 할 때는 웹 페이지를 다시 그리는 과정은 생략하고 이벤트 리스너만 연결한다.

 

2. CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.

cross-origin

http://localhost:3000/user/

다음과 같은 주소가 있을 때 origin(출처)은 프로토콜, 호스트, 포트 세 요소를 의미한다.

• 프로토콜: http
• 호스트: localhost
• 포트: 3000

서로 요청을 하는 곳에서 위 요소 중에서 하나라도 다르면 cross-origin(교차 출처)로 판단한다.

 

브라우저는 기본적으로 SOP(Same-Origin Policy; 동일 출처 정책) 정책을 지닌다.

즉, 같은 출처에 대해서만 요청을 허용한다는 것이다. 하지만 인터넷 환경에서 서로 다른 출처의 요청은 매우 흔한 일이기 때문에 무조건 막을 수는 없다.

 

다른 출처를 허용하되 제약을 두기 위해서 CORS(Cross-Origin Resource Sharing; 교차 출처 리소스 공유) 정책을 만들게 된다. 만약 아무런 제약이 없다면 CSRF, XSS 등 보안에 매우 취약하다.

 

CORS 에러 해결

• 서버에서 Access-Control-Allow-Origin 헤더 설정
• Proxy 서버 사용

---

출처

https://www.howdy-mj.me/next/hydrate

https://docs.tosspayments.com/resources/glossary/cors

 

 

감사합니다.