프론트엔드 마스터: 기능 분할 디자인(FSD) 패턴

July/article/Frontend-Masters-Feature-Sliced-Design-Pattern.md

@@ -0,0 +1,274 @@
+## 🔗 [Frontend Masters: Feature-Sliced Design (FSD) Pattern](https://medium.com/stackademic/frontend-masters-feature-sliced-design-fsd-pattern-81416088b006)
+
+### 🗓️ 번역 날짜: 2024.07.17
+
+### 🧚 번역한 크루: 렛서(김다은)
+
+---
+
+## 프론트엔드 마스터: 기능 분할 디자인 (FSD) 패턴
+
+![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*5cXXjXss-JfLz_4RNJu7Tg.jpeg)
+
+<br/>
+
+**복잡한 프로젝트를 맛있는 피자라고 상상해 보세요. 기능 분할이 어떻게 작동하는지 이해하기 위해 피자를 한 조각씩 나눠봅시다. 관리하기 쉽고 유지보수하기에도 맛있습니다! 🍕**
+
+이전에 Medium 글에서 말했던 내용을 반복하겠습니다. 이 글은 길어질 것이고(왜 안되겠어요? 😇) 아마도 이해하기 조금 어려울 수 있습니다. 하지만 한 번 읽고 완벽하게 이해하게 되면, 이제 당신은 10배 더 나은 프론트엔드 개발자가 될 것입니다. 😎 커피 한 잔 준비하세요. ☕️ 커피를 충분히 마시지 않으면 10배 개발자가 되는 데 더 오래 걸릴 거예요. 😅
+
+<br/>
+
+---
+
+<br/>
+
+저는 웹 및 모바일 애플리케이션을 기능 세트라는 작은 부분으로 나누어 간소화하는 것을 좋아합니다. 각 기능 세트는 자체 사용자 인터페이스, 비즈니스 로직 및 데이터 레이어를 가지고 있어 관리하기가 더 쉽습니다. 이러한 방법을 기능 분할 디자인 (FSD)이라고 하며, 컴포넌트 기반 접근 방식과 유사한 장점을 공유합니다. FSD에서 특히 눈에 띄는 점은 사용자 중심 기능에 초점을 맞춰 웹 및 모바일 애플리케이션을 더 관리하기 쉬운 부분으로 분해할 수 있다는 점입니다.
+
+<br/>
+
+---
+
+<br/>
+
+## 구조
+
+> FSD 방법론은 세 가지 추상화 수준으로 구성됩니다: 레이어, 슬라이스, 그리고 세그먼트입니다.
+
+<br/>
+
+![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*exIzF4234oogpgybeG3xbg.jpeg)
+
+<br/>
+
+### 레이어
+
+당신의 앱을 맛있는 피자로 상상해 보세요. 🍕 (도미노에서 일하는 개발자로서 피자 비유를 사용하는 것은 제 자연스러운 권리입니다. 😎)
+
+#### 1. 공용 레이어 (식료품 저장실):
+
+- **모두를 위한 재료:**
+  여러 슬라이스에서 접근할 수 있는 재사용 가능한 컴포넌트, 유틸리티, 훅, 그리고 서비스를 포함합니다. (공통 재료와 도구를 모두가 가져갈 수 있는 공유 주방이라고 생각하세요.)
+- **예시:**
+  - 버튼, 폼, 모달, 내비게이션 바와 같은 공통 UI 요소 (미리 손질된 채소와 치즈를 생각하세요)
+  - 데이터 포맷팅이나 검증을 위한 유틸리티 함수 (날카로운 피자 커터와 같습니다)
+  - Redux, Zustand, Tanstack Query와 같은 글로벌 상태 관리 솔루션 (일관성을 위한 레시피 북과 같습니다)
+
+#### 2. 프로세스 레이어 (주방 직원):
+
+- **열심히 일하는 셰프들:** 백그라운드 작업과 데이터 페칭을 처리하여 피자 주방이 원활하게 운영되도록 합니다. (반죽, 소스, 토핑을 준비하고 베이킹 과정을 조율하는 피자 셰프들을 생각하세요.)
+- **예시:**
+  - 온라인 시스템에서 피자 주문을 가져오기
+  - 피자가 준비되었을 때 알림 보내기
+  - 배달 기사와 데이터 동기화하기
+
+#### 3. 기능 레이어 (피자 슬라이스):
+
+- **독립적이고 자급자족:** 각 슬라이스는 특정 기능을 캡슐화하며, 고유의 UI, 로직, 데이터를 가지고 있습니다. 마치 개별 토핑이 있는 피자 슬라이스와 같습니다.
+- **예시:**
+  - "피자 주문" 슬라이스: 피자 선택, 맞춤 설정 및 결제를 처리 (페퍼로니, 버섯, 추가 치즈, 수쾌 -소시지- 등등)
+  - "주문 추적" 슬라이스: 주문 상태와 예상 배달 시간을 표시 (피자 추적기와 같음)
+  - "피자 리뷰" 슬라이스: 고객이 경험을 평가하고 댓글을 달 수 있도록 함 (셰프를 위한 피드백 양식)
+
+#### 4. 앱 레이어 (피자 셰프):
+
+- **총주방장:** 전체 피자 제작 작업을 감독하며, 어떤 슬라이스를 구울지, 고객에게 어떻게 제공할지를 결정합니다. (메뉴를 설계하고, 새로운 레시피를 만들며, 각 피자가 완벽하게 요리되도록 보장하는 마스터 셰프를 생각하세요.)
+
+#### 5. 페이지 레이어 (피자 진열):
+
+- **슬라이스를 배열:** 슬라이스를 의미 있는 페이지 레이아웃으로 구성하여 피자 슬라이스를 접시나 배달 상자에 배열하는 것과 같습니다.
+- **예시:**
+  - 홈페이지: "추천 피자"와 "주문 내역" 슬라이스를 결합
+  - 내 계정: "개인 정보"와 "주문 선호 설정" 슬라이스를 포함
+
+#### 6. 위젯 레이어 (향신료):
+
+- **선택적 맛 강화제:** 슬라이스나 페이지/화면 전체에 뿌릴 수 있는 작고 재사용 가능한 UI 컴포넌트로, 피자에 추가 양념을 더하는 것과 같습니다.
+- **예시:**
+  - 검색창 (좋아하는 피자를 빠르게 찾기 위해)
+  - 사용자 알림 패널 (피자가 준비되었을 때 알림)
+  - 모달 대화상자 (특별 요청이나 확인을 위해)
+
+#### 5. 엔터티 레이어 (원재료):
+
+- **데이터의 구성 요소:** 피자의 밀가루, 이스트, 토핑과 같은 핵심 비즈니스 엔터티를 나타냅니다.
+- **예시:**
+  - 사용자 엔터티 (고객 정보를 저장)
+  - 피자 엔터티 (피자 종류와 재료 정의)
+  - 주문 엔터티 (주문 정보를 추적)
+
+<br/>
+
+_기억해야 할 주요 사항:_
+
+- 각 레이어는 명확한 책임과 의존성 방향을 가지고 있습니다.
+- 슬라이스는 피자 슬라이스가 공통 크러스트를 공유하는 것처럼 잘 정의된 계약을 통해 서로 소통할 수 있습니다.
+- 목표는 모듈화되고 독립적이며 쉽게 테스트할 수 있는 슬라이스를 만들어 "피자" 코드베이스를 더 관리하기 쉽고 맛있게 만드는 것입니다!
+
+<br/>
+
+_추가 피자 비유 노트:_
+
+- 주방 직원(프로세스)은 무대 뒤에서 일하며, 재료를 준비하고 원활한 피자 제작 과정을 보장합니다.
+- 피자 셰프(앱)는 모든 작업을 총괄하며, 다양한 피자(기능)를 창조하고 이를 어떻게 제공할지(페이지)를 결정합니다.
+- 원재료(엔터티)는 어떤 피자에도 필수적이지만, 고객에게 항상 보이는 것은 아닙니다. 이들은 모든 것을 가능하게 만드는 기초입니다.
+
+<br/>
+
+![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*URBFMm6YigIKqzyBlPiLhg.png)
+
+<br/>
+
+### 세그먼트 (토핑):
+
+- **슬라이스 내의 재료:** 슬라이스가 완전한 기능이라면, 그것은 종종 세그먼트라고 불리는 작은 부분들로 구성됩니다. 이는 피자 슬라이스를 구성하는 개별 토핑과 같습니다.
+- **특정 작업에 집중:** 각 세그먼트는 슬라이스 내에서 명확한 책임을 가지며, 특정 UI 요소, 데이터 작업, 또는 로직을 처리합니다.
+- **예시:**
+- **"피자 주문" 슬라이스 내에서:**
+  - "피자 메뉴" 세그먼트: 사용 가능한 피자 옵션과 가격을 표시합니다.
+  - "토핑 선택기" 세그먼트: 고객이 원하는 토핑을 선택할 수 있도록 합니다.
+  - "결제 양식" 세그먼트: 결제 및 배달 정보를 수집합니다.
+
+#### **더 React 스럽게:**
+
+각 슬라이스는 다음 세그먼트 중 하나 또는 여러 개로 나뉩니다:
+
+- `ui/:` 사용자 인터페이스 컴포넌트 및 UI 관련 로직
+- `model/:` 비즈니스 로직 (스토어, 액션, 이펙트, 리듀서 등)
+- `lib/:` 인프라 로직 (유틸리티/헬퍼)
+- `config/:` 로컬 구성 (상수, 열거형, 메타 정보)
+- `api/:` API 요청 로직 (API 인스턴스, 요청 등)
+
+#### **기억해야 할 주요 사항:**
+
+- 슬라이스는 더 크고 자급자족하는 기능이며, 세그먼트는 슬라이스 내의 더 작고 집중된 부분입니다.
+- 각 슬라이스는 여러 세그먼트를 가질 수 있으며, 이는 피자 슬라이스가 다양한 토핑을 가질 수 있는 것과 같습니다.
+- 목표는 잘 조직된 모듈형 코드를 만들어 이해하고 개발하고 유지보수하기 쉽게 하는 것입니다. 마치 피자에 각기 다른 맛을 더하는 아름답게 배열된 토핑처럼 말이죠!
+
+<br/>
+
+---
+
+> 지금까지 읽은 내용을 예시 코드로 표현하면 어떻게 될까요?
+
+#### 1. 폴더 구조(피자 주방)
+
+<br/>
+
+![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*G9DDFy4VZaGCMaogGOduIw.png)
+
+<br/>
+
+#### 2. 피자 주문 슬라이스([엑스트라바간자](https://www.google.com/search?sca_esv=3a435d22dd23e419&sca_upv=1&sxsrf=ADLYWILLw7hzQVVI4CwvLXqolX_gxgaErw:1721216448127&q=%EC%97%91%EC%8A%A4%ED%8A%B8%EB%9D%BC%EB%B0%94%EA%B0%84%EC%9E%90&si=ACC90nxKpahzDMmxbw_9hLJvJAK3JpogdOEvfA_AFzr5M9qXFLtVutMThXFukBvQMHmxCUo98PKG-n8h7IenCaWTLvXp39OfIY-hzeSbUHXL7aFM9vMT2EIV0OaiDB_2kZcoU9H2D81NzbpZidVQ3ALbj50w-e1yA4X_PRJ47qPIcPKyjZX5xKX1V_tocw3jEz5EAZ3H91MYiy1nXF8e-Vb-beZQgLJcfvT6-SvG712RvwEGgtdwhaUjY5ekx53eLaxG6Sv9Snd_htnQKZmzPPy5XO6UBylgaQ%3D%3D&sa=X&ved=2ahUKEwjil-P3_q2HAxUklFYBHWYqB00Q6RN6BAgZEAE))
+
+```tsx
+// features/order-pizza/slice.tsx
+import React from 'react';
+
+interface OrderPizzaSliceProps {
+  // ... props
+}
+
+const OrderPizzaSlice: React.FC<OrderPizzaSliceProps> = (
+  {
+    /* ...props */
+  }
+) => {
+  // ... 슬라이스 로직과 상태 관리
+
+  return (
+    <div>
+      <PizzaMenu />
+      <ToppingSelector />
+      <CheckoutForm />
+    </div>
+  );
+};
+
+export default OrderPizzaSlice;
+```
+
+<br/>
+
+#### 3. 피자 메뉴 세그먼트(도우 베이스)
+
+```tsx
+// features/order-pizza/components/PizzaMenu.tsx
+import React from 'react';
+
+interface PizzaMenuProps {
+  // ... 피자 옵션들
+}
+
+const PizzaMenu: React.FC<PizzaMenuProps> = (
+  {
+    /* ...props */
+  }
+) => {
+  // ... 피자 옵션을 fetch하고 화면에 그리기
+
+  return <ul>{/* List of pizza options */}</ul>;
+};
+
+export default PizzaMenu;
+```
+
+<br/>
+
+#### 4. 홈페이지 (피자 진열대):
+
+Feature-Sliced Design (FSD)은 피자를 깔끔하게 개별 조각으로 나누어 각 조각이 고유의 토핑과 맛을 가지는 것과 같습니다. 이 접근 방식의 장점과 단점은 다음과 같습니다.
+
+```tsx
+// pages/HomePage.tsx
+import React from 'react';
+import OrderPizzaSlice from '../features/order-pizza/slice';
+
+const HomePage: React.FC = () => {
+  return (
+    <div>
+      <h1>Welcome to Domino's Pizza!</h1>
+      <OrderPizzaSlice />
+    </div>
+  );
+};
+
+export default HomePage;
+```
+
+<br/>
+
+#### 코드에서 얻어야 할 주요 내용:
+
+- **명확한 폴더 구조:** 각 슬라이스는 고유의 폴더를 가지고 있어 그 안의 컴포넌트와 로직을 체계적으로 관리합니다.
+- **독립적인 슬라이스:** 각 슬라이스는 독립적으로 개발되고 테스트될 수 있으며, 자급자족하는 피자와 같습니다.
+- **재사용 가능한 컴포넌트:** 공통 컴포넌트(버튼, 입력란 등)는 일관성과 효율성을 위해 여러 슬라이스에서 사용할 수 있습니다.
+  페이지 내 구성: 페이지는 슬라이스를 결합하여 의미 있는 레이아웃을 만드는데, 이는 피자 슬라이스를 접시에 배열하는 것과 같습니다.
+- **기억하세요:**이것은 단순화된 예제입니다. 실제 FSD는 더 복잡한 상태 관리, 데이터 페칭 및 슬라이스 간의 통신을 포함합니다. 그러나 이 예제는 FSD를 사용하여 React 앱을 조직하는 핵심 원칙을 보여줍니다.
+
+<br/>
+
+### 좋은 점 (토핑 부분): 🍕
+
+- **관리 용이:** 각각의 기능이 독립적인 피자 조각처럼 자급자족하여, 코드를 이해하고, 수정하고, 업데이트하기 쉽습니다. 하나의 부분을 변경할 때 도미노 효과가 발생하지 않습니다!
+- **확장성:** 더 많은 기능이 필요하신가요? 그냥 슬라이스를 추가하면 됩니다! FSD는 앱이 새로운 요구에 맞게 우아하게 성장할 수 있도록 도와줍니다. 마치 채소 피자에 페퍼로니를 추가하는 것처럼요.
+- **빠른 개발:** 서로 다른 팀이 동시에 별도의 슬라이스를 작업할 수 있어 개발 속도가 빨라집니다. 마치 여러 셰프가 동시에 피자를 만드는 것과 같습니다.
+- **명확한 소유권:** 각 슬라이스에는 지정된 "피자이올로(pizzaiolo)"가 있어, 개발자가 그 슬라이스의 품질과 성능에 대해 책임을 집니다. 이는 각 셰프가 자신의 창작물에 자부심을 갖는 것과 비슷합니다.
+- **테스트 용이:** 테스트는 각각의 슬라이스가 잘 익었는지 확인하는 것처럼 더 집중적이고 효율적으로 수행됩니다.
+
+### 좋지 않은 점 (크러스트): 👎🏻
+
+- **계획의 어려움:** 슬라이스가 원활하게 작동하려면 잘 맞물려야 합니다. 이는 치즈가 흘러내리지 않도록 조각들을 잘 맞추는 것과 같습니다. 피자 대혼란을 피하기 위해 신중한 계획과 소통이 중요합니다.
+- **학습 곡선:** 새로운 사람들이 "피자"의 분산된 특성에 처음에는 혼란스러울 수 있습니다. 파인애플 조각을 어디서 찾을지 알아내는 것과 비슷합니다. 이들을 안내하기 위해 좋은 문서화가 필수적입니다.
+- **팀워크에 추가적인 노력:** 슬라이스 간의 원활한 소통과 연결을 보장하는 데는 시간과 주의가 필요합니다. 이는 셰프들이 완벽한 피자를 함께 만드는 것을 조율하는 것과 같습니다.
+- **잠재적인 중복:** 때때로 두 슬라이스가 비슷한 재료를 가질 수 있습니다. 예를 들어 모차렐라와 리코타를 모두 사용하는 것처럼요. 불필요한 중복을 피하기 위해 신중한 계획과 공유 자원이 필요합니다.
+- **도구의 한계:** FSD는 아직 비교적 새로운 개념이어서, 이를 위해 특별히 설계된 도구를 찾는 것이 유니콘 모양의 피자 커터를 찾는 것처럼 어려울 수 있습니다. 처음에는 추가적인 노력이 필요할 수 있습니다.
+
+### 정리
+
+FSD는 크고 복잡한 앱에 훌륭한 전략이 될 수 있지만, 모든 프로젝트에 맞는 만능 레시피는 아닙니다. 프로젝트의 크기, 팀, 개발 환경을 고려한 후 도입을 결정하세요. 가장 맛있는 피자도 적절한 기술과 재료가 없으면 만들기 어려울 수 있다는 점을 기억하세요!
+
+> 유의할 점: 경험 수준에 상관없이 깊이 있게 탐구하고 싶다면, 제가 자주 참고하는 [공식 문서](https://feature-sliced.design/docs)를 살펴보세요.
+
+---
+
+이 기사를 즐겁게 읽으셨기를 바랍니다. 이 기사가 유익하거나 도움이 되었다면, 커피 한 잔 사주며 제 작업을 지원하는 것을 고려해 주세요. 여러분의 기여는 이런 콘텐츠를 더 많이 만드는 데 도움이 됩니다. 가상 커피로 저를 대접하려면 여기를 클릭하세요 ☕️. 해피 해킹! 🚀