Next.js

💡 Next.js란? > React.js를 보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공하는 프레임워크 기존 React에 페이지 라우팅, 빌트인 최적화 기능, 다이나믹 HTML 스트리밍 등의 기능을 더한 리액트의 확장판이다. 라이브러리 vs 프레임워크 차

Page Router 많은 기업에서 사용되고 있는 안정적인 라우터로, React Router처럼 페이지 라우팅 기능 제공한다. pages폴더 아래에 들어있는 폴더/파일명 기반의 라우팅 규칙을 따른다. 프로젝트 시작하기 npx : Node Package Executo

Prefetching 프리패칭이란? > Pre : 사전에, 미리 + fecth : 불러온다 빠른 페이지 이동을 위해 제공되는 기능으로, 현재 사용자가 보고 있는 페이지에서 이동할 수 있는 모든 페이지를 미리 불러오는 것이다. 프리패칭을 통해 페이지 이동 속도를 높일 수 있다. 네비게이팅 방법 3가지(a, Link, useRouter) 중, 기본적으로 ...

Next.js를 공부하다보니 React와 npm 명령어가 다른 것 같아서 정리해본다. npm 기본 명령어 > start : 애플리케이션 실행 package.json의 scripts에 정의된 start 명령어 실행 start 스크립트가 없으면 기본적으로 node se

Next.js에서 CSS를 사용해서 스타일링을 적용해보자 🍀 스타일링 인라인 스타일 설정 인라인으로 스타일 설정을 할 수도 있지만 아무래도 코드가 길어질수록 가독성이 좋지 않다 CSS ? 그렇다면 css 파일을 import 하면? Global CSS cannot be imported from files other than your Custom .이...

백엔드가 없는데 데이터가 필요할 때 데이터 리스트 src/mock 디렉터리를 생성한 뒤 json 파일에 임시 데이터를 생성한다. books.json 데이터 한 개 작업중인 .tsx파일 내부에 임시로 mockData 객체를 만들어서 사용한다. CSS CSS 속성 ✨ display 요소가 화면에서 어떻게 배치될지 결정 > block : 블록 요소(한 줄 ...

React에서의 Data Fetching 💡 CSR (Client-Side Rendering) React의 CSR 방식에서는 데이터 페칭이 컴포넌트 마운트 이후 (useEffect) 발생 따라서 사용자는 FCP 이후에도 데이터 로딩을 기다려야 한다. > ❌ 데이터 요청 시점이 느리다 (컴포넌트 마운트 이후) ❌ SEO 최적화가 어렵다 → HTML이 ...

📚 SSR 페이지의 실행 순서 https://www.~ 페이지 요청이 온다. getServerSideProps 함수가 실행된다. 페이지 컴포넌트가 실행된다. 🔨 getServerSideProps 페이지 컴포넌트보다 먼저 실행되어서, 컴포넌트에 필요한 데이터 불러오는 함수 파일 내에 약속된 이름의 함수 getServerSideProps를 만들어 내보내...

SSG 페이지의 실행 순서 getStaticProps 함수가 실행된다. 페이지 컴포넌트가 실행된다. 렌더링 완료 이후에 https://www.~ 페이지 요청이 온다. 개발 모드 개발 모드에서는 렌더링 방식이 SSG이더라도 새로고침 할 때마다 페이지를 새로 렌더링한다. (개발 편의를 위해) 프로덕션 모드 npm run build를 했는데 이런 에러가 뜬...

ISR (Incremental Static Regeneration) 실행 순서 getStaticProps 함수가 실행된다. 페이지 컴포넌트가 실행된다. 페이지 요청(https://www.~) → 만들어둔 페이지를 반환한다. 설정한 시간(revalidate)이 지남 +