이번 개인과제 프로젝트는 공연 예매사이트를 구현하는 것이다.

⚡ 필수 구현 요소

⚙ 초기 설정

1. 필요한 패키지들을 다운로드 해준다.

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

2. tsconfig.json 파일 설정해주기

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2017", // ES2017 쓰겠다.
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "esModuleInterop": true //  ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 해준다.
  }
}

3. main.ts 파일 변경해주기

• DTO 엄격하게 사용하기 위해 ValidationPipe 추가해준다.
• DTO를 사용하는 것의 핵심은 DTO 객체 안에서 클라이언트의 전달 값에 대한 유효성 검사가 자동으로 되어야하는 것이다.

  그러나 정의되지 않는 데이터 필드를 전달하거나 정의 되었지만 데이터 형식을 다르게 전달한다면?
  → DTO가 이러한 역할을 할 수 있도록 돕는 것이 ValidationPipe다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(
    new ValidationPipe({
      transform: true,
    }),
  );
  await app.listen(3000);

}
bootstrap();

4. Hot reload 설정해주기 (nest-cli 사용 버전)

• 매번 서버를 껐다 켰다 하기 번거로워 공식문서 참고하며 설정해줬다.
• Nodemon과 비슷한 역할

1) 설치

 npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

2) webpack-hmr.config.js 파일을 root 디렉토리에 생성해준다.

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({
        name: options.output.filename,
        autoRestart: false,
      }),
    ],
  };
};

3) main.ts 파일에 관련 코드를 작성한다.

declare const module: any; // hot reload 관련 추가 코드
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  ...
 
  // hot reload 관련 추가 코드
  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

4) package.json 파일을 수정해준다.

 "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch",

5) 터미널에서 실행해준다.

npm run start:dev

필수구현 시작하기 전 데이터베이스 설정과 ERD 토대로 entity를 구현해보아야겠다.