Next.js 파일구조와 FSD

이번 시간에는 Next.js 프로젝트를 생성했을 때 기본적인 폴더 구조에 대해 알아보려고합니다. 각 파일들의 기능과 역학 그리고 프론트엔드 아키텍쳐 중 하나인 FSD (Feature-Sliced Design, 기능 분할 설계)에 대해서도 알아보겠습니다.

Next.js 프로젝트 생성

프로젝트 생성 명령어 실행: 터미널을 열고 다음 명령어를 입력합니다

npx create-next-app <app-name> --use-npm

 

프로젝트 설정: 명령어 실행 후 몇 가지 설정 옵션을 선택해야 합니다

• 타입스크립트 사용 여부
• ESLint 사용 여부
• src/ 디렉토리 사용 여부
• App Router 사용 여부
• 기타 설정 옵션들

설정을 완료하면 기본 프로젝트가 생성됩니다.

 

Next.js 초기 프로젝트 구조

Next.js 프로젝트를 생성하면 기본적으로 다음과 같은 구조를 가집니다

my-next-app/
├── .next/
├── app/
│ ├── fonts/
│ ├── layout.tsx
│ └── page.tsx
├── node_modules/
├── public/
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

 

폴더 및 파일 설명

.next/

• Next.js가 빌드 시 생성하는 폴더입니다.
• 최적화된 프로덕션 코드, 정적 파일, 서버 사이드 렌더링을 위한 파일 등이 포함됩니다.
• 이 폴더는 .gitignore에 포함되어 있어 버전 관리 대상에서 제외됩니다.

app/

• Next.js 13부터 도입된 App Router를 사용하는 디렉토리입니다.
• 이 폴더 내의 구조가 웹 애플리케이션의 라우팅 구조를 결정합니다.

app/fonts/

• 폰트 파일을 저장하는 폴더입니다.
• GeistMonoVF.woff: Geist Mono 가변 폰트 파일로, 애플리케이션에서 사용되는 커스텀 폰트입니다.

app/layout.tsx

• 전체 애플리케이션의 레이아웃을 정의하는 파일입니다.
• 모든 페이지에 공통으로 적용되는 UI 요소를 여기에 배치합니다.

app/page.tsx

• 루트 경로('/')에 해당하는 페이지 컴포넌트입니다.
• 홈페이지의 내용을 이 파일에 작성합니다.

node_modules/

• npm을 통해 설치된 모든 의존성 패키지가 저장되는 폴더입니다.
• 이 폴더도 .gitignore에 포함되어 버전 관리 대상에서 제외됩니다.

public/

• 정적 파일(이미지, 폰트, 기타 자산 등)을 저장하는 폴더입니다.
• 이 폴더 내의 파일들은 웹 루트에서 직접 접근 가능합니다.

.eslintrc.json

• ESLint 설정 파일로, 코드 품질과 스타일을 일관되게 유지하는 데 도움을 줍니다.

.gitignore

• Git 버전 관리 시 무시할 파일과 폴더를 지정하는 파일입니다.

next.config.js

• Next.js의 고급 설정을 위한 파일입니다.
• 웹팩 설정 커스터마이징, 환경 변수 설정 등을 할 수 있습니다.

package-lock.json

• 프로젝트의 의존성 트리를 정확히 기록하는 파일입니다.
• 다른 개발 환경에서도 동일한 버전의 패키지를 설치할 수 있게 합니다.

package.json

• 프로젝트의 메타데이터와 의존성 목록을 포함하는 파일입니다.
• 스크립트, 버전 정보 등도 여기에 정의됩니다.

README.md

• 프로젝트에 대한 설명, 설치 방법, 사용법 등을 기술하는 마크다운 파일입니다.

tsconfig.json

• TypeScript 컴파일러 설정 파일입니다.
• TypeScript의 동작 방식, 컴파일 옵션 등을 지정합니다.

이 구조를 기반으로 Next.js 애플리케이션을 개발하고 확장할 수 있습니다. 필요에 따라 추가적인 폴더나 파일을 생성하여 프로젝트를 구조화할 수 있습니다.

 

---

FSD (Feature-Sliced Design) 아키텍처

FSD(Feature-Sliced Design)는 프론트엔드 애플리케이션을 위한 현대적이고 신뢰할 수 있는 아키텍처 방법론입니다. 

FSD의 주요 특징

1. 비즈니스 지향적 구조: FSD는 비즈니스 요구사항과 사용자 니즈에 맞춰 설계되었습니다.
2. 계층적 구조: 애플리케이션을 Layers, Slices, Segments로 나누어 구성합니다.
3. 모듈성과 재사용성: 로직의 제어된 재사용을 통해 높은 모듈성을 제공합니다.
4. 확장성: 아키텍처와 팀 규모 면에서 높은 확장성을 제공합니다.
5. 기술 스택 독립성: 특정 기술 스택에 종속되지 않습니다.

FSD의 배경

FSD는 끊임없이 변화하는 비즈니스 요구사항에 대응하기 위해 개발되었습니다. 기존의 프론트엔드 아키텍처들이 대규모 프로젝트에서 유연성과 유지보수성 측면에서 한계를 보이자, 이를 해결하기 위한 대안으로 등장했습니다.

 

FSD의 장단점

장점:

• 변화와 리팩토링에 대한 안정성
• 높은 표준화
• 점진적 도입 가능성

단점:

• 초기 학습 곡선이 있음
• MVP나 단기 프로젝트에는 적합하지 않을 수 있음
• 팀 문화와 엄격한 코드 리뷰가 필요함

Layers (레이어)

FSD는 다음과 같은 표준화된 레이어로 구성됩니다:

1. app: 애플리케이션 초기화, 전역 설정, 스타일, 프로바이더 등을 포함합니다.
2. pages: 라우팅 가능한 페이지 컴포넌트를 정의합니다.
3. widgets: 재사용 가능한 독립적인 UI 블록을 포함합니다.
4. features: 사용자 시나리오와 비즈니스 로직을 구현합니다.
5. entities: 비즈니스 엔티티와 관련된 로직을 다룹니다.
6. shared: 재사용 가능한 유틸리티, UI 키트, 헬퍼 함수 등을 포함합니다.

레이어는 위계적 구조를 가지며, 상위 레이어는 하위 레이어에만 의존할 수 있습니다.

 

Slices (슬라이스)

각 레이어 내에서 코드는 비즈니스 도메인에 따라 슬라이스로 나뉩니다. 예를 들어:

• features/auth
• entities/user
• widgets/header

슬라이스는 동일 레이어 내의 다른 슬라이스와 직접 통신할 수 없으며, 오직 하위 레이어의 슬라이스만 사용할 수 있습니다.

 

Segments (세그먼트)

각 슬라이스는 다시 세그먼트로 나뉩니다. 세그먼트는 코드의 기술적 목적에 따라 구분됩니다:

• ui: 컴포넌트
• model: 비즈니스 로직
• api: 데이터 fetching 로직
• lib: 유틸리티 함수
• config: 설정 파일

Public API

FSD는 각 슬라이스와 세그먼트에 대해 Public API를 정의합니다. 이는 주로 index.ts 파일을 통해 구현되며, 외부에서 접근 가능한 기능만을 노출합니다. 이를 통해 캡슐화를 실현하고 내부 구현의 변경을 용이하게 합니다

 

장점

• 모듈성과 재사용성 향상
• 비즈니스 로직 중심의 구조화
• 코드 네비게이션 용이성
• 팀 협업 효율성 증대
• 확장성과 유지보수성 개선

단점

• 초기 학습 곡선이 있음
• 작은 프로젝트에는 과도한 구조화일 수 있음
• 엄격한 코드 리뷰와 팀 문화가 필요함