프론트 FSD Pattern 에 대해서

최근에 프론트 디자인패턴들에 대해 관심이 생기면서 이것저것 알아보다가 MVC패턴이 프론트 프로젝트에 적합한가? 라는 생각에 이해가 안가는 부분이있어 알아보다가 현재 내가 진행하고있는 프로젝트와 비슷한 FSD 패턴에 대해 알게되어 기록하려고 한다.

우선 나의 프로젝트 구조는 아래와 같다.

qr-order-web/

├── dist/
├── nginx/
├── public/
└── src/
├── _common/
│ ├── axios-api.instance.ts
│ └── hookHandler.ts
├── components/
│ ├── product/
│ │ ├── _core/
│ │ │ ├── api/
│ │ │ └── react-query/
│ │ ├── _interface/
│ │ │ └── product.interface.ts
│ │ ├── crud/
│ │ │ ├── get/
│ │ │ │ └── view/
│ │ │ ├── post/
│ │ │ │ └── view/
│ │ │ ├── update/
│ │ │ │ └── view/
│ │ │ └── delete/
│ │ │ └── view/
└── vite.config.ts/

common폴더에서는 다양한 곳에서 재사용이 이루어지는 함수들을 집합한 곳이고, 컴포넌트 아래에는 각각 해당하는 라우터 컴포넌트들을 구성하였다.

그리고 CRUD에 해당하는 각각의 페이지에 맞게 해당하는 view 폴더를 만들었다.

우선 FSD는 Feature Sliced Design의 줄임말이다.

이 패턴의 장점은 이름에서 알수있듯이 기능을 중심으로 하였고 각 기능별로 모듈화를 하여 독립적으로 각 기능들을 수행할 수 있게 한다.

그리고 기능단위로 되어있기때문에 다른 곳에서 필요할 때 export하여 재사용을 할 수 있다는 장점도 있고 해당 부분의 수정이 필요하게 된다면

각 기능의 책임을 작게 했기때문에 유지보수 측면에도 좋다는 것이다.

실제로 나는 이 구조대로 구성을 했다고 생각하는데 내 눈에 보기에도 엄청 직관적이며 어떤 부분이 어떤 기능에 해당하는지 보기 쉽다는 것이다.

가독성도 좋을 뿐더러 협업하는 사람이 있다면 책임분리를 하여 설명하는것 또한 쉽게 설명할 수 있어 좋은 것 같다.

다만 한 가지 고민중인 사항이 있는데 components폴더안에 각각의 기능마다 view 폴더들이 존재하고 그 안에 최종 반환되는 컴포넌트가 있는데

이 최종 반환되는 컴포넌트를 좀 더 직관적으로 pages 라는 폴더를 두어 관리를 할 까 생각중이다.

이렇게된다면 각 model별로 해당하는 ui가 있고 최종 반환되는 페이지별로 반환되는 컴포넌트를 분리한다면 그게 더 명확하고 가독성에 좋지 않읋까 생각이 들어서이다. 이 외에도 다양한 프론트 디자인패턴들이 있지만 현재는 FSD 패턴기준으로 프로젝트를 구성하고 있으며 차후에 더 좋은 패턴이나 협업하면서 필요하게 된다면 다른 패턴에 대해서도 다뤄볼까 한다.