Web

[ Next.js - DeepDive ] - SSR + Authentication

이번 포스팅에서는 서버단에서 이 페이지 ( 프로필 )를 어떻게 렌더링할지 알아보겠습니다. 그리고 getServerSideProps함수에서 어덯게 인증 기능을 구현할지 알아보도록 하겠습니다. 그리고 우리는 withApiSession이라는 Helper함수를 iron-session에서 제공하는 함수를 통해 구현했었습니다. 이는 쿠키의 일종의 암호화를 푼 다음 request안에 그 쿠키 내용들을 넣어주는 역할을 합니다. 그리고 우리는 이 외에도 withSsrSession이라는 함수를 만들도록 하겠습니다. iron session을 이용하면 API Route안에서 인증 할 수도 있고, getServerSideProps안에서도 할 수 있습니다. iron-session은 암호화된 쿠키를 이용하는 Node.js stat..

[ Next.js - DeepDive ] - SSR + SWR

SWR을 사용하면 만약 나의 계정 -> 채팅 -> 나의 계정으로 오는 과정에서 나의 계정에 해당하는 데이터가 캐시되어 캐시된 데이터를 사용합니다. (요청은 가지만 다르면 업데이트 합니다) 하지만 이전에 SSR getServerSideProps를 사용하게 되면, 기존에 SWR이 제공해 주는 캐시 기능을 사용할 수 없게 됩니다. 그냥 무조건 getServerSideProps즉 서버단에서 최신의 데이터를 가져와서 시간이 좀 걸리고 그 최신데이터를 렌더링하기 때문입니다. 또 에러가 나는 과정에서 서버단에서 만약 PlanetScale에 문제가 생겨 데이터를 받아 올 수 없는 경우가 생기게 된다고 해봅시다. 그럼 유저는 페이지에서 아무 것도 볼 수 없게 됩니다. UI자체를 불러올 수 없게 되버립니다. 하지만 SWR..

[ Next.js - DeepDive ] - getServerSideProps

Carrot Market클론코딩을 하면서 클라이언트단에서 데이터를 불러오는 방식으로 앱을 만들었습니다. 이는 NextJS에서 데이터를 불러올 수 있는 여러 가지 방법 중 하나일 뿐입니다. https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props Data Fetching: getServerSideProps | Next.js Fetch data on each request with `getServerSideProps`. nextjs.org getServerSideProps 이 getServerSideProps는 서버단에서만 호출되고 페이지 컴포넌트가 서버단에서만 렌더링됩니다. 우리가 이 홈페이지에 들어왔다고 해 봅시다. 위의 상단바..

[ Next.js - DeepDive ] - Script Component

우선 script component딥다이브를 하기전에 개인적으로 자바스크립트 로드 방법과 실행순서가 궁금해서 간단히 알아보고 시작하도록 하겠습니다. 자바스크립트 로드 방법과 실행순서요약: 웹 브라우저가 HTML문서를 파싱하다가 (구문을 분석할 때) 태그를 만날 때 script태그에 어떤 속성이 존재하냐에 따라서 동작하는 방식이 달라지게 됩니다. 이는 문서를 로딩하는 시간에 영향을 주기 때문에 개발자는 이 차이를 이해 할 필요가 있습니다. 아무 속성도 없을 때HTML파싱 시작 -> script태그 파싱 -> script 태그의 src=""에 해당하는 스크립트 파일 다운로드 시작 -> HTML파싱 중단 -> 자바스크립트 실행 -> 자바스크립트 실행 종료 -> 나머지 HTML파싱 시작Async 속성이 있을 때..