React 폴더구조 FSD 기능 분활 설계 아키텍처

 

🤷‍♂️ 본론에 앞서

---

프로젝트를 시작하기에 앞서 폴더 구조, 설계에 대한 아키텍처를 만드는 것은 상당히 어렵다.

이번 프로젝트에 React FSD 폴더구조 아키텍처를 설계할 예정이라서 FSD 아키텍처에 대해서 알아보겠습니다. 

 

🤷‍♂️ FSD 아키텍처란?

---

FSD는 Feature Sliced Desing 의미이며 작은 규모의 프로젝트나 점진적으로 규모가 확장될 필요가 없는 프로젝트라면 모놀리스 형식으로 프로젝트를 설계하면 되지만 점진적으로 소프트웨어의 규모가 커지고 확장해 나갈 예정이라면 FSD를 적용할 필요가 있다. 

 

프론트 프로젝트 보일러플레이트 개념 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^

보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유

https://cometruedream.tistory.com/216

보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유

 

FSD 구성요소?

레이어(layer), 슬라이스(slice), 세그먼트(segment)의 세 가지 개념으로 구분된다.

FSD 폴더구조는 최대 3단계로 이뤄져 있으며 상황마다 1depth 정도 더 생겨날 수 있다.

 

 

 

레이어

레이어는 최상위 디렉터리이며 애플리케이션 분해의 최상의 root 입니다.

FSD 아키텍처에서 레이어의 수는 최대 7단계로 제한되며 필요한 레이어에 맞춰서 폴더구조를 맞추면된다.

참고로 processes 레이어는 사용되지 않아서 살펴보지 않고 나머지 6개의 레이어를 개별적으로 특징을 살펴보겠습다.

 

 

 

FSD 6개의 레이어

• app: 애플리케이션 로직이 초기화되는 곳입니다. 프로바이더, 라우터, 전역 스타일, 전역 타입 선언 등이 여기에서 정의 된다.
• pages: 해당 레이어는 애플리케이션의 페이지가 포함된다.
• widgets: 해당 레이어는 사용되는 독립적인 UI 컴포넌트
• features: 해당 레이어는 UI에 기능적인 부분을 포함한다. 예를 들어 다크모드, 좋아요 등이 있다.
• shared: 해당 레이어는 비즈니즈 로지에 종속되지 않고 재사용 가능한 컴포넌트와 유틸리티가 포함된다. 예를들어 components, hooks 등을 포함한다.
• entities: 해당 레이어는 데이터의 값들을 포함한다.

6개의 레이어들은 프로젝트 코드베이스를 조직화, 모듈화되고 유지보수와 확장 가능한 아키텍처를 설계하는데 도움이 됩니다.

 

*런닝커브가 있어서 진입장벽이 어렵다.

 

300x250

 

슬라이스(slices)

6~7개의 최상의 레이어를 분해의 두 번째 수준인 슬라이스라는 하위 디렉토리다. 슬라이스에 목표는 코드를 모듈화하고 코드 별로 그룹화하는 것입니다.

슬라이스 내부에서는 비즈니스와 연관된 로직을 작성할 수 있으며 app과 shared레이어에서 각각 앱의 전체적인 부분과 연관된 코드를 shared 레이어에서는 깊은 추상화를 가지고 있고 비즈니즈 로직을 작성하지 않기 때문에 slice를 두지 않는다. 

 

세그먼트(segments)

세그먼트는 FSD의 마지막 계층에 있는 요소로 코드를 나누는데 도움이 된다.

코드를 세분화해서 유지보수에 도움이 된다.

 

일반적으로 사용되는 세그먼트 종류

api - 필요한 서버 요청.

UI - 슬라이스의 UI 컴포넌트.

model - 비즈니스 로직, 즉 상태와의 상호 작용. actions 및 selectors가 이에 해당

lib - 슬라이스 내에서 사용되는 보조 기능.

config - 슬라이스에 필요한 구성값이지만 구성 세그먼트는 거의 필요하지 않음.

consts - 필요한 상수.

 

공개 API

세그먼트는 FSD의 마지막 계층에 있는 요소로 코드를 나누는데 도움이 된다.

코드를 세분화해서 유지보수에 도움이 된다.FSD 아키텍처의 규칙으로 각 슬라이스와 세크먼트에는 공개 API가 있으며 index.js, index.tx파일이며 index 파일을 통해 슬라이스 또는 세그먼트에서 필요한 기능만 외부로 export하고 불필요한 기능은 격리할 수 있습니다. 

 

🤷‍♂️ 정리하자면…

---

React 프론트 개발자라면 항상 폴더 구조 & 아키텍쳐에 대해서 많은 고민을 하게된다.

그러한 문제를 조금이나마 덜수 있는 FSD 아키텍쳐는 프론트개발자가 알아야 하고 사용할수 있어야 하는 흥미로운 기술이다.

팀원끼리 협업 & 규칙 & 개발문화를 제공할 수 있고 확장성과 독립적인 코드베이스로 코드 품질을 높일수 있다.

하지만 아키텍쳐의 런닝커브가 크기 때문에 팀원과 인식, 개념, 팀 문화가 중요합니다.

 

---

 

재밌는 오늘의 띠별 운세 보고가세요!