즐거운 FSD 공식문서 보기~

Hunter Joe·2025년 7월 10일
0
post-thumbnail

Feature-Sliced Design (FSD)는 프론트엔드 애플리케이션을 구성하기 위한 아키텍처 설계 방법론
코드를 조직화하기 위한 규칙과 관례의 집합이라고 할 수 있다.

터 알 수 있듯이 기능(도메인)을 기준으로 슬라이스한 아키텍처!

개요

주요 목적

끊임없이 변화하는 비즈니스 요구사항 속에서도 프로젝트를 더 이해하기 쉽고 구조화되도록 만드는 것

📂 app
	├── 📁 routes
	├── 📁 analytics
📂 pages
	├── 📁 home
 	├── 📂 article-reader
 	│	├── 📁 ui
 	│	└── 📁 api
	└── 📁 settings
📂 shared
 	├── 📁 ui
 	└── 📁 api

Layer : 최상위 폴더 (app, pages, shared)

Slice : 폴더 안에 있는 폴더 (home, article-reader)

Segment :slice 안에 있는거 (ui, api)

Layer/Slice/Segment 계층 구조

Layer

⚠️주의

appsharedLayer는 다른 Layer와 달리 Slice가 없고 Segment로 바로 나뉨
나머지는 다른 모든 Layer는 Slice → Segment로 분리

Slice

  • 도메인별로 분할하는 용도
  • 네이밍 자유, 갯수 제한 X
    Slice는 동일 Layer에 있는 다른 Slice를 사용할 수 없으므로 높은 응집력과 낮은 결합도를 달성하는 데 도움이 됨.

Segment

  • Segment는 코드를 용도별로 그룹화
  • 일반적으로 사용되는 네이밍

내 생각

핵심은 feature(도메인)별로 나누는게 제일 핵심인거같다.
그리고 각 feature에서 Slice해서 높은 응집도와 낮은 결합도를 갖게 함으로서 코드의 유지보수가 더욱 쉬워질 수 있다고 생각한다.

내 생각에 코드가 많아지면 응집도가 높아지기 때문에 당연히 복잡해질텐데
이럴 때는 Layer를 6개가 아니라 더 많이 만들어서 사용하면 조금 그 부분을 해소할 수 있을거 같다.

다음에는 아토믹 패턴도 한번 봐야겠다. FSD는 충분히 재밌었다.

profile
Async FE 취업 준비중.. Await .. (취업완료 대기중) ..

0개의 댓글