반응형
* 범위 : 0~7
* 0. Next.js 란 무엇인가?
- React 기능을 기반으로 한 풀스택 웹 어플리케이션 프레임워크
- React + Expressjs
- SSR 지원 => 검색 엔진 친화적 + 초기 로딩 속도 빠름
- 13 버전 이후 App router 지원 => Server Component라는 새로운 기능 사용
* 3. 빌드와 배포
- npm run dev : 개발 서버 켜기
- npm run build : 배포 서버 만들기
- npm run start : 배포 서버 켜기
=> 배포 서버를 따로 만드는 이유는 배포 서버를 이용하면 페이지 로딩 시 통신에 사용되는 resources가 훨씬 줄어들기 때문
* 5. 라우팅
- 다이나믹 라우팅 : 경로가 '.../read/1' 이렇게 숫자가 붙는데 숫자에 해당하는 모든 페이지를 미리 만들어두지 않을 때 사용
- 사용법
1) 경로 지정 시 [id] 폴더를 만든다 => src > app > read > [id] > page.js
2) page.js 컴포넌트에서 props로 id를 받아온다
export default function Read(props) {
return (
<>
<h2>Read</h2>
parameters : {props.params.id}
</>
);
}
* 6. SPA
- next에서는 <a> 대신 <Link>만 활용해도 SPA를 경험할 수 있다
=> 페이지 이동 시 변화된 부분만 통신하고, 방문했던 페이지로 다시 이동 시 재통신하지 않음
원티드 프리온보딩을 하면서 next에 대해 배우게 되었는데, 생활코딩에서 강의를 시작하신다고 하셔서 다시 기초부터 시작!!
💪아자아자 1일차💪
반응형
'Learning Log > Next.js' 카테고리의 다른 글
[next.js] 생활코딩 Next.js 13 3일차 (0) | 2023.08.08 |
---|---|
[next.js] 생활코딩 Next.js 13 2일차 (0) | 2023.08.04 |
[next.js] 원티드 프리온보딩 챌린지 사전과제 (0) | 2023.07.03 |