학습일지
Next.js란
React는 클라이언트 사이드 렌더링(CSR) 방식을 사용하고 Next.js (SSR)를 지원한다.
CSR 방식은 클라이언트 측에서 데이터를 처리하기 때문에 속도가 빠르다는 장점이 있다.
반면 웹사이트에 로드되는 정보가 적으므로 검색엔진 최적화적인 면에서 좋지 않다는 단점이 있다.
Next.js는 SSR 방식으로 Client가 Server에 Html 파일을 요청하여 Html 파일을 받아 정적인 페이지를 구성하게 된다. 이후 Server로 부터 JavaScript 파일을 요청하여 클라이언트는 Html에 JS를 적용하여 동적인 페이지를 구성하게 되는데, 이를 하이드레이션 (Hydration) 이라고 한다.
Next.js는 프레임워크이다.
라이브러리
라이브러리를 사용하는 사람이 자유롭게 코드를 사용할 수 있는 개념이다
개발자가 라이브러리를 이용하여 만들어야 하며 개발자가 주도성을 가지고 라이브러리를 이용하는 개념이다. 대표적인 라이브러리로 React가 있다.
프레임워크
별도의 규칙이 존재하며 개발자가 이를 지켜야 코드를 작성할 수 있다.
주도성이 개발자에게 있는 것이 아닌 프레임워크 측에 있으며 라이브러리에 비해 자유로운 코드를 작성하기 어렵지만 규칙을 알고 있으면 세부적인 제어에 관여할 필요가 없다는 점에서 라이브러리와 다르다.
layout.tsx
컴포넌트를 표시하기 위해 children을 받는 layout.tsx
metadata
설치법
npx create-next-app@latest .
디렉토리
src: 컴포넌트, js, tsx 저장
app: app router 저장
package.json
명령어를 모를 때 package.json script 객체를 참고하자
스타일 지정하기
기본적으로 글로벌 스타일, tailwind, CSS module 방식을 지원한다.
런타임에서 작동하는 CSS in JS를 사용이 제한적으로 가능하다.
https://nextjs.org/docs/app/building-your-application/styling/css-in-js
폰트 지정하기
React 처럼 url를 import 해올 수 있지만 별도의 폰트 패키지를 import 해서 지정할 수 있음
import {Inter} from "next/font/google";
const inter = Inter({subset: ["latin"]});구글 폰트를 임베드해서 사용하는 것과 차이 :
구글 폰트 패키지는 폰트가 내장되어 있기 때문에 외부 요청을 하지 않음
요청을 하지 않고 바로 사용할 수 있기 때문에 성능상 이득
이미지 불러오기
<Image src={bridge} alt={"bridge"}/>-
<Image>컴포넌트 사용할 때 src, alt, width, heigth 속성이 필수 -
hero 이미지 (사용자 눈에 보이는 이미지) 설정할 때 priority={true}로 설정
- 일반
<img>태그와 다른 점:
lazyloading: 사용자가 이미지 파일이 위치한 곳까지 이동할 때 까지 이미지 불러오지 않음
Routing
사용자가 경로를 입력하면 페이지로 이동하는 행위 자체를 말함
Router
라우팅을 관리하고 처리하는 기능을 제공하는 도구
ex)
페이지 라우터: 'next/router'
앱 라우터: 'next/navigation'
Route
특정 url과 컴포넌트 간의 매핑
리엑트에서는 router/index.ts 파일에서 라우트를 정의
App Router
자체적으로 프레임워크 상에서 라우팅하는 시스템
일종의 폴더 구조를 통해 Route를 정의 할 수 있다.
app/about/page.tsx : localhost:3000/about
-
app이라는 폴더가 url 경로를 담당한다.
-
무조건 page.tsx 파일명을 지켜야 한다.
함수명은 자유
중첩
폴더의 폴더를 중첩하여 중첩 경로 지정이 가능하다.
다이나믹 경로
app/blogs/[id]
id 값에 특정 경로가 지정된 경우를 제외하면 아무 값이나 올 수 있다.
중첩 다이나믹 경로
app/blogs/[id]/review/[reviewid]
반드시 다이나믹 경로명이 겹치면 안된다!
포괄적 경로
app/docs/[...slug]
모든 하위 경로가 허용된다.
그룹 폴더
(폴더명)
경로로 인식하지 않는다.
프라이빗 폴더
_폴더명
해당 폴더에 접근 할 수 없는 프라이빗 폴더이다.
Routing에 사용되는 것들
Link 컴포넌트
<Link href=""></Link>params
다이나믹 세그먼트를 참조할 수 있다
{params}: {params: {id: string}}
// 모든 다이나믹 세크먼트 받기
// 단, VSC에서 자동완성 기능 사용 불가
params: {[key: string]: string}searchParams
링크에서 쿼리스트링을 참조 할 수 있다.
{searchParams}: {lang: string; order: string}
// 모든 쿼리스트링 참조
searchParams: {[key:string]: string}Routing hooks
use client
모든 hook은 클라이언트 컴포넌트에서만 사용이 가능하다.
useParams
const params = useParams<{ tag: string; item: string }>()useSearchParams
const searchParams = useSearchParams();
const search = searchParams.get('쿼리스트링 키');