[21.10.18. 월] 더 좋은 Foldering

2번째 PR

기존에 사용하던 폴더링 방식에서 새로운 방법으로 변경하자는 팀원의 제안이 있었다. 기존에는 src내에 features가 있었고 그 안에서 각 기능에 대한 api.ts, hooks.ts, index.tsx가 있는 구조였다.

하지만 위와 같은 방식은 예전에 주로 사용하던 container & presenter 구조를 사용할 때 권장되는 방식이라는 것이 팀원의 최종 결론이다. 이에 따라 새로운 폴더링 방식을 적용했다.

간략하게 그려보자면 아래와 같다. components 파일에서는 각 기능별로 폴더가 나뉘고, 그 안에서 해당 기능에 필요한 모든 컴포넌트가 속한다. 이것은 차후에 완전한 페이지로 조립되어 pages 안의 파일에서 import 될 것이다.

hooks 파일은 custom hooks 이 있을 것이다. SWR을 사용하기 때문에 data fetching에 대한 hooks 이 주로 있을 예정이다. apis 는 util에서 생성한 axios instance를 사용하여 각각의 기능에서 사용되는 api 들이 선언될 것이다.

|--src
|  |--components
|     |--eaxmFeat
|        |--index.tsx
|  |--hooks
|     |--useFeat.ts
|     |--useFeat.ts
|  |--apis
|     |--featApi.ts
|     |--featApi.ts

지금은 복잡하지 않지만 장기적으로 봤을 때 이 프로젝트는 복잡해질 것이다. 어떤 폴더링 방식이 정답인지는 아직 알 수 없지만 가장 효율적인 방법을 찾기 위해 지속적인 탐구를 할 필요가 있다.