NestJs controller에 대해 이해하기

컨트롤러란

HTTP 요청을 처리하고 클라이언트 응답에 반환하는 역할을 한다. 일반적으로 컨트롤러는 특정 URL 엔드포인트에 대한 요청을 처리하며, 이를 위해 데코레이터를 사용하여 연결된 메서드를 식별합니다.

라우팅

컨트롤러의 라우팅을 설정하기위해 @Controller() 데코레이터를 사용합니다

아래의 코드는 /user 엔드포인트에서 Get, Post , Put, Delete를 사용한것이다.

import { Controller, Get, Post, Body, Patch, Param, Delete } from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Post()
  create(@Body() createUserDto: CreateUserDto) {
    return this.userService.create(createUserDto);
  }

  @Get()
  findAll() {
    return this.userService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.userService.findOne(+id);
  }

  @Patch(':id')
  update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {
    return this.userService.update(+id, updateUserDto);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.userService.remove(+id);
  }
}

와일드 카드

@Get('users/:id/*')
  getUser(@Param('id') id: string, @Req() req: Request) {
    return this.userService.findAll();
  }

@get 요청에서 * 부분은 와일드카드로 처리됩니다. 와일드 카드를 사용하면 url 경로를 동적으로 처리할 수 있습니다.

예를들어 /user/123/profile과 /user/123/setting은 같은 url경로로 id변수에 123값을 전달합니다.

상태코드

응답코드에 대한 설정입니다. 상태코드는 201인 post 요청을 제외하고 기본적으로 항상 200입니다. http요청 처리시 응답으로 반환되는 상태코드를 지정하는데 사용합니다.

@Post()
@HttpCode(204)
create() {
  return 'This action adds a new cat';
}

헤더

@header()은 http요청 처리시, 응답으로 반환되는 헤더를 지정하는데 사용합니다. 이 데코레이터는 컨트롤러의 메서드나 예외필터에서 사용할 수 있습니다 @header()은 인자로 헤더 필터 이름과 값으로 구성된 객체를 받습니다.

@Get()
@Header('Cache-Control', 'no-cache') 
  findAll() {
    return this.userService.findAll();
  }

리다이렉션

응답을 특정 url로 리다이렉션 하려면 @redirect() 데코레이터 또는 res.redirect()를 호출하면 됩니다.

 res.redirect('/리다이렉트 경로'); 
 또는
 @Redirect('/destination')

경로 매개변수

@param() 데코레이터를 이용하여 경로 매개변수를 추출할 수 있습니다. @param() 데코레이터는 경로 매개변수의 이름을 인자로 받으며, 해당 이름과 일치하는 경로 매개변수를 추출합니다.

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
      @Get(':id')
      findOne(@Param('id') id: string) {
        console.log(id) 
        return this.userService.findOne(+id);
      }
  }

/user/123 경로에 접근하면 console.log id에 123이 출력됩니다

문자열 추출

@Query() 데코레이터는 http 요청 쿼리 문자열에서 값을 추출하기 위해 사용됩니다. http 요청에서 쿼리는 url 경로 끝에 `?` 문자를 붙이고 `key=value` 형태로 전달됩니다.  @Query()데코레이터는 이러한 쿼리 문자열에서 특정키에 해당하는 value를 추출하여 컨트롤러의 메서드 인자로 전달합니다.

@Controller('users')
export class UsersController {
  @Get()
  findAll(
    @Query('id') id: string,
    @Query('name') name: string,
  ) {
    return `This action returns a list of users (id: ${id}, name: ${name})`;
  }

페이로드 요청

페이로드(payload)는 네트워크를 통해 전송되는 데이터의 내용을 의미합니다. http 요청에서 페이로드는 요청 바디에 포함됩니다. @Body 데코레이터를 이용하여 요청 바디에서 데이터를 추출할 수 있습니다. 먼저 DTO createUserDto 스키마를 정의해야 합니다. class를 사용하여 dto를 정의 하도록 합시다.

export class CreateUserDto {
  name: string;
  age: number;
  }

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
    @Post()
     create(@Body() createUserDto: CreateUserDto) {
     console.log(data);
     return 'User created';
  }
 }

POST 요청을 보낼 때 요청 바디에 { "name": "John Doe", "age": 30 } 데이터를 담아 /users 경로에 보내면, createUser() 메서드에서 해당 데이터를 출력하고 'User created' 메시지를 반환합니다. 

응답객체 주입

@res()는 응답 객체를 가져와서 직접 조작하여 http응답을 구성할 수 있습니다

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

@Controller('user')
export class UserController {
  @Get()
  findAll(@Res() res: Response) {
    res.send('This action returns all user');
  }
}

코드에서 @Get() 데코레이터를 사용하여 GET 요청 핸들러를 정의하였습니다. findAll() 메서드에서 @Res() 데코레이터를 이용하여 Response 객체를 가져왔습니다. 그리고 해당 객체의 send() 메서드를 이용하여 "This action returns all cats"라는 문자열을 반환하여 HTTP 응답을 생성하였습니다. 이렇게 생성된 응답은 클라이언트에게 전달됩니다.

컨트롤러 사용법

위에서 만들어준 컨트롤러를 사용하기 위해서는 아래의 코드를 따라야합니다.

user 모듈에서 user컨트롤러를 등록해주어 다른 모듈에서 해당 모듈을 import하여 사용할 수 있게 합니다.

import { Module } from '@nestjs/common';
import { UsersController } from './users.controller';
import { UsersService } from './users.service';

@Module({
  controllers: [UsersController],
  providers: [UsersService],
})
export class UsersModule {}

최상위 모듈인 app모듈에 user모듈을 import 해줍니다.

@Module({
  imports: [UserModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }