공부 기록

Next.js에서 Data Fetch 하는 방법에 대해 알아보겠습니다.  1. Data Fetch원래 Front랑 DB 사이를 연결하려면 API가 필수적으로 필요하며 API가 사이에서 데이터를 주고 받을 수 있게 도와줬는데 Next.js를 사용하면 API가 더이상 필요없다. client component에서 Data fetching 방법Hooks 사용기본 React만 쓸 때처럼 useEffect를 쓰면서 해야된다.fetch할 때마다 API에 요청한다.server component로부터 Data fetching 방법Hooks 미사용프레임워크가 다 해주기 때문에 useEffect를 쓰지 않아도 된다.첫 번째 fetch만 API에 요청한다.첫 번째 fetch할 때는 fetch되는 동안 페이지가 로딩되는데 이때..

Next.js는 Hydration의 유무에 따라 client component와 server component로 나눠진다.그럼 Hydration이란 무엇일까? 1. Hydration정의사용자가 최초 html을 본 뒤에 어떤 일이 발생하는 지에 대한 과정을 말한다.달리 말해, 단순 html을 React Application으로 초기화하는 작업을 말한다.과정사용자가 페이지에 도착한 순간에는 아직 Javascript도 프레임워크도 로드되지 않은 더미 html을 보여준다. 이때 event listener 등은 작동하지 않는다.그 후 아주 빠르게 react application이 초기화된다.완료되면 react component가 되고 요소들이 interactive하게 된다.Hydration 과정을 거치면 even..

Next.jsReact와 달리 프레임워크로써 사용자가 NextJS을 따라야 한다.Next.js의 첫 페이지는 무조건 app/page 파일이다. client / server component로 이루어져 있다. Next.js 에는 중요한 파일명이 몇 개 있다. page : 페이지에서 제일 처음 보여질 파일 not-found : 존재하지 않는 url을 검색했을 때 보여줄 파일   Route /app/layout, /app/page 같은 경우 경로가 root("/")에서 보게 될 페이지이기 때문에 root segment라고 한다.  /app 폴더 내에 폴더명이 route 경로이며 무조건 파일 이름은 page!page 파일이 없으면 그 폴더는 그냥 컴포넌트들을 갖고 있는 일반적인 폴더가 되며 url이 될 수 없다..