나는 위 사진과 같이 폴더 구조를 정의했다.
카테캠 step2 때 프로젝트의 폴더 구조를 많이 참고했다.
-
api
외부 api와의 통신을 처리하는 로직을 포함 -
assets
이미지, 폰트, 아이콘 등의 정적 파일을 포함 -
hooks
커스텀 훅을 포함 -
mocks
개발 및 테스트 환경에서 사용하는 mock 데이터 및 mock api 핸들러를 포함 -
pages
각 페이지 컴포넌트를 포함 -
provider
전역 상태나 context API를 제공하는 컴포넌트를 포함 -
routes
라우팅을 관리하는 설정 파일들을 포함 -
styles
전역 스타일 시트, 테마 설정, 공통 스타일 파일들을 포함 -
types
전반적으로 사용되는 TypeScript 타입 정의 파일들을 포함 -
utils
여러 곳에서 재사용 가능한 유틸리티 함수들을 포함
이렇게 폴더 구조를 정의해놓고 개발을 시작하게 되면
새 파일들을 어디에 위치시킬 지 중간중간 고민을 하지 않아도 되고
용도별로 정리해두었으므로 협업 시에도 서로 알아보기 쉬우므로 좋다!
