#fsd

리액트 프로젝트에 FSD 아키텍처 적용. 이 구성이 맞을까요?

안녕하세요. 현재 진행 중인 리액트 프로젝트에서 유지보수성과 확장성에 어려움을 느껴 폴더 구조를 Feature-Sliced Design(FSD) 아키텍처 기반으로 전면 리팩토링했습니다. 기존에는 `components/`, `pages/`, `apis/` 등 기능과 역할이 섞인 구조로 되어 있어, 코드의 위치가 불분명하고 협업에 어려움이 있었습니다. 이를 해결하고자 다양한 아키텍처를 조사한 끝에, FSD의 레이어 개념(Layers)에 맞춰 다음과 같은 방식으로 구조를 정리했습니다. - `app/`: `App.js`, `index.js` 등 프로젝트 진입점과 글로벌 설정 파일을 포함 - ` entities/`: `User`, `Article`, `CodingZone` 등 주요 도메인의 데이터 모델과 API 연동 담당 - `features/`: 로그인, 게시글 작성, 코딩존 출석 등 각 기능별로 모듈화하고, 필요한 경우 `hooks/` 등의 내부 디렉토리로 세분화 - `pages/`: 라우팅과 연결된 실제 페이지 컴포넌트 관리 (예: `CreatePage`, `EditPage` 등) - `widgets/`: 재사용 가능한 독립 UI 요소들 (예: `Footer`, `Navbar`, `Pagination` 등) - `shared/`: 공통 API, 유틸, 모달 컴포넌트 등 여러 기능에서 공유되는 요소들을 배치 기능 중심의 구조로 바꾸면서, 각 요소의 역할이 명확해지고 코드 탐색 및 유지보수가 훨씬 쉬워졌습니다. 현재는 복잡한 비즈니스 로직이 없어 `processes/` 레이어는 생략했지만, 추후 워크플로우가 필요한 기능이 생긴다면 도입할 계획입니다. 제가 구성한 이 폴더 구조와 레이어 분리가 실제 FSD 아키텍처 가이드에 부합하는 방향인지, 혹시 보완하거나 개선할 부분이 있다면 조언을 구하고 싶습니다. 자세한 내용은 블로그에 정리해 두었습니다. 👉 [https://juncci.tistory.com/4](https://juncci.tistory.com/4) 읽어주셔서 감사합니다!

웹 프론트엔드 디렉토리 구조 어떻게 가져가나요?

3년차 서버 개발자입니다 반 년 전 부터 리액트 넥스트 시작 해서 공부 중 입니다 몇 개의 프로젝트를 해도 이거 컴포넌트 분할이 되게 힘들고 정리가 안되네요 서버는 뭐 DDD 헥사고날 MSA 등등 있지만 저는 경험에서 모든 것을 의존성 기준으로 도메인을 분리하고 이에 대한 트레이드 오프나 규칙같은 것도 리드할 수 있을 정도인데,,,, 프론트는 재사용성을 강조하는데 뭘 재사용하는 지도 모르겠고 UI랑 기능이랑 분리하기 힘든 것도 있고 많은 설계방식도 있는데 저한테는 과도하다 생각하고 프론트도 도메인 기준으로 나누는 FSD도 있지만 프론트 특성상 UI랑 기능이랑 분할이 되게 힘들어보이고 아무리봐도 프론트는 사용자 중심으로 가야할 거 같은데 어떻게 해야될지 모르겠네요..