모노레포와 FSD 폴더구조가 뭐야?

lionloopy·2025년 5월 4일

오늘의 공부

목록 보기

16/22

시작하며

모노레포와 멀티레포를 왜 고민할까?

-> 프로젝트가 커지면서 개발 조직은 각 도메인별로 분리해서 마이크로 서비스로 구성하기 시작한다.
-> 이 때 개발 조직은 쪼개진 각 서비스를 하나의 레포에서 관리할지!
각각 다른 레포로 관리할지 고민하게 된다.

폴더 구조는 왜 중요할까?

-> 폴더구조는 코드의 가독성과 유지보수성에 큰 영향을 미친다.
잘 설계된 폴더구조만으로도 코드를 쉽게 이해하고 수정할 수 있도록 도와준다.
폴더 구조는 논리적 흐름을 반영하고, 관련된 파일들을 그룹화한다.

모노레포

: 다수의 프로젝트를 하나의 레포지토리에서 관리한다.

📦 모노레포
 ┣ 📁 A 프로젝트
 ┣ 📁 B 프로젝트
 ┣ 📁 C 프로젝트

장점

통합적인 관점에서 코드의 일관성을 유지할 수 있다.
하나의 저장소에서 전체 코드베이스를 관리함으로써 리팩토링이나 대규모 변경 사항을 더욱 효과적으로 처리할 수 있다.
변경사항을 쉽게 추적하고 반영할 수 있으며, 유지보수와 최적화 작업을 간소화한다.
개발의 복잡도를 줄이고 효율성을 높이는 데 큰 도움을 준다.

단점

의존성 연결이 쉽기 때문에 과도한 의존관계가 나타날 수 있다.
레포의 크기가 크기 때문에 형상관리 및 CI 속도가 저하될 수 있다.

멀티레포

: 프로젝트(서비스)별로 레포지토리를 각자 만들어서 관리한다.

📦 A 프로젝트
📦 B 프로젝트
📦 C 프로젝트

장점

코드베이스가 나눠져있기 때문에 필요한 모듈만 가져와서 작업할 수 있다.
각각 배포하므로 배포의 속도를 높일 수 있다.
의존성 관리가 쉬워진다.

단점

많아질수록 관리가 복잡해진다.
각각의 저장소에서 동일한 코드가 중복될 수 있다.
코드 컨벤션을 통일하기 어렵다.
각 프로젝트별로 사용하는 기술, 버전 스택이 달라질 수 있다.
레거시 프로젝트가 생기면 관리 및 파악이 영영 어려워질 수 있다.

FSD 폴더구조

: FSD(Feature-Sliced Design).
폴더구조를 페이지별로 나누지 않고, 기능을 기준으로 코드를 분리하는 방식이다.
↔ 기존에는 역할(components, utils)에 따라 파일과 폴더가 분리되었다.

레이어 → 슬라이스 → 세그먼트
- 레이어: 프로젝트 기능적 역할에 따른 수직적 관심사 분리
- 슬라이스: 비즈니스 도메인별 관심사 분리
- 세그먼트: 기술적 관심사 분리

장점

복잡성을 줄여주고, 유지보수성과 확장성을 향상시킨다.
결합도를 줄이고, 각 기능이 독립적으로 관리되도록 설계된다.
대규모 프로젝트에서 효과적인 방식이다.

단점

높은 러닝커브
처음부터 시작하지 않으면 중간에 폴더구조를 바꾸기 쉽지 않다.
프로젝트의 규모가 커질수록 관리가 어려워질 수 있다.

이론

app 은 전역 설정을 담당한다. (provider, router, 스타일 등)
page에서는 라우트에 따라 화면을 분리한다. (/login, /home 등)
ui 에서는 화면을 담당하는 컴포넌트가 들어간다.
features 에서는 동작에 관한 로직, ui가 들어가고, 내부에서 entities를 호출해 데이터를 사용한다.
entities 는 데이터와 해당 데이터를 보여주는 ui가 들어간다.
shared 는 프로젝트 전역에서 공통으로 사용하는 요소(훅, 타입, 유틸함수, 공통 ui 등)

폴더구조 변경에 있어서

: 프로젝트가 진행됨에 따라 관심사가 변하는 순간이 찾아오고, 다양한 관심사가 점차 생겨나게 된다.
무엇이 변하고 무엇이 변하지 않는가를 파악하여 적절한 시기에 폴더구조를 재편할 수 있다.
→ 하지만 정답은 없다! 정해진 답이 아니라 균형과 시기의 문제로, 무엇이 중요한지를 지속적으로 고민하고 그에 맞는 구조를 선택하는 것이 필요하다.
👀 모양이 같다고 같은 컴포넌트로 묶지 말자!