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            // 페이지 루트 컴포넌트
┃ ┣ 📂recoil           // 상태 관리를 위한 atom, selector ❗️'user/atom.ts' or 'user/selector.ts'와 같이 도메인명의 하위 폴더에 파일을 생성한다.
┃ ┣ 📂services         // 외부 API 인터페이스 ❗️파일 이름은 '...API'로 끝난다.
┃ ┣ 📂stories          // 스토리북 파일 ❗️ 파일 이름은 'Button.stories.tsx'와 같은 형식으로 한다.
┃ ┣ 📂styles           // 공통으로 사용되는 스타일 (ex. 전역 스타일, theme 스타일)
┃ ┣ 📂types            // 재사용되는 타입 (ex. DTO) ❗️파일 이름은 'user.d.ts'와 같은 형식으로 한다.
┃ ┣ 📂utils            // 유틸 함수 ❗️상태에 영향을 받지 않는 로직은 유틸 함수로 분리한다. 즉, “동일한 입력"에 대해서는 “동일한 출력”을 내는 순수 함수를 말한다.
┃ ┃ ┣ 📂test           // jest 테스트 코드 ❗️파일 이름은 'getCurrentTime.test.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
┣ 📂src
┃ ┣ 📜app.controller.spec.ts   // 컨트롤러를 위한 단위 테스트
┃ ┣ 📜app.controller.ts        // 하나의 라우터가 있는 기본 컨트롤러
┃ ┣ 📜app.module.ts            // 애플리케이션의 루트 모듈
┃ ┣ 📜app.service.ts           // 단일 메서드를 사용하는 기본 서비스
┃ ┣ 📜main.ts                  // 핵심 기능 NestFactory를 사용하여 Nest 애플리케이션 인스턴스를 생성하는 애플리케이션의 엔트리 파일
┣ 📂test
┣ 📜.eslintrc.js               // eslint 설정 파일
┣ 📜nest-cli.json              // nest 설정 파일
┣ 📜tsconfig.json              // 타입스크립트 설정 파일