1. 디렉토리 구조
-
public : 누구나 접근해도 되는 파일. 이미지 등
-
src/app : 소스 파일
-
(xxx) : 그룹핑 용. layout 적용 용
-
_xxx : private folder, 폴더 정리용
2. 라우팅
'디렉토리 구조'를 통해 라우팅
페러렐 라우트
여러 page를 한 화면에 보이는 방법
@modal 디렉토리에 넣어두면 됨.
layout에서 기존 page는 children에 매핑되고, @modal에 넣어둔 page는 modal에 매핑됨.
default.tsx : 페러렐 라우트의 기본값. 아무것도 안 넣고 싶을때 사용.
단, 패러렐 라우트는 주소 uri 가 같은 page만 보여줄 수 있음.
인터셉팅 라우트
주소 uri가 다른 page를 보여줄 수 있음.
대상 폴더에 (.)나 (..) 붙이기
3. Layout
페이지, modal를 어떻게 담을지 구성
layout.tsx > page.tsx
layout안에서 page 가져옴
layout끼리는 상위 layout부터 순차적으로 동작
template.tsx : 페이지 넘나들때, 리렌더링 됨. (사용예시 : 페이지 넘나드는 로그 남길때)
layout.tsx : 페이지 넘나들때, 리렌더링 안됨.
경로
: @/app/... (= .../src/app/...)
@는 src까지 경로를 의미.
태그
a 태그 대신, Link 태그 사용할 것
img 태그 대신, Image 태그 사용
사진 파일, css도 import해서 사용
리다이랙트 :
import {redirect} from "next/navigation";
redirect('uri');4. 클라이언트 컴포넌트, 서버 컴포넌트
일단 기본적으로 모두 서버 컴포넌트.
클라이언트 컴포넌트로 바꾸려면 "use client" 붙이기.
서버 컴포넌트에서 클라이언트 컴포넌트를 import 가능
클라이언트 컴포넌트에서 서버 컴포넌트 import 하지 말기.
5. Context API
createContext 사용
어디서 수정한 상태가 다른 곳에 영향을 미치고 싶을때 사용하는 듯?
6. dayjs
몇 초전, 몇 시간전 등 나타낼 때, 쓸만한 라이브러리
7. 사진 올렸을 때 검게 변환
다른 div 만들어서 사진과 위치를 겹치기. - position: absolute
그리고 해당 div의 색을 변환
8. clsx
classnames랑 같은 역할하는 라이브러리
