일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- CSS
- html5
- array
- 선택자
- 변수
- JavaScript
- dev
- next.js
- 최적화
- 함수
- AI
- learn next.js
- hooks
- This
- gitCLI
- react
- object
- 햇소
- ES5+
- git
- developerlife
- es6
- API
- 우아한테코톡
- ES6+
- Python
- github
- JS
- hatso
- DOM
Archives
- Today
- Total
codinghatso
Next.js | Pages Router 1장 ~ 10장 본문
1장은 github에 준비되어 있는 학습자료를 내 로컬환경에 set up 하는 내용입니다.
2장은 로컬환경에서 정상 작동하는지 확인하는 챕터입니다.
3장은 편집 후에 Fast Refresh가 되는지 확인하는 챕터입니다. (저장 후 페이지 새로고침 없이 적용되는 현상)
4장은 앞으로 학습할 내용을 미리 공지하는 챕터입니다.
- 통합 파일 시스템 라우팅을 사용해 new page를 만들기.
- Link component를 client-side 에서 페이지간 탐색을 어떻게 하는지 학습.
- code splitting과 prefetching을 우한 튼튼한 기반 학습.
5장은 1장을 건너띈 학습자를 위한 챕터인 것 같습니다.
6장은 Next.js의 파일시스템 기반 라우팅을 복습하는 챕터입니다. page/posts/first-post.js 파일을 만들어 로컬에서 확인해 보는 것까지 실습합니다.
7장은 <Link/> 태그에 대해서 알아보고 실습하는 챕터입니다.
8장은 Client-Side Navigation에 대해서 알아보는 챕터입니다.
- Next.js는 코드 분할, 클라이언트 측 탐색, 프리페칭(제작 중)을 통해 애플리케이션을 자동으로 최적화합니다.
- 아래 파일로 경로를 생성하고 내장된 구성 요소를 사용합니다. 라우팅 라이브러리가 필요하지 않습니다.
- 더 자세히 알아볼 수 있습니다 Link API 참조 및 라우팅 문서의 일반적인 구성 요소.
9장은 Layout Componet 에 대해서 알아보는 챕터입니다.
여기서 layout.module.css 파일을 사용하는데 이 module을 사용하면 className을 자동으로 고윳값을 주게 되어 중복되는 일이 발생하지 않습니다. 이중복을 자동으로 막아주는 게 module의 핵심입니다.
10장은 본격적인 CSS 적용을 예고하면서 다음 챕터로 이어집니다.
'WEB > Next.js' 카테고리의 다른 글
Learn Next.js 제 16장 : Adding Metadata (0) | 2025.03.13 |
---|---|
Learn Next.js 제 15장 : Adding Authentication (0) | 2025.03.13 |
Learn Next.js 제 14장 : Improving Accessibility (0) | 2025.03.13 |
Learn Next.js 제 13장 : Handling Errors (0) | 2025.03.12 |
Learn Next.js 제 12장 : Mutating Data (0) | 2025.03.12 |
Comments