데브허브 | DEVHUB | 새로운 폴더구조? F.S.D 로 serverAction 설계하기새로운 폴더구조? F.S.D 로 serverAction 설계하기
- 서버 액션 사용 시 UI 로직과 비즈니스 로직이 섞여 관심사 분리가 어려워지는 문제를 FSD(Feature-Sliced Design)로 해결할 수 있습니다. 🧩
- 관심사 분리의 첫 단계는 파일 단위 분리이지만, 이는 폴더 구조 설계의 필요성을 야기합니다. 📁
- FSD는 기능(Feature) 중심으로 폴더 구조를 설계하는 방법론으로,
features/auth/lib, features/auth/model, features/auth/server와 같이 구성됩니다. 🏗️
- FSD의 핵심 목표는 변화에 유연하게 대응하는 것으로, 특정 기능의 변경이 다른 기능에 영향을 주지 않도록 보장합니다. 🔄
- 예를 들어, 회원가입 기능에 '이름' 필드를 추가할 때, FSD 구조에서는 관련 수정 사항이
auth 기능 폴더 내에 집중되어 관리됩니다. 🎯
- 역할(Role) 중심의 폴더 구조(예:
components, hooks, services)는 변경 시 여러 폴더를 오가며 수정해야 하므로 인지적 부담이 커질 수 있습니다. 🎢
- 코드베이스 규모가 작을 때는 역할 중심 구조도 효율적일 수 있지만, 기능이 많아질수록 FSD와 같은 기능 중심 구조가 유지보수 및 확장성 면에서 유리합니다. 📈
- 서버 액션은 풀스택 개발(UI부터 비즈니스 로직, 데이터 처리까지 한 명이 담당)을 가능하게 하며, 이는 FSD의 기능 단위 설계를 온전히 구현하는 데 중요한 의미를 가집니다. 🧑💻
- 프론트엔드 개발자가 서버 액션을 통해 데이터 처리까지 담당함으로써, FSD가 제시하는 기능 단위의 관심사 분리 및 구현이 더욱 완벽해집니다. ✨