NextJS
1.Next JS - 0
NextJS의 구조. 이전 포스팅 CSR VS SSR 을 통해 SSR을 실행하기 위해 React의 대표적인 라이브러리 Next JS 를 시작하기에 앞서, 먼저 NextJs의 구조가 어떻게 되고 어떤 식으로 실제로 구현이 되는 지 정리하고자 합니다.
2.NextJS - 1 (레이아웃 만들기)
npx create-next-appclient에서 띄우길 바라는 전체 컴포넌트의 레이아웃최초 실행됨.페이지 전환시 레이아웃 유지페이지 전환시 상태값 유지componentDidCatch 를 이용해서 커슽첨 에러 핸들링 가능추가적 데이터를 페이지로 주입 가능글로벌 CSS를
3.NextJS - 2 (다이나믹 라우팅)
NextJS의 기능 중에서 강력한 기능 중 하나인 동적 라우팅 기능입니다. 동적 라우팅은 말 그대로 정적으로 라우팅 페이지를 각각 만드는 것이 아닌 동적으로 페이지를 자동으로 생성하고 연결하는 것 입니다. 쇼핑몰을 예를 들면 /립스틱1 , /립스틱2, /파우더 ...
4.NextJS - 3 (SSR)
이전 포스팅에서 상품을 보여주는 과정에서 약간의 시간과 자연스럽지 못한 퍼포먼스를 보였는데요. 이것을 개선하기 위해 크게 두가지 방법을 생각했습니다. >1.로딩 페이지 삽입! SSR ( 😄 왜 SSR이 방법인지 궁금한 사람은 클릭!) 로딩 페이지 제작. 로딩 페
5.NextJS -4 (에러페이지, 환경변수)
이전 포스팅에서 SSR을 사용해서 더욱 나은 사용자 퍼포먼스로 다량의 데이터를 로딩할 때,사용자의 입장에서 기능을 추가해 봤는데요. 이번 포스팅에서는 개발자의 편의를 위한 기능 몇가지를 추가할 예정입니다.바로 에러페이지와 환경변수 입니다.🙋 에러페이지는 알겠는데 환경
6.NextJS - 5 ( 정적 생성)
이전 포스팅에서 SSR에 대해 알아보았는데요. 이번에는 NextJS 의 다른 렌더링에 대해 알아보도록 하겠습니다.NextJS의 경우 기본적으로 모든 페이지는 pre-render 하게 배치하는 특징을 가지고 있습니다.🙋 프리랜더링이 뭐였죠?🤖 프리랜더링은 사전에 HT