[복지맵 프로젝트] 프론트엔드 환경설정 - 폴더 구조

이번에 시작하는 프로젝트의 폴더 구조를 어떻게 가져갈지 고민이 많았는데, 대중적으로 권장되고 있는 형식을 참고하여 뼈대를 구성하기로 하였다.

 

현재 사용하고 있는 기술 스택이 Vite + ReactJS + Typescript + SCSS 를 사용하기 때문에 이를 염두에 두고 폴더 구조를 나누기로 결정했다.

 

 

assets

해당 파일은 index.html 등에서 사용되지 않고, 프로젝트 내부적으로 사용되는 정적 파일들을 담을 때 사용하기로 하였다. vite + react 생성 시 기본적으로 생성되어 있는 폴더인데, 제거하지 않고 그대로 사용하기로 했다.

 

componets

여기서는 전역적으로 재사용이 가능한 컴포넌트들을 보관하기로 하였다. 이 때 내부적으로 ui 폴더를 추가하기로 했다. 참고로 ui 이긴 하지만, 특정 페이지에서 재사용되는 특수한 목적의 컴포넌트의 경우에는 compoent/ 경로에 바로 넣어서 순수 ui 기능을 하는 컴포넌트와 명시적으로 분리할 생각이다.

ui 폴더

ui 폴더의 기능은 전역적으로 재사용 가능한 컴포넌트 중에서도 Form, Input, Modal 등과 같이 공용적으로 쓰일 수 있는 UI 를 담는 역할을 한다.

hooks

해당 폴더는 리액트에서 제공하는 커스텀 훅을 생성하여 관리하는 용도로 쓰인다.

services

여기에는 외부 api 요청 로직 중에서도 재사용 되는 로직을 보관할 것이다. 즉, 재사용되지 않고, 단일 페이지에서 사용되는 경우에는 각 page 내에 별도의 api 폴더를 구성하여 거기서 관리할 생각이다.

pages

여기에는 페이지 역할을 하는 컴포넌트들을 모아둘 생각이다. 다만 페이지 컴포넌트뿐만 아니라 해당 페이지에 종속적으로 사용되는 재사용 및 유지보수를 위한 컴포넌트, 타입 등을 별도의 페이지로 구분하여 보관할 생각이다.

 

utils

해당 폴더에는 기능적으로는 작지만 다양한 영역에서 편의를 위해 제공할 수 있는 재사용 로직을 보관할 생각이다. 내부적으로는 helpers.ts 파일 혹은 formatting.ts 파일과 같이 용도별로 파일을 구분하여 명시적으로 직관적으로 import 하여 사용할 수 있도록 할 예정이다.

 

store

이 폴더에는 zustand 등과 같은 상태관리 라이브러리 로직을 보관하는 용도로 사용할 것이다. 최대한 폴더의 깊이는 얕게 가져가면서 용도별로 구분할 수 있도록 폴더 구조를 짜볼 생각이다.