React 프로젝트 구조 잡기 고민

안녕하세요!

 

신규 프로젝트를 시작할 때 우리 개발자들이 흔히 하게 되는 고민 중에 하나이죠.

새로운 마음으로 이번에는 잘(?) 해보자!!

 

프로젝트의 폴더(파일) 구조를 잡는 것입니다.

 

지난(2021) 과제에서 React를 처음 사내 도입할 때는 React 공홈에 있는 "파일구조" 페이지를 잠시 둘러보고 개발하면서 리펙토링을 진행하였습니다.

https://ko.reactjs.org/docs/faq-structure.html

파일 구조 – React

 

동시에 다른 분들의 기술 블로그도 조금 차용하였죠.

 

---

 

최근 구성한 구조는 아래와 같습니다.

보시다시피... 정리가 안되어 있죠.

프로젝트가 끝난지 얼마 안됐고 혼자 개발했다는 변명을 해봅니다.

해당 프로젝트는 "설비 건전성 관리를 위한 지능형 플랫폼 기술 개발" 과제의 *데이터 시각화 솔루션 입니다.
다른 포스트에서 자세히 다뤄보겠습니다.

 

디렉토리 설명

• public/images : 정적 파일인 이미지 파일들을 위치해뒀습니다.
• src/app : 다른 분들의 기술블로그에서 언급하는 container 컴포넌트에 해당합니다.
• src/components : 공통 또는 화면 컴포넌트들이 위치합니다.
• src/modules : redux의 모듈들이 위치합니다.

이외에는 src/ 에 App.css, App.js 등의 파일들이 떠다니고 있습니다.

프로젝트 root 경로에는 환경 설정파일(.env, .env.production)과 기타 구성문서들이 위치하고 있고요.

 

---

고려할 점들

프로젝트 구조를 잡기 위해서 우선 고려해야 할 부분들을 짚어보려고 합니다.

 

먼저, 앞서 리액트 공홈의 <파일 구조> 챕터를 참고하면 크게 아래 2가지를 생각해야 겠습니다.

• 너무 많은 중첩을 피하기
• 너무 깊게 생각하지 않기

중요한건 프로젝트가 커지면서 리펙토링을 통해 최적화 하는 것이라고 생각합니다.

이전 과제에서처럼 말이죠.

 

두번째로 Frontend에서 유명하신 벨로퍼트님의 포스트도 참고해봅니다. (2016년 포스트로 추정됨.)

https://redux-advanced.vlpt.us/3/02.html

3-2. 프로젝트 구조 잡기 · GitBook

 

세번째로는 TypeScript + React 프로젝트 구조 잡기를 참고하였습니다.

https://byjuun.com/post/77

BY-juun Blog

여기서는 아래와 같이 구성하고 있습니다. 

• components : Card, Menu 등 재사용할 컴포넌트
• hooks : 재사용할 hooks
• pages : 로그인 페이지 등 화면 컴포넌트
• utils : 공통 함수들 (+ SWR, Redux)

 

---

위 내용을 참고해서 2022년에 개발해볼 웹 서비스의 경우 아래와 같이 src 구조를 잡아보려 합니다.

• components : 재사용할 컴포넌트 (메뉴 등 화면 조각)
• modules : Redux
• pages : 화면 컴포넌트
• styles : css 등 스타일 제어
• utils : 공통 메서드

물론 프로젝트를 진행하면서 동료들과 리뷰를 통해 조정이 발생 할 수 있습니다.

 

관련 프로젝트는 다음 깃헙 리포를 참고해주세요!

https://github.com/bookclubstory/bookclub-front

GitHub - bookclubstory/bookclub-front: 우리동네 북클럽 (Frontend)