폴더구조
항상 무슨 프레임워크를 쓰든 폴더구조를 잘 정리해놓으면 눈이 기쁘다.
또한, 그 폴더구조가 곧 디자인 패턴으로 이어질 수도 있다.
React에서는 어떤 폴더구조가 쓰이는지 알아보자.
기본 폴더구조
React 프로젝트를 제일 처음 생성하면 나오는 기본 폴더구조는 이렇다.
프로젝트
node_modules
라이브러리, 패키지들..
public
favicon.ico
index.html
logo.png
robots.txt
manifest.json
src
App.css
App.js
App.test.js
index.css
index.js
...src 폴더에서 우리는 코드를 작성한다.
그리고 크롤링을 위한 제약을 robots.txt에 파비콘과 로고같은 것을 public에 넣는다.
src에 대한 폴더구조를 나눌 때는 과연 어떻게 해야할까?
기능이나 라우팅에 대한 분류
기능을 어느 한 크기로 통일해서 나누지는 않는다.
필요에 따라, 예를 들어 회원가입 기능이 있다면 회원탈퇴도 있을 수도 있고, 로그인도 있을 수도 있다.
이 모든 것을 묶어 아예 계정관리라는 기능으로 크게 볼 수도 있으며, 아예 회원가입, 회원탈퇴, 로그인 이런식으로 구분을 할 수도 있다.
common/
Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed/
index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
파일 유형에 대한 분류
확장자명 별로 구분을 하는 것이다.
API를 가져오는 코드들을 따로 묶고, UI와 관련된 것들도 따로 묶는 것이다.
api/
APIUtils.js
APIUtils.test.js
ProfileAPI.js
UserAPI.js
components/
Avatar.js
Avatar.css
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
Profile.js
ProfileHeader.js
ProfileHeader.css프론트엔드는 아무것도 없는 목업과 함께하는 컴포넌트를 노출시키는 작업과
API로 데이터를 가져와서 상태값을 변경시키는 작업을 하기 때문에
api와 components로 디렉토리를 구분하고 있다.
대부분이 쓰는 폴더구조
플러터에서도 이방식을 사용했고, 안드로이드에서도 사용했다.
MVC나 MVVM 디자인 패턴에서 자주 쓰이는 것이다.
뭐라고 칭하는지 몰라서 그냥 이렇게 이름을 지었다.
components/ 재사용 가능한 컴포넌트들을 저장하는 폴더
ItemButton.js
DarkBottomNav.js
pages/ 페이지 컴포넌트들을 저장하는 폴더
Login.js
Home.js
styles/ 전역 스타일, 또는 스타일 유틸리티를 저장하는 폴더
global.css
Login.css
utils/ 여러 컴포넌트에서 공유되는 함수, 헬퍼 함수 등을 저장하는 폴더
api.js
services/ 데이터를 가져오거나 API와 상호작용하는 서비스 파일을 저장하는 폴더
authService.js
context/ React Context를 정의하고 관리하는 파일들을 저장하는 폴더
authContext.js
routes/ 라우팅과 관련된 파일들을 저장하는 폴더. (예: React Router의 라우터 설정 파일)
AppRouter.js이를 정리하면 다음과 같다.
my-react-app/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── components/
│ │ ├── Button.js
│ │ ├── Header.js
│ │ └── ...
│ ├── pages/
│ │ ├── Home.js
│ │ ├── About.js
│ │ └── ...
│ ├── styles/
│ │ ├── global.css
│ │ └── ...
│ ├── utils/
│ │ ├── api.js
│ │ └── ...
│ ├── services/
│ │ ├── authService.js
│ │ └── ...
│ ├── context/
│ │ ├── AuthContext.js
│ │ └── ...
│ ├── routes/
│ │ ├── AppRouter.js
│ │ └── ...
│ ├── index.js
│ └── App.js
└── package.json
