doeunn.log

Dynamic Routes 저번 글에서 다양한 페이지들을 만들었지만 slug를 활용하면 slug에 어떤 값이 들어오든 동적으로 화면을 다룰 수 있었습니다. 그런데 slug 값으로 주었지만 실질적으로 그 slug에 따라 다르게 보여야만 우리가 의도한 바를 보일 수 있을 것입니다. [slug] 값은 어떻게 활용할 것인가? Next.js에서 제공하고 있는 ('next/router') useRouter라는 함수가 있는데요. 이 훅을 이용하여 router를 꺼내고 거기에서 slug를 꺼내볼 수 있습니다. 1 2 3 import { useRouter } from 'next/router' const router = useRouter() const { slug } = router.query cs 📜 src/pages/..

Router Routing은 흔히 네트워크 용어로 많이 사용되며, 특정 주소가 있고 그 주소에 접근하면 그 주소와 매칭되어 있는 데이터들을 받아서 사용하는 일련의 과정을 Routing이라고 합니다. 그 일을 도와주는 도구를 Router라고 합니다. React에서는 별도의 Router를 제공하지 않기 때문에 react-router라는 라이브러리릍 통해 구현합니다. Next.js의 Router는 file-system 기반입니다. 즉, file을 만들면 그것이 즉각적으로 router로 인지되어 주소와 매핑됩니다. pages/ 혹은 src/pages/ 에서 Router 기능을 사용할 수 있습니다. ❓pages/index.js 와 src/pages/index.js 둘 다 있다면? 뭐가 우선순위를 가질까? 직접 해..

Pages Next.js 프로젝트 구조 안에서 pages 안에 있는 폴더가 url과 1:1 혹은 1:N 매칭이 됩니다. Pre-rendeers와 SEO Next.js는 모든 페이지를 기본적으로 pre-render 합니다. pre-render는 말 그대로 미리 그려놓는다는 의미인데요. pre-rendering은 처음 클라이언트 쪽에서 html을 로드할 때 이미 많은 부분이 그려진 상태에서 로드를 하는 것이고, 이후에 JS 번들이 load가 되면 그제서야 Hydration이라는 과정을 거쳐 사용자와 app이 인터랙션을 할 수 있게 됩니다. html만을 가지고는 인터랙션을 할 수 없습니다(JS 코드들이 있어야 하죠?). JS 코드를 적용하는 것을 Hydration이라고 합니다. pre-render가 없는 경우..

Data Fetching Fetching = 가져오기 즉, Data Fetching은 데이터를 가져오는 작업을 말합니다. 왜 시작부터 Data Fetching인가? 화면에 무엇인가 그리려면 결국 어디선가 Data를 가져와야 합니다. 즉, 화면을 구성하기에 앞서 Data Fetching이 먼저다 !라고 생각하면 되겠습니다. Next.js가 제시하는 3+1 가지 Data Fetching 방법 ▪️ SSR ▪️ CSR ▪️ SSG ▪️ ISR 1) SSR (Server Side Render) 서버가 그린다라는 의미로, 서버가 어디선가로부터 데이터를 가져와서 그린다라는 의미 정도가 되겠습니다. Next.js에서 SSR을 담당하는 함수 : getServerSideProps 1 2 3 4 5 6 7 8 9 10 1..