logo

프론트엔드 FSD 아키텍처 적용기

language-logoReactJS

• 기존의 폴더 구조는 `pages` 폴더와 `components` 폴더로 나뉘어 있으며, `pages` 폴더는 각 페이지의 라우팅 파일들을, `components` 폴더는 페이지별로 사용되는 컴포넌트와 공통 컴포넌트를 포함하고 있습니다.
• 라우팅에 맞춘 폴더 구조를 지향했으나, 공통 컴포넌트의 사용으로 인해 일관성이 부족한 점이 문제로 인식되고 있습니다.
• 기존 폴더 구조는 hooks, utils, api, config 등으로 나뉘어 있으며, 도메인 별로 hooks를 관리하고 있지만, 일관성이 떨어져 기능을 찾거나 수정할 때 불편함을 느꼈다.
• FSD(Feature-Sliced Design) 아키텍처를 알게 되어, 이를 통해 기존의 불편함을 해결하고자 하였으며, 관련 자료와 제로초님의 영상을 참고하여 이해를 높였다.

thumbnail
북마크
공유하기
신고하기
16분 분량
조회수 565
profile-image감경규
일 년 전
Copyright © 2025. Codenary All Rights Reserved.