React의 FSD 폴더 구조

"기존에 폴더 구조를 짤 때는 명확한 기준을 잡지 않고 폴더 구조를 짰다. 기준이 없으면 매번 행동이 달라지게 된다."

이 말에 굉장히 공감했다. 그렇기에 FSD 폴더 구조를 공부해 보고자 이 글을 작성한다.

FSD의 구조

• FSD에서는 폴더 구조는 Layers, Slices, Segments로 3 depths를 사용한다.
• Slices
  • Slices로 나눈 것은 "도메인 주도 설계"이다.
  • 블로그라고 치면 post 안에 comment가 있는게 아닌가 싶지만, 최대한 분리하는 것이 좋다.
• Segments
  • ui는 화면담당
  • model은 데이터 담당
  • api는 서버로 부터 데이터 가져오는 담당

Layers

1. 상위 폴더에서만 하위 폴더를 import 할 수 있다.
   • app에서는 모든 폴더를 import 가능하다는 의미
   • shared에서는 아무 폴더도 import 할 수 없다는 의미
2. 모든 폴더에서는 index.js에서 export를 해야 한다.
   • 이런 식으로 사용한다면 캡슐화를 할 수 있다.

폴더 설명

• app
  • (전역 설정 / Provider, Router, Client 같은 HOC가 slice가 됨)
  • 전체적인 설정을 담당하는 부분
• processes
  • 현재는 사용하지 않음
• pages
  • 주소별 페이지 / 각각의 주소별 페이지가 slice
  • Router에 따라서 페이지를 분리
• widgets
  • feature의 묶음 / 어떻게 묶을지는 재사용 여부에 따라
  • 기존 Layout를 widgets로 바꾸면 됨
  • 혹은 featues를 묶은 것들을 widgets이라 함
    • 어떻게 묶을 것인지는 자유
    • 예를 들어 버튼들만 묶을 수도 있고, 페이지 전체를 묶을 수도 있음
    • 재사용 여부를 잘 생각해야 함
• features
  • 행동 / 동사가 slice, api segment에서는 해당 행동을 요청함
  • 기존 componets에서 사용하던 함수
• entities
  • 데이터 / 데이터가 slice, api segment에서는 데이터를 조회
  • 기존 componets에서 사용하던 데이터 
• shared
  • 공유 컴포넌트 / slice 없음
  • Hooks, Utils, Typings 등 같은 공유 파일들 모음
  • 전역적으로 공유하니까 slice가 없다.

예시

• 버튼 UI가 자주 사용될 거 같으면 shared 폴더에 버튼 UI 구현
• entities에서는 데이터를 다루니까 Fork 버튼의 데이터 0, Star 버튼의 데이터 0
• features에서는 동작을 다루니까 Frok 버튼을 눌렀을 때의 함수, Start 버튼을 눌렀을 때의 함수

출처

https://www.youtube.com/watch?v=64Fx5Y1gEOA

https://emewjin.github.io/feature-sliced-design/?utm_source=substack&utm_medium=email

(번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처