[NestJS] 3. Controller 더 알아보기

저번 글에서 몇 가지 Decorator의 기능을 살펴봤는데

그 연장선으로 이번엔 Body request를 보내는 Body Decorator 구현으로 글을 시작해보려 한다:)

 

🐯 Body Decorator로 request를 보내보자!

Body에 JSON 형식으로 보낼 영화 정보를 작성하여 request 보내려 한다.

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

@Post()
create(@Body() movieData: string) {
  return movieData;
}

위 Body Decorator는 movieData의 request body를 가져오는 역할을 한다.

이때 Body component를 import 해줘야 하는데 Nest는 Express와 달리 자동 생성된다는 편리함이 있다.

 

Post의 request body를 설정해줬다면, Patch 또한 Body Decorator를 추가해줘야 한다.

Patch의 경우, 영화 정보를 id별로 수정하고자 하는 것이므로 Param Decorator로 id를 받아와야 하고,

수정하고자 하는 정보를 담은 request body를 updateData에 저장한다.

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

@Patch("/:id")
path(@Param("id") movieID: string, @Body() updateData) {
  return {
    updatedMovie: movieID, 
    ...updateData,
  }
}

 

 

path 함수는 movieID와 업데이트한 데이터 객체를 반환하는데, 응답 결과를 보면 흥미로운 사실을 발견할 수 있다 😲

PATCH request & 200 server response

바로 response가 JSON 형식이라는 것이다! ..나만 놀랍나!

Express로 개발할 땐, JSON 형식의 값을 받기 위해 stringify와 parse 과정을 거쳐 얻었는데 Nest에서는 매우 간편하게 받아올 수 있다.

이외에도 Nest는 개발자에게 매우 편리한 기능을 많이 제공하는데 앞으로 하나씩 알아가면 재미있을 것 같다 🙂

 

 

🐯 영화 정보를 받아오는 Query String을 날려보자

그전에 query string에 대해 아주아주 간단히 정리해보고 넘어가자면 🌝

query string은 사용자가 입력 데이터를 전달하는 방법의 하나로, url 뒤에 덧붙인 데이터를 파라미터로 넘겨 서버 측에 전달하는 것이다.

https://camezii.tistory.com/entry/NestJS-2-Rest-API-생성을-위한-본격-Controller-설정해보기?category=974441

위 url은 바로 이전 NestJS 글의 url 주소인데 '?' 뒤에 제공된 데이터 부분이 바로 query string이다.

 

그럼 이제 search 페이지에서 영화 개봉연도 데이터를 query string으로 날려볼 것이다.

url은 http://localhost:3000/movies-api/search?year= 과 같고, 

이를 구현하기 위해서 다음과 같이 Query Decorator를 활용한다.

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

@Get("search")
search(@Query("year") searchingYear: string) {
  return `We are searching for a movie made after: ${searchingYear}`;
}

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

 

 

query string으로 받은 year값을 searchingYear에 저장하여 return 해주면 다음과 같이 정상 출력된다.

GET request & 200 response

 

이때 주의해야 할 것이 있다❗️

위 코드를 보면 search 페이지에 대한 Get Decorator를 id에 대한 Get Decorator보다 위에 작성해줬는데,

만약 이 순서가 바뀌어 @Get("/:id")가 먼저 등장하면 search를 id로 오판단하여 의도한 대로 값을 받아오지 못한다.

year값이 아닌 search로 잘못 불러온 것을 확인할 수 있다.

그래서 id에 대한 GET request 위에서 다른 GET request를 보내야 한다.

이는 search 뿐만 아니라 다른 GET request 또한 마찬가지이고, Express 또한 동일하다.

---

여기까지가 Decorator에 대한 소개이고, 다음부터는 정말 본격적으로 Service 파일을 설정할 것이다.

Controller와 Service의 연결, 그리고 NestJS에서 분리한 둘의 기능을 경험할 수 있다.

Service의 등장과 함께 많은 정보가 머릿속에 우다다 들어왔지만, 매우 재미있으니 다음 글도 열심히 정리해봐야겠다.

 

그럼 오늘은 여기까지 🌚