- Next.js가 인기를 끄는 요인
- 리액트 페이지를 클라이언트가 아닌 서버에서 렌더링 가능
- 특정 컴포넌트의 경우는 API나 DB와 같은 외부 소스에서 데이터를 가져와야 함
Next.js 앱 폴더 구조
create-next-app
실행 이후 기본 폴더 구조
- node_modules/
- pages/
- 웹앱의 페이지 파일 저장, 라우팅 시스템 관리
- public/
- 컴파일된 CSS 및 자바스크립트 파일, 이미지, 아이콘 등의 정적 자원 저장 및 제공
- styles/
- 스타일링 포맷(CSS, SASS 등)과 관계없이 스타일링 모듈 저장
public/과 node_modules/를 제외한 다른 폴더들은
모두 src/ 폴더 아래로 옮길 수 있음
- 이렇게 하면 최상위 폴더 구조가 좀 더 간결해짐
- pages/와 src/pages 폴더가 둘 다 있는 경우 Next.js가 src/pages/ 폴더를 무시하고 최상위 pages/를 기준으로 사용
컴포넌트 구성: 아토믹 디자인 원칙
atoms
- 코드의 가장 기본적인 컴포넌트
- 예: button, input, p, 애니메이션, 컬러 팔레트
molecules
- atoms에 속한 컴포넌트 여러 개를 조합하여 만들어진 좀 더 복잡한 컴포넌트
- 예: input과 label 컴포넌트를 합쳐 새로운 컴포넌트를 만듦
organisms
- molecules와 atoms를 섞어서 만든 더 복잡한 구조의 컴포넌트
- 회원 가입 양식(form), footer, 캐러셀(carousel)
templates
- 어디에 organisms, atoms, molecules를 배치할지 결정
- 사용자가 접근할 수 있는 페이지
새 컴포넌트를 만들 때는 최소한 3개의 파일 필요
=> 이렇게 컴포넌트를 구성하면 필요할 때 컴포넌트를 찾아 수정하기 쉬움
유틸리티 구성
- 컴포넌트를 만들지 않는 코드 파일
- 목적에 맞게 다른 파일로 구분하고 컴포넌트에서 유틸 함수를 호출해서 사용
- 예: 현재 시각 계산, localStorage 작업 처리, JWT(JSON Web Token) 처리, 애플리케이션 로그(log) 기록
정적 자원 구성
manifest.json
- JSON 파일
- Progressive 웹앱에 관한 정보 기록
- 예: 앱 이름, 모바일 기기에 앱 설치 시 표시할 아이콘 등
- 위치: public/ 바로 아래
{
"name": "My Next.js App",
"short_name": "Next.js App",
"description": "A test app made with next.js",
"background_color": "#a600ff",
"display": "standalone",
"theme_color": "#a600ff",
"icons": [
{
"src": "/assets/icons/icon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/assets/icons/icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
HTML에서 불러오기
<link rel="manifest" href="/manifest.json" />
스타일 파일 구성
- styles/ 폴더
- 코드 여러 곳에서 사용하는 공통 스타일 관리
- 예: 컬러 팔레트, 테마(theme), 미디어 쿼리 등
lib 파일 구성
- third-party 라이브러리
- 유틸리티 파일과의 차이
- 유틸리티는 범용적
- 다른 컴포넌트나 라이브러리에서 가져다 쓸 수 있음
- lib 파일은 특정 라이브러리에 특화
서버에서 외부 데이터를 불러오는 2가지 방법
- getStaticProps 함수를 사용
- get ServerSideProps 함수를 사용