14주차 TIL (3)

지금까지는 간단하게 Nest.js 에 대한 개념과 용어 설명을 잠깐 살펴보았는데 이제부터는 실습을 해보려고 한다.

우선 Nest.js 프레임워크를 설치하기 위해선

$ npm i -g @nestjs/cli

터미널에 위와같은 명령어로 설치 할 수 있다.

Nest.js 설치 후 커맨드에 nest 라고 쳐보면 다음과 위와 같은 명령어들이 있는것을 볼 수 있다.

이제부터 새로운 프로젝트를 생성하고 구조를 살펴보겠다.

$ nest new [프로젝트명]

일단 nest new 를 통하여 내가 만들고자 하는 프로젝트를 생성해준다.

우리는 npm을 통해 설치할 것이므로 그냥 Enter 를 눌러주면 된다.

 

처음 이렇게 프로젝트를 생성할 때 나는 설치가 완료되지 않고 계속 이상태로만 진행되길래 무슨 문제인가 싶어 계속 찾아본 결과 글을 쓴 현재 KT망에서 ts-jest 설치가 안되는 현상이 지속되고 있다고 한다...

 

그래서 찾아본 방법은 

1.

$ npm config set registry https://registry.npmjs.cf/

2.

$ nest new nestjs_prac

3.

$ npm config set registry https://registry.npmjs.org/

위의 순서를 통해 문제를 해결할 수 있었는데 찾아보니 mirror 사이트에서 registry를 다운받아서 사용한다는? 의미 이다.

설치를 완료하게 되면 

위와 같은 폴더 구조로 자동생성이 된다. 이때 가장 중요한 src 폴더내의 main.ts 는 절대! 파일이름을 수정하면 안된다.

오늘 내가 해볼 연습은 간단한 게시판 기능을 구현해 보려고 한다.

1. 게시글 조회

2. 게시글 상세조회

3. 게시글 작성

4. 게시글 수정

5. 게시글 삭제

 

우선 이렇게만 정해놓고 DB연결 없이 메모리에서만 작업하도록 만들어 볼 것이다.

그러므로 우선 모듈을 만들어야 하기 때문에

$ nest g mo board

board 라는 이름의 모듈을 생성하기 위해 위와 같이 입력해주면

자동적으로 src폴더내의 board 라는 폴더가 생성됨과 동시에 board.module.ts 파일이 생성되고 app.module.ts 에 자동적으로 임포트해주는 모습을 볼 수 있다.

이처럼 Nest.js 의 장점인 자동으로 임포트해주는 기능들이 있어 개발자들이 많이 좋아하고 사랑하는 프레임워크인것 같다.

모듈을 생성했으니 이젠 컨트롤러와 서비스를 만들 차례이다.

// controller 생성
$ nest g co board

// service 생성
$ nest g s board

나는 이번에 lodash 라는 패키지를 사용할 것이고 lodash는 CommonJS 스펙의 require 를 사용하기 때문에 그대로 사용하면 문제가 발생하여 tsconfig.json 폴더에 "esModuleInterop": true 라는 속성을 추가해 줄 것이다. 

 

이제 기본 뼈대를 잡아 보겠다.

위의 사진처럼 데코레이터를 이용해 @Get @Post @Put or @Patch @Delete 와 같은 메소드를 사용할 수 있고 각 메소드 뒤의 괄호안에 url을 적어주게 되면 express 를 사용할 때와 똑같이 사용할 수 있다.

여기서 한가지 문제가 되는것이 express 에서는 req.body 와 같이 데이터를 받아서 썼는데 Nest.js 에서는 어떻게 쓸 수 있는 것인가? 

해답은 Nest.js 에서는 바로 DTO 라는 것을 사용해야 한다는 것이다. 

DTO가 무엇인지 간단하게 설명하자면 데이터를 전송하기 위해 작성된 객체 라고 볼 수 있다.

우리는 DTO를 사용하기 전에 먼저 패키지를 설치해 줄 것이다.

$ npm i class-validator class-transformer

class-validator 는 유효성 검사를 하기 위한 것이고

class-transformer 는 우리가 :id 라는 파라미터를 받을 때 문자열로 받기 때문에 데이터의 타입을 바꿔주기 위한 것이다.

우선 우리는 dto를 사용하기 위해 생성, 삭제, 수정에 대한 dto 파일을 생성해준다.

create-article.dto.ts

update-article.dto.ts

delete-article.dto.ts

이렇게 DTO 파일을 만들고 작성 해줄 수 있다.

위 코드의 의미는 title, content, password 필드만을 전달하고 각각의 필드에 적용되어야 할 타입을 명시해 준 것이다.

 

오늘은 여기까지 작성하고 나머지에 대한부분은 내일 마저 작성해보도록 하겠다.