라이브러리 vs 프레임워크
라이브러리
- 코드 내에서 사용하는 것이지만 사용의 주체는 나이다. 구조에 관한 모든 결정을 내가 내린다.
프레임워크
- 우리의 코드를 사용한다. 주도권이 나에게 없다.
NextJs Setup
- 프로젝트 폴더 만들기
- npm init -y
- npm install react@latest react-dom@latest next@latest
- package.json의 scripts를 “dev” : “next dev”로 변경
- 이 dev 명령어를 실행하면 Next JS를 실행시킬 것이다.
- root 폴더 안에 app 폴더와 그 안에 page 파일을 만들어야 한다.
- 폴더 이름 규칙을 지켜야 한다.
- NextJS가 빌드할 때 웹사이트의 첫번째 페이지를 page 폴더에서 찾으려 하기 때문이다
- tsx와 jsx 확장자 중에 골라야 한다. (자유)
- npm run dev
not-found
→ app 폴더의 root에서 not-found.tsx 파일을 작성
특별한 파일
- page
- layout
- not-found
SSR vs CSR
Rendering
- react code를 브라우저가 이해할 수 있는 html로 바꾸는 것
React가 렌더링되는 방식 -> Client Side Rendering이다.
- 브라우저가 rendering 작업을 한다는 것을 뜻한다.
아무 프레임워크 없이 create-react-app으로만 앱을 만들면
=> csr(client side rendering)로만 렌더링 된다.
모든 Ui 구축이 client 측에서 일어난다.
client는 javascript를 로드하고 javascript가 ui를 빌드한다.
단점
- UI를 보려면 JavaScript가 실행이 되어야 한다
- 조금 딜레이가 생긴다(javascript 파일을 매번 받아와야 해서)
next.js로 웹사이트를 빌드할 때는 자동적으로, default로 server side rendering이 된다.
페이지의 내용들이 모두 실제로 브라우저 코드에 포함되어 있다.
→ 브라우저가 javascript 코드를 로드할 필요가 없다.
next.js application의 모든 page 안의 모든 component들은 next.js가 그것들을 우선 server에서 render 한다는 것이다.
Hydration
- 단순 HTML을 React application으로 초기화하는 작업이다.
사용자가 최초 HTML을 본 후에 무슨 일이 일어나는지, React가 언제 활성화 되는 지
=> 그 과정이 hydration
hard navigation - a 태그의 href만 사용하고 있다. (javascript 비활성화 상태)
javascript 활성화하면 → 새로고침이 되지 않는다. click이 발생하면 link component가 수행한다. React component로 대체된다. 페이지 전체를 리로드하지 않고 빠르게 navigate하게 된다.
link component ⇒ only client side rendering
/about-us ———→ dummy HTML ———> user arrived page, framework is reloaded. ——> init(Boring HTML) ——→
사용자가 페이지에 도착한 순간에는 단순한 html만 보여지고 그 뒷면에서 react application이 빠르게 활성화되고 있으며 component들로 대체된다.
hydration 과정이 모든 컴포넌트에 대해 발생하지 않는다.
server side render는 모든 component에 발생
모든 component들이 server side에서 먼저 render 된다.
client에서 hydrate 될 component들은 use client 지시어를 맨 위에 갖고 있는 component들 뿐이다.
client에서만 render 된다는 뜻이 아니다. server에서 render되고 front에서 hydrate된다.
use client component를 쓰지 않는 것들은 모두 server component가 된다.
server components는 server에서 먼저 render 되고, hydrate는 되지 않는다.
client component 안에는 server component를 가질 수 없다.
server component는 client component를 가질 수 있다.
route groups
폴더 이름을 괄호로 묶어줘야 한다.
→ 괄호로 묶인 것은 url이 만들어지지 않는다.
home은 (home)으로 해도 된다.
app 폴더 바로 하위에 layout.tsx, not-found.tsx는 꼭 있어야 한다.
→ 기본적으로 모든 컴포넌트에 적용되기 때문이다.
Metadata
꼭 내보내야 하는 object
여기 안에 뭐가 있던지 페이지의 head 부분에 표시될 것이다.
레이아웃이 중첩되는 것과 같은 방식으로 메타데이터도 중첩된다.
→ 메타데이터는 중첩보다는 병합에 가깝기는 하다.
페이지나 레이아웃만 메타데이터를 내보낼 수 있다.
component에서는 metadata를 내보낼 수 없고 Metadata는 서버 컴포넌트에서만 있을 수 있다.
메타데이터에 대한 템플릿도 만들 수 있다.
Dynamic Routes
/movies/295829 이런 식으로 되어있다.
/movies/:id —→
id를 변수로 만들어줘야 한다.
파일시스템으로 해본다.
URL을 동적으로 만드는 법
→ 파일을 만든다.
- 대괄호를 사용해 만들어준다. → nextjs에게 movies/ 뒤에 무엇이 들어가도 괜찮다는 것을 알려준다.
