프로젝트 폴더구조가 고민이라면 FSD를 써보자! | 개판인 프로젝트를 고치는 방법
- FSD(Feature Slice Design)는 지속 가능한 프론트엔드 개발을 위한 아키텍처로, 기술 중심이 아닌 사용자 기능 중심으로 코드를 설계합니다. 🧩
- FSD는 앱, 페이지, 위젯, 피처, 엔티티, 쉐어드와 같은 레이어를 통해 코드를 구조화하며, 각 레이어는 엄격한 계층 구조를 가집니다. 층간 의존성을 제한하여 코드의 무결성을 유지합니다. 🧱
- 슬라이스는 비즈니스 도메인에 따라 코드를 그룹화하여 응집도를 높이고, 세그먼트는 슬라이스 내부에서 기술적인 목적에 따라 코드를 그룹화합니다. 묶음으로써 코드 관리 효율성을 높입니다. 📂
- FSD의 핵심 규칙 중 하나는 아키텍처의 무결성을 보장하는 것으로, 상위 계층만이 하위 계층의 모듈을 사용할 수 있으며, 동급 계층끼리의 사용도 제한됩니다. 단방향 의존성 규칙을 통해 코드의 안정성을 확보합니다. 🛡️
- 퍼블릭 API 규칙에 따라 모듈을 export 할 때 이름을 명시적으로 지정하여 예측 불가능한 상황을 방지하고, 이름 충돌을 줄입니다. API 명확성을 높여 유지보수성을 개선합니다. 🔑
- FSD는 표준화된 구조로 개발 속도를 향상시키고, 코드 충돌을 줄여 협업 효율성을 높입니다. 🚀
- FSD는 코드 격리를 통해 스파게티 코드를 방지하고, 버그 발생률을 낮추며, 문제 발생 시 책임 소재를 명확히 하여 디버깅을 용이하게 합니다. 🐛
- FSD는 초기 학습 비용이 높고 팀 내 합의가 많이 필요하지만, 개발자 경험을 향상시키고 미래 확장성 및 유지보수성을 고려한 아키텍처입니다. 💡