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
│   │   └── 📂entities
│   │       └── 📜alram.entity.ts
│   ├── 📜app.module.ts
│   ├── 📂config
│   │   └── 📜typeorm.config.ts
│   ├── 📂exception
│   │   ├── 📜HttpError.ts
│   │   └── 📜HttpExceptionFilter.ts
│   ├── 📂exercises
│   │   ├── 📂dto
│   │   ├── 📂entities
│   │   │   └── 📜exercise.entity.ts
│   ├── 📂follows
│   │   ├── 📂entities
│   │   │   └── 📜follow.entity.ts
│   ├── 📜main.ts
│   ├── 📂oauth
│   │   ├── 📂google-oauth
│   │   │   ├── 📂dto
│   │   │   │   └── 📜google-user.dto.ts
│   │   │   └── 📂utils
│   │   └── 📂jwt
│   ├── 📂routines
│   │   ├── 📂dto
│   │   ├── 📂entities
│   │   │   └── 📜routine.entity.ts
│   ├── 📂sbd_records
│   │   ├── 📂dto
│   │   ├── 📂entities
│   │   │   └── 📜sbd_record.entity.ts
│   ├── 📂sbd_statistics
│   │   ├── 📂entities
│   │   │   └── 📜sbd_statistics.entity.ts
│   ├── 📂types
│   ├── 📂users
│   │   ├── 📂dto
│   │   ├── 📂entities
│   │   │   └── 📜user.entity.ts
│   └── 📂utils
│       └── 📜env.ts
├── 📂test
├── 📜tsconfig.build.json
└── 📜tsconfig.json