FSD(Feature-Sliced Design) 개념 정리 및 Next.js 적용

Welcome | Feature-Sliced DesignArchitectural methodology for frontend projectsfeature-sliced.design  FSD(Feature-Sliced Desgin)는 프론트엔드 애플리케이션 개발 아키텍처 패턴 중 하나로, 기능(Featue)에 따라 프로젝트 구조를 계층화한다. 크게 Layer, Slice, Segment 라는 개념으로 구분하여 그 하위에 세부 개념이 추가된다. 이 중 Layer(이하 레이어)는 계층 수준의 개념을 가지며, 각 레이어는 하위 레이어만 참조할 수 있다. 아래 예시 이미지에서 각 레이어는 하나의 디렉토리라고 보면 되는데 `app` 에서 `pages`, `widgets` 등을 참조할 수 있고 `pages` 에서 그 ..

2024.10.05