Directory 구조

새 Directory가 필요할 경우 팀에 공유한 뒤 추가하시면 됩니다.

🌕 FrontEnd

📦client
┣ 📂.storybook         // 스토리북 전역 설정 파일
┣ 📂cypress
┃ ┣ 📂fixtures         // mock API json
┃ ┣ 📂intergration     // cypress 테스트 코드 ❗️파일 이름은 'mypage.spec.ts'와 같은 형식으로 한다.
┃ ┣ 📂pulgins          // cypress 플러그인
┃ ┣ 📂support          // cypress 커스텀 함수
┣ 📂public
┃ ┣ 📂icons            // 아이콘 파일 
┃ ┣ 📂images           // 이미지 파일
┃ ┣ 📂fonts            // 글꼴 파일
┣ 📂src                
┃ ┣ 📂components       // 페이지 하위 컴포넌트 (* 아래 components Rule 참조)
┃ ┃ ┣ 📂design         // 디자인 시스템 컴포넌트 (ex. Modal, DropDown)
┃ ┣ 📂constants
┃ ┃ ┣ 📜consts.ts      // `const` 키워드 정의 상수
┃ ┃ ┣ 📜enums.ts       // `enum` 키워드 정의 상수
┃ ┣ 📂hoc              // 고차 컴포넌트 (ex. Context)
┃ ┣ 📂hooks            // 커스텀 훅 ❗️상태에 영향을 받는 중복되는 로직을 커스텀 훅으로 분리한다. 파일 이름은 'use...'로 시작한다.
┃ ┣ 📂pages            // 페이지 루트 컴포넌트 ❗️파일 이름은 '...Page'로 끝난다.
┃ ┣ 📂services         // 외부 API 인터페이스 ❗️파일 이름은 '...API'로 끝난다.
┃ ┣ 📂stores           // zusthand store ❗️파일 이름은 '...Store'로 끝난다.
┃ ┣ 📂stories          // 스토리북 파일 ❗️ 파일 이름은 'Button.stories.tsx'와 같은 형식으로 한다.
┃ ┣ 📂styles           // 공통으로 사용되는 스타일 (ex. 전역 스타일, theme 스타일)
┃ ┣ 📂types            // 재사용되는 타입 (ex. DTO) ❗️파일 이름은 'user.d.ts'와 같은 형식으로 한다.
┃ ┣ 📂utils            // 유틸 함수 ❗️상태에 영향을 받지 않는 로직은 유틸 함수로 분리한다. 즉, “동일한 입력"에 대해서는 “동일한 출력”을 내는 순수 함수를 말한다.
┃ ┃ ┣ 📂test           // jest 테스트 코드 ❗️파일 이름은 'getCurrentTime.spec.ts'와 같은 형식으로 한다.
┃ ┣ 📜App.tsx          // 페이지 라우팅 컴포넌트
┃ ┣ 📜index.tsx        // 렌더링 파일
┣ 📜.eslintrc.js       // eslint 설정 파일
┣ 📜cypress.json       // cypress 설정 파일    
┣ 📜tsconfig.json      // 타입스크립트 설정 파일
┣ 📜webpack.common.js  // 공통 웹팩 설정 파일
┣ 📜webpack.dev.js     // 개발 모드 웹팩 설정 파일
┣ 📜webpack.prod.js    // 배포 모드 웹팩 설정 파일

📂components Rule

📂components
┣ 📂design
┃ ┣ 📂Modal
┃ ┣ 📜index.tsx         // 함수 컴포넌트
┃ ┣ 📜style.ts          // styled-components
┣ 📂Profile
┃ ┣ 📜index.tsx         
┃ ┣ 📜style.ts         
┣ 📂Calendar
┃ ┣ 📜index.tsx        
┃ ┣ 📜style.ts       
  .
  .
  .

• 예기치 못하게 특정 컴포넌트를 재사용할 수 있으므로 Directory를 flat하게 관리한다.
• styled-components 스타일 로직을 분리한다. (아래 예시 코드 참고)

import * as s from './style';

...

return <s.Title />

🌑 BackEnd

참고해보면 좋을 소스 : nestjs-realworld-example-app

server
├── README.md
├── nest-cli.json
├── package-lock.json
├── package.json
├── src
│   ├── alarms
│   │   ├── alarms.controller.ts
│   │   ├── alarms.module.ts
│   │   ├── alarms.service.ts
│   │   └── entities
│   │       └── alram.entity.ts
│   ├── app.module.ts
│   ├── config
│   │   └── typeorm.config.ts
│   ├── exception
│   │   ├── HttpError.ts
│   │   └── HttpExceptionFilter.ts
│   ├── exercises
│   │   ├── dto
│   │   │   ├── every-date.dto.ts
│   │   │   └── history-of-month.dto.ts
│   │   ├── entities
│   │   │   └── exercise.entity.ts
│   │   ├── exercises.controller.ts
│   │   ├── exercises.module.ts
│   │   └── exercises.service.ts
│   ├── follows
│   │   ├── entities
│   │   │   └── follow.entity.ts
│   │   ├── follows.controller.ts
│   │   ├── follows.module.ts
│   │   └── follows.service.ts
│   ├── main.ts
│   ├── oauth
│   │   ├── google-oauth
│   │   │   ├── dto
│   │   │   │   └── google-user.dto.ts
│   │   │   ├── google-oauth.controller.spec.ts
│   │   │   ├── google-oauth.controller.ts
│   │   │   ├── google-oauth.module.ts
│   │   │   ├── google-oauth.service.spec.ts
│   │   │   ├── google-oauth.service.ts
│   │   │   └── utils
│   │   │       └── google.strategy.ts
│   │   └── jwt
│   │       └── jwt.strategy.ts
│   ├── routines
│   │   ├── dto
│   │   │   └── routine-list.dto.ts
│   │   ├── entities
│   │   │   └── routine.entity.ts
│   │   ├── routines.controller.ts
│   │   ├── routines.module.ts
│   │   └── routines.service.ts
│   ├── sbd_records
│   │   ├── dto
│   │   │   ├── best-record.dto.ts
│   │   │   └── every-record.dto.ts
│   │   ├── entities
│   │   │   └── sbd_record.entity.ts
│   │   ├── sbd_records.controller.ts
│   │   ├── sbd_records.module.ts
│   │   └── sbd_records.service.ts
│   ├── sbd_statistics
│   │   ├── entities
│   │   │   └── sbd_statistics.entity.ts
│   │   ├── sbd_statistics.controller.ts
│   │   ├── sbd_statistics.module.ts
│   │   └── sbd_statistics.service.ts
│   ├── types
│   │   ├── jwt.d.ts
│   │   └── request.d.ts
│   ├── users
│   │   ├── dto
│   │   │   └── users-info.dto.ts
│   │   ├── entities
│   │   │   └── user.entity.ts
│   │   ├── users.controller.ts
│   │   ├── users.module.ts
│   │   └── users.service.ts
│   └── utils
│       └── env.ts
├── test
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── tsconfig.build.json
└── tsconfig.json