FSD : tutorial

안녕하세요! 앞서 FSD의 기본 개념(아파트 층수, 레고 조립)을 배웠다면, 이번에는 **"실전편"**이에요.

보내주신 튜토리얼 링크는 **"엉망진창으로 짜여진 투두 리스트(Todo List) 앱을 FSD 건축법에 맞게 리모델링하는 과정"**을 담고 있어요.

고등학생인 우리가 친구의 엉망진창인 책상을 정리해준다고 생각하고, FSD 튜토리얼의 핵심 과정 4단계를 아주 쉽게 설명해 드릴게요.

---

🎬 상황 설정: "엉망진창 투두 앱"

친구 A가 투두 리스트 앱을 만들었는데, 코드가 한 파일에 뭉쳐있거나 폴더 정리가 안 되어 있어요.

• 기능: 할 일 추가하기, 완료 체크하기(토글), 목록 필터링(전체/완료/미완료)
• 문제: "할 일 체크하는 기능"을 고치려니 "필터링 기능"이 고장 나고, 코드가 꼬여 있습니다.

이제 FSD 정리 요정이 되어 이걸 뜯어고쳐 봅시다!

---

🛠 1단계: 서랍장 라벨링 하기 (계층 나누기)

가장 먼저 할 일은 아무렇게나 널려있던 파일들을 담을 **표준화된 서랍장(폴더)**을 만드는 거예요. 튜토리얼에서는 파일을 분석해서 아래 서랍들에 나눠 담습니다.

1. app/: 앱 설정 (전원 코드)
2. pages/: 완성된 화면 (책상 위)
3. widgets/: 큰 덩어리들 (모니터, 키보드)
4. features/: 동작하는 기능 (타자 치기, 화면 켜기)
5. entities/: 핵심 데이터 (문서 파일)
6. shared/: 공용 도구 (볼펜, 가위)

💡 포인트: 처음엔 빈 폴더라도 좋으니 일단 이 구조를 잡는 게 시작입니다!

---

🔪 2단계: 피자 조각 나누기 (UI와 데이터 분리)

이제 코드를 칼로 자르듯 분리해야 해요. 튜토리얼에서 가장 강조하는 Entity(데이터)와 Feature(기능)의 분리를 볼까요?

❌ (수정 전) 뭉쳐있는 코드

TodoItem이라는 컴포넌트 안에 **"화면에 보여주는 디자인"**과 **"체크박스를 눌렀을 때 서버에 전송하는 로직"**이 다 섞여 있었어요.

⭕ (수정 후) FSD 스타일 분리

이걸 두 개의 슬라이스(Slice)로 쪼갭니다.

1. entities/todo/ui/todo-row (데이터 보여주기)
   • 역할: "나는 그냥 할 일 제목이랑 체크박스 모양만 보여줘. 눌렀을 때 무슨 일이 일어나는지는 난 몰라."
   • 위치: entities (데이터 그 자체니까)
2. features/toggle-todo (체크 기능)
   • 역할: "나는 체크박스가 눌렸을 때 서버에 '완료됐다'고 신호 보내는 놈이야."
   • 위치: features (사용자의 행동이니까)

🖼 이미지 상상하기:
튜토리얼의 그림을 보면, 하나의 Card 컴포넌트가 **껍데기(UI)**와 **엔진(Logic)**으로 분리되어 서로 다른 폴더로 들어가는 걸 볼 수 있어요. 이렇게 해야 나중에 "디자인만 바꿀 때" 엔진을 건드릴 필요가 없어지거든요.

---

🛡 3단계: 보안 요원 배치하기 (Public API - index.ts)

파일을 폴더에 넣었다고 끝이 아니에요. FSD에는 **"방문 규칙"**이 있습니다.
폴더 안에 index.ts라는 파일을 만들어서 **"밖에서 쓸 수 있는 것만 공개"**해야 해요.

• 상황: features/toggle-todo 폴더 안에 파일이 10개가 있다고 칩시다. (api.ts, helper.ts, style.css 등등...)
• 문제: 다른 친구(Page)가 와서 허락도 없이 style.css를 막 가져가면 나중에 수정할 때 꼬입니다.
• 해결 (index.ts):
• code JavaScript
  downloadcontent_copy

  expand_less

      // features/toggle-todo/index.ts
  // "야, 밖에서는 'ToggleTodo' 버튼 하나만 가져갈 수 있어. 나머진 건드리지 마."
  export { ToggleTodo } from './ui';
    

💡 핵심: 이제 외부(Widgets, Pages)에서는 이 폴더 내부가 얼마나 복잡한지 알 필요가 없어요. 그냥 index.ts가 주는 것만 받아 쓰면 됩니다. 이걸 **캡슐화(Encapsulation)**라고 해요.

---

🧩 4단계: 레고 조립하기 (Composition)

자, 이제 부품들을 다 정리했으니 다시 조립해서 화면을 만들어야죠?
여기서 "단방향 의존성 규칙" (위에서 아래로만 흐른다)이 적용됩니다.

1. widgets/todo-list (위젯 층)
   • 얘가 entities(할 일 모양)와 features(필터 기능, 추가 기능)를 불러와서 합칩니다.
   • "자, 여기 리스트 모양(Entity) 깔고, 그 위에 필터 버튼(Feature) 달자."
2. pages/home (페이지 층)
   • 얘는 완성된 **widgets/todo-list**를 가져와서 화면 중앙에 딱 배치합니다.

🖼 다이어그램 설명:
튜토리얼의 화살표 그림을 보면 **화살표가 항상 한 방향(오른쪽이나 아래)**으로만 갑니다.
Page -> Widget -> Feature -> Entity -> Shared
거꾸로 가는 화살표(예: Entity가 Feature를 부르는 것)가 있다면 그건 위법 건축물입니다!

---

🎓 튜토리얼 핵심 요약 (고등학생 버전)

1. 자리 정하기: 코드를 맘대로 두지 말고 6개의 계층(Layer) 폴더에 분류해라.
2. 역할 찢기: "보여주는 놈(Entity)"과 "일하는 놈(Feature)"을 찢어놔라. (제일 중요!)
3. 출입 통제: 각 폴더마다 index.ts라는 경비원을 세워서 허락된 것만 밖으로 내보내라.
4. 조립 순서: 윗사람(Page)이 아랫사람(Widget, Feature)을 부르는 건 되지만, 반대는 절대 안 된다.

이 과정을 거치면, 나중에 "할 일 추가 기능이 고장 났어!"라고 할 때 features/add-todo 폴더만 딱 열어보면 되니까 유지보수가 엄청나게 쉬워진답니다!

 

* 본 문서는 구글 제미나이를 통해 생성되었습니다.