TIL (Today I Learned)

NestJS_온라인 공연 예매 서비스 프로젝트 1편_기본 세팅

k0z 2023. 12. 23. 02:13

 

# Nest JS 프로젝트를 시작하며

TypeScript와 NestJS를 활용한 온라인 공연 예매 서비스 프로젝트를 자세하게 기록하는 포스팅을 시작하고자 합니다. 지금까지 다양한 과제를 수행해왔지만, 아마도 이번이 처음으로 프로젝트의 처음부터 끝까지 기록하는 포스팅이 될 것 같습니다.

 

아직은 TypeScript와 NestJS를 완벽하게 이해하지 못했지만, 그 부족함에도 불구하고 프로젝트에 빠르게 도전하고 있습니다. 이해가 완벽하지 않더라도 강의 영상만을 계속해서 시청하는 것보다는 먼저 시작하고 작업물을 만들어가면서 개념을 재정립하고 명확한 이해를 위해 노력하고 있습니다. 프로젝트를 통해 얼마나 성장할 수 있을지는 알 수 없지만, 빠르게 성장하고 싶은 욕구가 큽니다.

 

앞으로의 도전이 어떤 어려움을 안겨올지는 모르겠지만, 목표했던대로 서비스의 백앤드를 구축해 나가보려고 합니다


# Nest JS 프로젝트를 시작 전 API 명세서와 ERD 설계

프로젝트를 진행하기 전에 API 명세서와 ERD 설계를 완료했습니다. 설계가 튼튼해야 작업이 원활하게 진행되며, 재작업을 최소화할 수 있기 때문에 이에 많은 시간을 투자했습니다. 비록 경험이 아직 충분하지 않아 부족한 부분이 많을지라도, 노력과 시간을 들여 설계에 신경을 쓰려 노력했습니다.

 

설계는 경험이 더 쌓이지 않으면 완벽해지기 어려운 부분이기 때문에 중간중간 작업하면서 수정이 필요한 부분이 생길 수 있습니다. 그러나 이런 과정을 통해 성장할 수 있다는 점을 명심하고, 더 나은 방향으로 나아갈 수 있도록 노력하고 있습니다.

 

계속 수정해 나갈 예정이기에 내용을 확인하시고 수정이 필요한 부분이 있다면 소중한 조언 부탁드립니다.

 

*** TicketPlatform API 명세서***

 

API 명세서_NestJS_TicketPlatform

API 명세서 템플릿 Category,Description,Method,URL,Request Headers,Request Body,Response Headers,Response Body - 성공,Response Body - 실패,비고 회원가입API,회원가입,POST,api/auth/register,Content-Type: application/json ,{ "Email": "asdf

docs.google.com

*** TicketPlatform ERD 설계 수정 전***

 

TicketPlatform

Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.

www.erdcloud.com

*** TicketPlatform ERD 설계 수정 후***

 

TicketPlatform(테이블 4개로 다시 구성)

Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.

www.erdcloud.com


# Nest JS Ticket Platform 프로젝트 초기 세팅

***[명령어]  NestJS_Project 디렉토리 생성 후 디렉토리로 이동 ***

mkdir NestJS_Project // 디렉토리 생성
cd NestJS_Project // 디렉토리 이동


***[명령어] nestjs_tiketplatform프로젝트 생성***

프로젝트가 위치할 최상위 디렉토리에서 새로운 프로젝트 시작

nest new [프로젝트 이름]
nest new nestjs_tiketplatform // 새로운 프로젝트 nestjs_tiketplatform 생성

npm 이용할 예정이기 때문에 npm 선택했습니다. (선택은 자유) 

 

설치가 완료되면 프로젝트 디렉토리로 이동합니다.

cd nestjs_tiketplatform


***[명령어] NestJS_Ticket Platform 프로젝트에 필요한 패키지 설치***

npm i @nestjs/config @nestjs/jwt @nestjs/passport passport passport-jwt @types/passport-jwt typeorm @nestjs/typeorm mysql2 multer bcrypt @types/bcrypt class-validator class-transformer multer @types/multer papaparse @types/papaparse joi typeorm-naming-strategies lodash @types/lodash

+++설치한 패키지 확인하고 넘어가기+++

1. @nestjs/config

NestJS에서 설정을 구성하기 위한 패키지입니다. 애플리케이션의 설정을 효과적으로 관리할 수 있게 도와줍니다.

2. @nestjs/jwt

 NestJS에서 JSON Web Token (JWT)을 다루기 위한 패키지입니다. 인증과 관련된 작업에서 유용하게 사용될 것입니다.

3. @nestjs/passport passport passport-jwt

NestJS에서 Passport 및 Passport-JWT를 사용하여 인증을 처리하는데 필요한 패키지입니다. Passport는 강력한 인증 미들웨어로, 다양한 전략(strategy)을 제공하여 손쉽게 사용자를 인증할 수 있도록 도와줍니다.

4. @types/passport-jwt

TypeScript에서 Passport-JWT를 사용하기 위한 타입 정의입니다.

5. typeorm @nestjs/typeorm mysql2

TypeORM은 TypeScript 및 JavaScript를 위한 ORM(Object-Relational Mapping) 프레임워크로, 데이터베이스와의 상호 작용을 도와줍니다. MySQL2는 MySQL 데이터베이스와 통신하기 위한 드라이버입니다.

6. multer

Express 앱에서 파일 업로드를 처리하기 위한 미들웨어입니다. 파일 업로드 및 관리에 사용됩니다.

7. bcrypt @types/bcrypt

bcrypt는 암호 해싱을 위한 라이브러리로, 사용자 비밀번호를 안전하게 저장하기 위해 사용됩니다. @types/bcrypt는 TypeScript에서 bcrypt를 사용할 때 필요한 타입 정의를 제공합니다.

8. class-validator class-transformer

NestJS에서 DTO(Data Transfer Object) 및 데이터 유효성 검사를 위한 패키지입니다. 클래스의 유효성을 검사하고 변환하는 데 사용됩니다.

9. multer @types/multer

TypeScript에서 Multer를 사용하기 위한 타입 정의입니다.

10. papaparse @types/papaparse

PapaParse는 CSV 데이터를 파싱하는 JavaScript 라이브러리입니다. @types/papaparse는 TypeScript에서 PapaParse를 사용할 때 필요한 타입 정의를 제공합니다.

11. joi

JavaScript 및 Node.js를 위한 데이터 유효성 검사 라이브러리입니다. 입력 데이터의 유효성을 검사하는 데 사용됩니다.

12. typeorm-naming-strategies

TypeORM에서 사용할 수 있는 다양한 네이밍 전략을 제공하는 패키지입니다. 데이터베이스 테이블 및 컬럼의 네이밍을 커스터마이징하는 데 사용됩니다.

13. lodash @types/lodash

Lodash는 JavaScript 유틸리티 라이브러리로, 다양한 기능을 제공합니다. @types/lodash는 TypeScript에서 Lodash를 사용할 때 필요한 타입 정의를 제공합니다.

 


***[명령어] VSCode로 NestJS_Ticket Platform 프로젝트 열기***

code . // .은 현재 디렉토리를 의미, 현재 디렉토리에서 VSCode를 열겠다는 명령어


***tsconfig.json 파일에 항목 추가하기***

"esModuleInterop": true 항목 추가

   "esModuleInterop": true

 

ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져 올 수 있게 합니다. 

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "esModuleInterop": true // 여기 부분 추가하기
  }
}


 

***사전에 Delete'CR' 오류를 방지하고자  .eslintrc.js 파일에 항목 추가***

'prettier/prettier': ['error', { endOfLine: 'auto' }],

 

**자세한 내용은 아래의 링크 내용 확인부탁드립니다.

 

#TIL(error)_NestJS 오류 : Delete`CR`

# NestJS를 사용할 때 발생하는 `Delete CR` 오류 # Delete cr 오류의 원인 Delete cr 오류는 주로 Windows 환경에서 발생하는 오류로, Prettier와 Windows의 개행 방식 간의 차이에서 비롯됩니다. Windows와 Linux는 각

k0zdevel.tistory.com