| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
- WIL
- Grafana
- 회고
- array
- react
- til
- mongoose
- 자바스크립트
- 피드백
- next.js
- 기록
- 리눅스
- 생각일기
- mysql
- MongoDB
- 일기
- javascript
- 코테
- js
- typescript
- Java
- nest.js
- 네트워크
- 생각정리
- 생각로그
- CS
- 주간회고
- Git
- 알고리즘
- 트러블슈팅
- Today
- Total
목록next.js (2)
코딩일상
개요next.js 를 통해서 개인 프로젝트를 진행하던중Hydration mismatch 라는 이슈를 마주하게 되었다. 하이드레이션이란? 하이드레이션 비유를 🧊 얼음 큐브(서버의 HTML) → 💧 물(상호작용 가능한 웹페이지)서버에서 보내준 HTML은 '얼음 큐브’이다모양은 갖추어져 있지만, 딱딱하고 변화가 없다. 이 얼음 큐브가 브라우저에서 '물'이 되어야 사용자와 상호작용할 수 있다.이렇게 얼음을 물로 만드는 과정이 바로 '하이드레이션'왜 하이드레이션이 필요??1. 빠른 초기 로딩 - 서버가 미리 HTML을 만들어서 보내줌 - 사용자가 빨리 콘텐츠를 볼 수 있음2. 검색 엔진 최적화(SEO) - 검색 엔진이 콘텐츠를 잘 읽을 수 있음 - 더 나은 검색 결과 노출3. 사용자 경험 - 초기 화면이 ..
[next.js] 초기 설정 명령어들 의미(What is your project named)
What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/*)? No / Yes What import alias would you like configured? @/* 1.프로젝트 이름 (m..