Directory 구조

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

🌕 FrontEnd

📦client
┣ 📂.storybook         // 스토리북 전역 설정 파일
┣ 📂cypress
┃ ┣ 📂fixtures         // mock API json
┃ ┣ 📂integration      // cypress 테스트 코드 ❗️파일 이름은 'mypage.spec.ts'와 같은 형식으로 한다.
┃ ┣ 📂pulgins          // cypress 플러그인
┃ ┣ 📂support          // cypress 커스텀 함수
┣ 📂public
┃ ┣ 📂appImages.       // menifest.json에서 사용되는 이미지 파일
┃ ┣ 📂icons            // 아이콘 파일 
┃ ┣ 📂images           // 이미지 파일
┃ ┣ 📂fonts            // 글꼴 파일
┣ 📂src      
┃ ┣ 📂api              // 외부 API 인터페이스 ❗️파일 이름은 '...API'로 끝난다.
┃ ┣ 📂common
┃ ┃ ┣ 📂design         // 디자인 시스템 컴포넌트 (ex. Modal, DropDown)
┃ ┃ ┣ 📂layer          // 레이아웃 컴포넌트 (ex. TopNavigationBar)
┃ ┣ 📂components       // 페이지 하위 컴포넌트 (* 아래 components Rule 참조)
┃ ┣ 📂constants
┃ ┃ ┣ 📜consts.ts      // `const` 키워드 정의 상수
┃ ┃ ┣ 📜enums.ts       // `enum` 키워드 정의 상수
┃ ┃ ┣ 📜message.ts     // 에러(또는 성공) 메시지 문자열 상수
┃ ┣ 📂contexts         // 컨텍스트 파일
┃ ┣ 📂hooks            // 커스텀 훅 ❗️상태에 영향을 받는 중복되는 로직을 커스텀 훅으로 분리한다. 파일 이름은 'use...'로 시작한다.
┃ ┃ ┣ 📂query          // React Query의 useQuery Hook을 사용한 비동기 관리 커스텀 Hook
┃ ┣ 📂pages            // 페이지 루트 컴포넌트 ❗️파일 이름은 '...Page'로 끝난다.
┃ ┣ 📂services         // 공통으로 사용되는 모듈 (ex. 로컬/세션 스토리지 관리 모듈)
┃ ┣ 📂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        // 렌더링 파일
┣ 📜.babelrc.          // 바벨 설정 파일
┣ 📜.eslintrc.js       // eslint 설정 파일
┣ 📜cypress.config.js  // cypress 설정 파일    
┣ 📜tsconfig.json      // 타입스크립트 설정 파일
┣ 📜webpack.config.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

❗️nest.js generator를 통해 생성된 것들은 기본적으로 📜*.controller.ts, 📜*.service.ts, 📜*.module.ts, 📂dto 가 생성됩니다.

❗️nest.js의 파일명은 기본적으로 Kebab Case를 사용하고, 이름.기능.ts 형식을 갖습니다. 참고 링크

• 📜*.entity.ts : TypeORM을 이용해 DB에 테이블을 만들어주는 친구입니다.

• 📂dto, 📜*.dto.ts : POST를 통해 DB로 들어가는 값들의 타입 검증

📦server
├── 📂src
│   ├── 📂alarms                        // alarms 테이블에 관한 API들,❗️nest.js generator를 통해 생성
│   │   └── 📂entities
│   │       └── 📜alram.entity.ts
│   ├── 📂config
│   │   └── 📜typeorm.config.ts         // DB 접속을 위한 설정
│   ├── 📂exception
│   │   ├── 📜http-error.ts             // Nest.js에서 제공하는 에러 이외에 custom http error를 내기 위함
│   │   └── 📜http-exception.filter.ts  // 전역 에러 형식(탬플릿) 지정
│   ├── 📂exercises                     // exercises 테이블에 관한 API들,❗️nest.js generator를 통해 생성
│   │   ├── 📂dto                       // `POST`를 통해 DB로 들어가는 값들의 타입 검증
│   │   ├── 📂entities
│   │   │   └── 📜exercise.entity.ts
│   ├── 📂follows                       // follows 테이블에 관한 API들,❗️nest.js generator를 통해 생성
│   │   ├── 📂entities
│   │   │   └── 📜follow.entity.ts
│   ├── 📂oauth                         // oauth에 관한 API들, 추후에 google 이외에도 추가될 가능성을 고려해 제작
│   │   ├── 📂google-oauth              // google oauth에 관한 API들,❗️nest.js generator를 통해 생성
│   │   │   ├── 📂dto                   // `POST`를 통해 DB로 들어가는 값들의 타입 검증
│   │   └── 📂jwt                       
│   │   │   └── 📜jwt.strategy.ts       // jwt 쿠키 발행 및 검증
│   ├── 📂routines                      // routines에 관한 API들,❗️nest.js generator를 통해 생성
│   │   ├── 📂dto                       // `POST`를 통해 DB로 들어가는 값들의 타입 검증
│   │   ├── 📂entities
│   │   │   └── 📜routine.entity.ts
│   ├── 📂sbd_records                   // sbd_records에 관한 API들,❗️nest.js generator를 통해 생성
│   │   ├── 📂dto                       // `POST`를 통해 DB로 들어가는 값들의 타입 검증
│   │   ├── 📂entities
│   │   │   └── 📜sbd_record.entity.ts
│   ├── 📂sbd_statistics                // sbd_statistics에 관한 API들,❗️nest.js generator를 통해 생성
│   │   ├── 📂entities
│   │   │   └── 📜sbd_statistics.entity.ts
│   ├── 📂types                         // 커스텀 타입, 파일 이름은 'request.d.ts'와 같은 형식으로 한다.
│   ├── 📂users                         // users에 관한 API들,❗️nest.js generator를 통해 생성
│   │   ├── 📂dto                       // `POST`를 통해 DB로 들어가는 값들의 타입 검증
│   │   ├── 📂entities
│   │   │   └── 📜user.entity.ts
│   ├── 📂utils                         // 백엔드에서 전체적으로 자주 쓰이는 것들을 모듈화해 분리하는 곳
│   │   └── 📜env.ts
│   ├── 📜app.module.ts                 // 구현한 기능들을 import 하는 곳
│   └── 📜main.ts                       // 서버가 실행되는 곳, 각종 서버 설정과 filter(pipeline)를 설정하는 곳
├── 📂test                              // e2e 테스트 코드 작성하는 곳
├── 📜README.md
├── 📜nest-cli.json                     // nest.js cli 사용을 위함    
├── 📜package-lock.json
├── 📜package.json
├── 📜tsconfig.build.json
└── 📜tsconfig.json                     // 타입스크립트 설정 파일