-
Notifications
You must be signed in to change notification settings - Fork 0
Directory 구조
왕승재 edited this page Nov 23, 2022
·
26 revisions
새 Directory가 필요할 경우 팀에 공유한 뒤 추가하시면 됩니다.
📦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
┣ 📂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 />
참고해보면 좋을 소스 : 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 // 타입스크립트 설정 파일
- Date 객체가 내 PC 날짜를 참조하는거였어..?
- FrontEnd 성능 개선기
- Google OAuth 프론트 연계
- HTTPS 보안 등급 A+ 받기
- URL Parameter routing 트러블 슈팅
- Immer.js 도입기
- Request Header의 특정 헤더값이 확인이 안되는 경우
- FrontEnd 성능 개선기 두번째 (네트워크 Waterfall 발생)
- 실시간 알림을 위한 SSE 도입기
- Fitory 검색페이지 개발 & 성능 개선기
- Index를 이용한 DB 성능 개선 일지
- Full Text Search를 이용한 DB 성능 개선 일지
- 22.11.09. Week1 멘토링
- 22.11.11. Week1 마스터클래스 리뷰
- 22.11.16. Week2 멘토링
- 22.11.26. Week3 멘토링
- 22.11.30. Week4 멘토링