최적의 아키텍처를 찾는 과정

프로젝트를 진행하면서 가장 중요하게 고려한 점은 유지보수성과 확장성이었습니다. 특히, 코드베이스가 커지면서 구조적인 문제를 미리 해결하지 않으면 생산성이 저하될 수 있다는 점을 인식하게 되었습니다. 이러한 고민 끝에, Next.js를 기반으로 FSD(Feature-Sliced Design) 아키텍처를 도입하게 되었습니다. 이번 글에서는 FSD 아키텍처의 구조와 도입 이유, 그리고 이를 통해 얻은 이점에 대해 소개하려고 합니다.

FSD(Feature-Sliced Design)는 기능 중심의 코드 구조화 방식으로, 프로젝트를 유지보수 가능하고 확장성 있게 설계하는 데 초점을 맞춘 아키텍처입니다. 이는 코드베이스를 기능 단위(feature) 로 분리하며, 각 기능은 독립적으로 개발 및 테스트할 수 있도록 설계됩니다.

FSD는 다음과 같은 주요 디렉토리 구조를 따릅니다.

1. app: 애플리케이션 전역 설정 및 레이아웃.
2. entities: 주요 비즈니스 로직과 관련된 데이터 모델, 상태, DTO 및 서비스.
3. features: 특정 기능 단위로 컴포넌트와 함수를 분리.
4. pages: Next.js의 라우팅을 담당.
5. shared: 공통적으로 재사용되는 컴포넌트 및 유틸리티 함수.
6. widgets: 네비게이션 바, 푸터 등 주요 레이아웃 요소.

엔티티는 주요 비즈니스 로직, 데이터 모델, DTO, 상태 관리와 같은 핵심 요소를 포함합니다.

특정 기능과 관련된 모든 컴포넌트, 함수는 features 디렉토리에서 관리됩니다.

재사용 가능한 컴포넌트와 유틸리티 함수는 shared 디렉토리에서 관리됩니다.

1. 유지보수성 극대화 FSD 아키텍처는 기능 단위로 코드를 구조화하여, 특정 기능을 수행하거나 추가할 때 코드 베이스의 다른 부분에 영향을 최소화할 수 있었습니다.

2. 확장성 확보 코드 구조가 명확히 구분되어 있어, 새로운 기능 추가가 용이했습니다. 각 기능은 독립적으로 관리되므로, 복잡도가 증가해도 코드 관리가 수월했습니다.

3. 팀원 간 협업 효율화 코드베이스가 기능 단위로 분리되어 있어, 팀원 간 역할 분담이 명확했습니다. 각자가 맡은 기능에 집중할 수 있었고, 코드 충돌이 줄어들었습니다.

1. 코드 가독성 향상 프로젝트 구조가 명확하게 나뉘어 있어, 새로운 팀원이 코드베이스를 이해하는 데 걸리는 시간이 단축되었습니다.

2. 확장 가능한 코드베이스 구축 프로젝트가 커지더라도 코드 구조를 유지하며 새로운 기능을 추가할 수 있었습니다.

FSD 아키텍처는 웹 프론트엔드 프로젝트에서 유지보수성과 확장성을 극대화할 수 있는 강력한 설계 방식입니다. 특히, 기능 중심으로 코드를 분리하고, 엔티티와 기능을 명확히 구분하여 프로젝트의 복잡도를 효과적으로 관리할 수 있었습니다. 리액트와 Next.js를 기반으로 한 프로젝트에서 유지보수성과 협업 효율성을 높이고 싶다면, FSD 아키텍처를 적극 추천합니다.