참고
견고한 node js 프로젝트 설계하기

FE

리액트 환경에서 프론트 개발을 했다. 각 디렉토리 안에서 다시 페이지 별로 디렉토리를 나눈 후 파일을 생성했다. styled-component를 사용했다.

src
│   app.tsx          # 라우트 설정
└───pages            # 각 페이지들의 index.tsx
└──────────main       # 메인페이지 index.tsx
└──────────mypage     # mypage index.tsx
└──────────...
|
└───components      # 페이지들의 구성요소들.
└──────────common    # 두 페이지 이상에서 호출되는 구성요소들
└──────────main      # 메인 페이지에서 호출되는 구성요소들
└──────────...
|
└───context         # useContext 훅 관련
└───js              # util 함수들
└───styles          # 전역적으로 적용하는 스타일(css)

BE

src
│   app.js          # App entry point
└───api             # api
└───config          # 환경 설정
└───loaders         # 시작에 해야될 환경 설정 모듈 ( ex. app.use() 등 )
└───models          # Database models
└───services        # api에서 제공하는 서비스 로직이 있는 코드

• app.js: entry point
• /api: 3계층 구조의 controller 계층에 해당. BE에서 path와 get, post 등의 메소드를 처리하는 파일 및 함수를 작성하자.
  • 비즈니스 로직을 controller에 넣으면 스파게티 코드가 된다. 넣지 말자
• /service: 3계층 구조의service layer 계층에 해당. controller 계층의 get, post 등의 req, res, next를 받아서 처리해주는 로직 및 함수를 작성하자.
  • 비즈니스 로직은 여기에 넣자
  • sql이나 orm 형태의 코드가 있어서는 안됨
  • service layer에서는 req, res 객체를 전달하지 말기
• /models: database에서 직접적으로 crud하는 로직의 함수들이 존재하는 계층
• /config: node.js에서 API Key와 데이터베이스 연결과 관련된 설정들을 저장한 .env 파일을 로드하고 객체를 사용하여 변수들을 저장.
• /loaders: 시작에 해야될 환경 설정 모듈. 이번 프로젝트에선 express와 socket을 사용했는데 loaders의 구성은 다음과 같다.

/loaders
└───index.js          # expressLoader와 socketLoader 호출
└───express.js        # express 세팅 ex) app.use()
└───socket.js         # socket 생성