React Project Structure 2차

Status
Draft
Created By
Empty
Last Edited Time
8/24/2020, 2:53:00 PM
Description
React 프로젝트(디렉토리) 구조
Tags
React
프로젝트 구조
모든 프로젝트에서 프로젝트 구조를 잡는 일은 별거 아닌거 같지만 구조를 잡으면 패턴이 생겨 프로젝트 참가자들은 어떤 모듈, 컴포넌트, ...가 어떤 디렉토리에 있는지 알 수 있게 때문에 중요하다. 모든 프로젝트의 요소(코드, 아키텍처, ...)는 실무자들이 예측하기 쉽기 때문에 패턴을 갖은 게 좋다.
본격적으로 React, Redux, NodeJS, NextJS를 사용한 프로젝트 구조를 설명하겠다. 큰 구조는 아래와 같다.
- . - config/ - data/ - reports/ - src/ - public/ - components/ - constants/ - containers/ - ducks/ - hocs/ - pages/ - statics/ - store/ - utils/ - server/ - controller/ - middlewares/ - models/ - routes/ - service/ - constants/ - utils/ - test/ - package.json
Plain Text
공통
모든 스택, 페이지, 컴포넌트, ...에서 공통적으로 적용되는 구조는 아래와 같다.
- . - utils - constants ...
Plain Text
utils/
로직에서 사용되는 유틸을 모아둔 디렉토리다. 여기서 유틸이란 예를 들어
string을 체크하는 함수
object array를 특정 필드를 사용해 object 형식으로 만들어주는 함수 ...
이 있다.
constants/
로직에서 사용되는 변하면 안되는 변수를 모아둔 디렉토리다. 예를 들어
특정 로직에서 파일 업로드 용량
상태 값에 따른 integer 형 변수 ...
이 있다.
모듈(컴포넌트, 유틸, 서비스, ...)의 배치
모든 모듈은 중복을 줄이기 위해 해당 모듈을 사용하는 모듈안에 속해 있다가 한 단계 상위에서 모듈을 사용하면 그 모듈은 한 단계 상위의 모듈에 배치되어야한다. 글로 쓰기엔 이해하기 어려우느 아래의 예제를 참고
예제는 유저 관리와 상품 관리를 포함하는 쇼핑몰 프로젝트라고 하면 유저 관리에는 Table이라는 컴포넌트를 사용하고 프로젝트의 프론트엔드 구조는 아래와 같다.
- src/public/ - pages/ - users/ - index.jsx # 이 파일에서 ../components/Table 컴포넌트를 사용하고 있다. - components/ - Table/ - index.jsx - style.scss - productions/
Plain Text
하지만 상품 관리에서도 같은 Table 컴포넌트을 사용한다면 아래와 같이 구조가 변경된다.
- src/public/ - components/ - Table/ # pages/users/components에 있는 Table 컴포넌트가 상위 모듈로 이동했다. - index.jsx - style.scss - pages/ - users/ - index.jsx # 이 파일에서 ../../components/Table 컴포넌트를 사용하고 있다. - productions/ - index.jsx # 이 파일에서 ../../components/Table 컴포넌트를 사용하고 있다.
Plain Text
위와 같은 방식으로 프로젝트 구조를 운영하면 중복을 최소화하면서 다른 개발자에게 패턴을 제공할 수 있다.
요약하자면, 프로젝트 구조 구성의 사이클은 아래와 같다.
1.
모듈1을 사용할 상위 모듈2 안에 모듈1을 배치
2.
모듈3을 추가, 모듈3에서 모듈1의 기능을 사용해야함.
3.
모듈2의 상위 모듈0으로 모듈1을 배치
config/
jest, webpack, nextjs, jenkins, ...등 어플리케이션을 실행, 테스트, 배포할 때 필요한 config 파일을 모아둔 디렉토리다.
data/
추상적이긴 하지만 테스트 파일, 임시 디렉토리 등 비즈니스에서 사용할 파일들을 모아둔 디렉토리다.
reports/
유닛테스트 결과, 유닛테스트 커버리지 등 프로젝트에 관한 리포트를 모아둔 디렉토리다. 주로 jenkins에서 사용한다.
src/
백엔드, 프론트엔드, 테스트 소스를 모아둔 디렉토리다.
- src/ - public/ - components/ - constants/ - containers/ - ducks/ - hocs/ - pages/ - statics/ - store/ - utils/ - server/ - controller/ - middlewares/ - models/ - routes/ - service/ - constants/ - utils/ - test/
Plain Text
src/public/
프로트엔드 소스로 리엑트, 리덕스에 관련된 소스가 있다.
- src/public/ - components/ - constants/ - containers/ - ducks/ - hocs/ - pages/ - statics/ - store/ - utils/
Plain Text
components/
state를 갖지않는 컴포넌트들이 있다.
containers/
state를 갖는 컴포넌트들이 있다.
ducks/
redux와 관련(store, action, reduce, init state, type, selector)된 모듈들이 있다. ducks에 대한 자세한 사항은 링크를 참고
hocs/
고차 컴포넌트를 모다운 디렉토리다. 고차 컴포넌트에 대한 자세한 사항은 링크를 참고
pages/
NextJs 라우터에 따른 구조로 배치 되어 있다. 예를 들어 URL이 'https://sw2h.xyz/settings/profile'라면 ./pages/의 구조는 아래와 같다.
- pages - settings/ - profile/
Plain Text
statics/
프론트엔드에서 쓰이는 이미지, 공통 css(bootstrap 같은) 파일을 모아둔 디렉토리다.
src/server/
백엔드 관련 요소들을 모아둔 디렉토리다.
- src/server/ - controller/ - middlewares/ - models/ - routes/ - service/ - constants/ - utils/
Plain Text
controller/
routers/와 1:1로 매칭되고 service/ 모듈들의 조합으로 로직을 구성하는 파일들을 모아둔 디렉토리다.routers/를 놔두고 추가로 controller/쓰는 이유는 테스트를 쉽게 하기 때문이다.
exporess를 사용한다면 routers/의 기본 코드는 아래와 같다.
routers/api/user/index.js
const express = require('express'); const router = express.Router(); router.get('/logout', () => { // service 모듈들을 조합하는 코드 ... }); module.exports = router;
JavaScript
위의 코드에서 service 모듈 조합에 관한 테스트하려면 supertest 사용하거나 다른 방법을 통해서 테스트해야한다. 테스트가 번거롭기 때문에 아래와 같이 구성했다.
routers/api/user/index.js
const express = require('express'); const ctrl = require('../../controller'); const router = express.Router(); router.get('/logout', ctrl.user.logout); module.exports = router;
JavaScript
constroller/user/index.js
exports.logout = () => { // service 모듈들을 조합하는 코드 ... };
JavaScript
이 구조에서는 controller/user에 있는 logout 함수만 테스트하면 된다.
middlewares/
express에서 쓰일 middleware를 모아둔 디렉토리다. 에러 핸들링, 로깅 등이 들어있다.
models/
DB 스키마, CRUD관련된 모듈들을 모아둔 디렉토리다.
routers/
api, view의 엔드 포인트 역할을 하는 모듈을 모아둔 디렉토리다.
service/
비즈니스 로직과 관련된 모듈을 모아둔 디렉토리다.
test/
유닛테스트 관련 전역 변수, 전역 setup, 전역 teardown 파일을 모아둔 디렉토리다.