[NestJS] 2. Rest API 생성을 위한 본격 Controller 설정해보기

NestJS의 기본 구성을 이해했으니, 이제 직접 API를 구축해볼 차례다.

이 글에서는 ✨controller 설정 내용✨을 담아보려 한다.

 

아예 처음부터 controller와 service 코드를 작성해볼 것이므로 app.controller.ts, app.service.ts 파일은 삭제하고,

app.module.ts의 @Module 내 controllers와 providers는 배열 내 값을 초기화한 후 실습을 시작한다.

 

 

🐯 Controller 파일을 생성해보자

터미널에 npx @nestjs/cli 명령어를 입력하면 다음과 같이 생성 가능한 목록들이 쭈르륵 나온다.

이중 먼저 생성할 것은 controller이므로 'co' option을 적용한 아래 명령어를 입력한다.

이전 글에 작성했지만, nest g co 명령어로도 생성 가능하다!

npx @nestjs/cli g co

그럼 이제 프로젝트명을 물어본다.

영화 정보를 받아오는 API를 구축할 것이므로 프로젝트명은 movies-api로 해줬다.

 

그럼 src 폴더 아래에 movies-api 폴더가, 그리고 movies-api 폴더 아래엔 movies-api.controller.ts 파일이 생성된다!

아래 tree 구조를 통해 src 폴더 구조를 확인할 수 있다 🙂

service까지 생성한 후에 캡쳐한 tree 구조다.. 그러니까 네모 박스만 봐주기🌝

app.module.ts의 controllers에 MoviesApiController가 생성된 것을 확인할 수 있고,

//-- app.module.ts --

@Module({
  imports: [],
  controllers: [MoviesApiController],
  providers: [],
})

controller 파일에는 Controller Decorator,

루트 url로 Get request를 보내는 Get Decorator가 생성된 것을 볼 수 있다.

이전 글의 내용을 복습할 겸 되짚어보자면, @Get은 Express에서 app.get('/')로 라우팅하는 것과 같은 기능을 한다. 

//-- movies-api.controller.ts --

import { Controller, Get } from '@nestjs/common';

@Controller('movies-api')
export class MoviesApiController {
  @Get()
  getAll(): string {
      return 'This will return all movies';
  }
}

 

어라 근데 localhost:3000 접속 시 404 Not Found 화면이 뜬다!

왜 안 뜰까?! 그 이유는.. 바로 공개!

Controller 코드를 다시 살펴보면, @Controller('movies-api')라 설정된 것을 볼 수 있을 것이다.

이는 controller가 movies-api url의 entry point를 control하고 있다는 것을 의미하므로

url을 localhost:3000/movies-api로 변경해줘야 정상 접속할 수 있다.

그럼 이제 제대로 getAll 함수값이 반환된 것을 확인할 수 있다.

controller가 라우팅하고자 하는 url로 변경해주면 정상 접속 가능하다.

 

🐯 다양한 Decorator를 활용해보자

Get 외에도 익숙한 HTTP 메소드들과 여러 Decorator들이 있는데 지금부터는 NestJS에서 어떻게 구현하는지 살펴볼 것이다. 이번 글은 Decorator 경험에 초점이 맞춰져 있기 때문에 API request가 제대로 이뤄졌다는 사실만 확인할 뿐 실질적인 기능은 하지 않는다. (데이터를 실제로 받아오는 테스트는 Service 설정 단계에서 수행할 것이다!)

 

그리고 지금까지는 웹 브라우저에 url을 입력했지만,

여기서부터는 Postman으로 Rest API 정상 호출 여부를 확인할 것이다.

 

1️⃣ Param Decorator

영화 정보를 ID 별로 받아오고 싶을 때, Param Decorator를 활용할 수 있다.

@Get("/:id")
getOne(@Param('id') movieID: string) {
    return `This will return one movie with the id: ${movieID}`;
}

 

NestJS는 request를 보내야 필요한 정보를 제공해준다.

movies-api 뒤의 id값을 movieID로 받아오기 위해 getOne 함수에서 id를 parameter로 받아오는 request를 보내고 url의 id값을 얻은 결과는 다음과 같다.

url의 id값을 정상적으로 받아오는 것을 확인할 수 있다.

 

2️⃣ Post & Delete Decorator

익숙한 HTTP 메소드인 POST와 DELETE Decorator를 생성해볼 것이다.

 

@Post()
create() {
    return 'This will create a movie';
}

@Delete("/:id")
remove(@Param("id") movieID: string) {
    return `This will delete a movie with the id: ${movieID}`;
}

Post와 Delete Decorator 생성을 위한 코드이다.

HTTP 응답 Status가 201 Created라 뜬 것을 볼 수 있는데, 이는 서버가 클라이언트의 요청을 정상적으로 처리한 후, 서버가 새 리소스를 저장했다는 것을 의미한다.

POST request에 대한 201 응답(왼) / DELETE request에 대한 201 응답(오)

 

3️⃣ Update Decorator

정보를 수정하고 업데이트하기 위한 메소드는 PUT과 PATCH, 두 가지가 있는데

PUT은 모든 리소스를 업데이트하고, PATCH는 일부 리소스를 업데이트한다는 차이가 있다.

 

사실 지금은 상관없지만 다음과 같이 PATCH Decorator를 활용할 수 있다.

@Patch("/:id")
path(@Param("id") movieID: string) {
    return `This will patch a movie with the id: ${movieID}`;
}

영화정보를 수정할 때, ID별로 수정하기 위해 getOne 함수와 같이, url의 id를 parameter로 받아오기 위한 request를 보내 movieID를 받아올 수 있다.

PATCH request에 대한 200 응답

 

여기까지 많지는 않지만, 그래도 기본적인 Decorator를 활용해보며 Controller의 기능을 이해해봤다.

이 다음에는 Route를 설정하는 과정을 정리해볼 것이다.

그럼 오늘은 여기까지! 🌝