만족

//... const router= useRouter(); useEffect(()=>{ //... }, [router]); //... 이런 코드가 있을 때, bfcache로부터 페이지가 복원된다면 어떻게 될 것 같은가? 내 생각에는 당연히 memory snapshot을 복구했으니 router가 업데이트되지 않을 것이라고 생각했다. 실제로 데스크탑 크롬에서는 그렇게 동작한다. 그런데 모바일/데스크탑 사파리와 모바일 크롬, 삼성 브라우저에서는 router가 업데이트된다. 아래 코드를 기준으로 설명할 것이다. (원본 코드는 https://github.com/NamGungGeon/why-router-is-updated 에서 확인할 수 있다) // page/index.js function Home() { cons..

https이 적용된 상태에서만 정상 작동하는 동작들이 있다. 이 포스트에서는 로컬에서 https를 적용하는 방법을 알아본다. 아이디어 우리가 https 가 적용된 웹사이트에 접속할 때 어떤 일이 일어날까? https://nuritech.tistory.com/25 HTTPS 통신 원리 쉽게 이해하기 (Feat. SSL Handshake, SSL 인증서) 이 글을 쓰게 된 이유는,, 나의 평소 HTTPS 에 대한 지식은 HTTPS 가 암호화된 네트워크 통신 프로토콜이고 HTTPS 를 사용한 네트워크 통신에서는 주고받는 패킷을 까도 데이터가 암호화되어 있어 안 nuritech.tistory.com 암/복호화 부분을 제외하고 살펴보면 1. 서버가 클라이언트에게 인증서를 제시 2. 클라이언트는 인증 기관(CA)에..

기존의 expressjs프로젝트에 페이지 렌더링 기능이 필요해 Nextjs를 사용했다. 통신 구조 여기에서 Client가 3006포트로 요청을 하면, nextjs 프로젝트에서 리버스 프록싱을 통해 express 프로젝트에 관련 데이터를 요청하고 클라이언트에게 페이지를 반환한다. 클라이언트는 express(PORT 3002)와 직접 통신할 필요가 없다. 만약 클라이언트가 API 호출을 원한다면 아래와 같이 통신한다. 클라이언트가 api서버와 통신하길 원한다면, nextjs를 거치지 않고 express와 통신할 수 있다. express프로젝트에 nextjs추가 yarn add react react-dom next or npm install react react-dom next 필요한 세 개의 모듈을 추가한다..