Nest JS 프레임워크 공부하기 (Node.js) - 1

npm install -g @nest/cli
nest new nestJS

시작에 앞서 nest/cli를 npm을 통해 설치를 하고

nest 명령어를 통해 새 프로젝트를 생성한다.

 

npm과 yarn중에 편한 것을 고르면 된다. 필자는 npm을 사용하였다. 처음에 패키지를 시작하기 위해 설치를 하는데 시간이 걸리니까 잠깐 기다리면 알아서 구조와 필요한 dependency를 설치해준다.

만들어진 nest-js 디렉토리를 vscode로 열고 src 파일을 보면 코드 구조는 다음과 같으며, 각각의 설명이 있다.

src
ㄴapp.controller.spec.ts
   app.controller.ts
   app.module.ts
   app.service.ts
   main.ts

app.controller.ts	하나의 라우트가 있는 기본 컨트롤러.
app.controller.spec.ts	컨트롤러를 위한 유닛 테스트
app.module.ts	애플리케이션의 루트 모듈
app.service.ts	단일 메소드를 사용하는 기본 서비스
main.ts	핵심기능 NestFactory를 사용하여 Nest 애플리케이션 인스턴스를 생성하는 애플리케이션의 엔트리 파일입니다.

 

cd nest-JS
npm run start:dev

package.json script에 있는 명령어중 start:dev(개발 서버)로 시작하면, nodemon과 같이 바뀐 내용이 있는 경우 자동으로 서버를 다시 시작해주는 기능으로 `localhost:3000`에 가면 Hello World가 당신을 맞아줄 것이다.

Hello World!

 

결국 서버는 (socket서버와 같이 실시간 통신도 있지만) API로 CRUD만 잘해준다면 제 기능을 하는 것이기 때문에, 이를 구현하는 방식에 대해 알아보자

 

Express.js에서 Router의 역할을 해주는 것은 Controller이다.

이를 우리는 nest CLI의 generate 기능을 통해 강력하고 간편하게 controller를 생성해 보자

 

먼저, 기존에 src에 존재하는 main.ts와 app.module.ts를 제외한 나머지 파일을 삭제한다. 또한 app.module.ts를 다음과 같이 controllers와 providers의 내용을 지워 비워준다.

 

이후, 터미널에서 nest CLI 기능을 controller를 생성한다.

nest generate controller
혹은
nest g co

 

생성하고 싶은 이름을 선택하자. 필자는 movies를 사용하려고 한다. movies를 입력하고 Enter 하면, src 밑에 movies 디렉토리가 생기고 movies 디렉토리 안에 controller 파일이 생성된 것을 볼 수 있다. 

 

src
ㄴmovies
   ㄴ movies.controller.spec.ts
   ㄴ movies.controller.ts

 

spec 파일은 나중에 테스트를 하기위한 코드이므로 일단은 삭제한다.

movies.controller.ts 파일에 다음과 같이 코드를 입력하고 일단 localhost:3000/movies에 들어가본다.

컨트롤러를 만들기위해서 Nest JS는 데코레이터를 사용하는데, @~~~하고 클래스나 함수 바로위에 붙어 있는 것을 데코레이터 라고 부른다. 

 

@Controller("생성한 subRoute")를 통해 movies 아래로 라우팅을 형성한 것이며, 

@Get은 기본적인 / routes를 GET 방식으로 요청하는 것이다. 

 

GET을 했으면, 나머지 CRUD도 한번 사용해보자 

데코레이터를 통해 HTTP 통신 방식을 적어주고,

 

Param이 넘어오는 경우 데코레이터 안에 :id 하고 @Param을 통해 id를 받아와준다.

데코레이터 안에서 선언한 id는 같아야 하지만 함수 안에서 사용될 변수명은 같지 않아도 된다.

 

Post의 경우 Body를 통해 JSON을 받아와 주어야 하기 때문에 @Body를 통해 받아와 준다.

Typescript이기 이전에 Javascript이기 때문에 일단은 따로 타입을 선언하지 않고, 불러와서 console.log에 찍어본다.

 

필자는 Window10을 사용하고 Chrome을 사용하기에 Extension에 Postman을 받아 API를 테스트 한다.

이때 주의해야할 점이 있는데, Raw에 JSON 형태로 보냈을 때 빈 객체가 찍히면,

x-www-form-urlencoded 형식으로 보내는 것을 시도하면 아마 처리 될 것으로 예상된다.

 

GET방식에서 Query문의 경우 @Query를 통해 가져와서 변수를 선언하고 사용한다.

추가적인 기능들은 공식 Doc을 자세히 보는 것을 추천한다. 

 

오늘은 Nest.js를 setting하고 Routing을 나누는 법에 대해 적어보았다.

확실히 generator 가 있으니 간편하게 되는 것이 놀라웠으며,

처음엔 거부감이 좀 있긴 했지만, 익숙해지기만하면 확실히 Nest.js가 Express보다 편하겠다고 생각했다.

 

다음엔 DB에서 실질적으로 가져와야하는 기능을 구현하기 위해 Sevice를 연결하는 법에 대해 적어보도록 하겠다.

(학교 공부 안하고 확실히 기술스택을 배우는게 재미는 있는 것 같다...)

 

[참조 : https://nomadcoders.co/nestjs-fundamentals/lobby]

[참조 : https://docs.nestjs.kr/controllers]