일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- React
- webpack
- 결정 알고리즘
- 무한 스크롤
- 리터럴 타입
- SSR
- CI/CD
- RTK Query
- useAppDispatch
- 반공변성
- app router
- TS
- Promise
- autosize
- map
- recoil
- 이분 검색
- 타입 좁히기
- CORS
- 호이스팅
- Cypress
- dfs
- Jest
- ESlint
- 태그된 유니온
- 인터섹션
- 공변성
- 투포인터
- async/await
- tailwind
- Today
- Total
목록app router (2)
짧은코딩
app router app router는 기존에 있던 page router의 문제점들을 해결한 새로운 폴더 구조이다. 아직 Next에서 page router를 지원하긴 하지만 신규 기능은 app router에만 적용될 것이다. 그렇기에 장기적으로 보면 app router에 대해 잘 이해할 필요가 있다. 파일 생성 npx create-next-app@lastst 폴더 구조 public public 폴더에는 주로 누구나 접근 가능한 사진들을 저장한다. 만약 특정한 조건을 가진 사람만 접근이 가능해야 하면 다른 곳에 저장해야 한다. src/app app 폴더 안에는 페이지를 설정하는 파일들이 들어간다. 페이지 외에 파일이 필요하면 다른 폴더를 만들어서 작성하면 된다. -layout.tsx layout.tsx는..
App Router app 폴더 하위에 모든 파일 추가 폴더명으로 경로를 정의하며, page.js 또는 route.js로 작성된 파일만 경로로 활용 가능 layout.tsx 이 파일은 최상위 레이아웃으로 모든 페이지에 공유됨 pages router의 _app.js를 대체한다. page.tsx 웹 애플리케이션의 시작점이자, 루트 / 경로 페이지 Server Component 무엇이 서버 컴포넌트인가? 컴포넌트가 서버에서 렌더링이 되고 클라이언트에 html로 전송되는 것 특징 리렌더링이 되지 않는다. 서버 리소스에 접근 가능하다(서버 시스템, db) js 번들에 포함되지 않는다.(제로 번들 사이즈) 자동 코드 스플릿팅 → lazy로 명시할 필요 x 유저 인터랙티비티(useState, useEffect 등) ..