[ NestJS ] Interceptor와 AOP 패턴에 대해서 알아보자

🌈 프로그래밍/Nest JS

[ NestJS ] Interceptor와 AOP 패턴에 대해서 알아보자

수구리 2022. 3. 22. 17:44

이번 포스팅에서는 Nest에서 Interceptor에 대해서 알아보려고 한다.

그전에 AOP와도 연관이 있으니 먼저 AOP 패턴에 대해서 알아보려고 한다.

왜냐하면 Nest에서 Intercepto가 AOP(Aspect-oriented programming)에서 영감을 받았기 때문이다.

AOP(Aspect-oriented programming) 란?

우리말로 관점(측면) 지향 프로그래밍이라고 한다.

목적으로는 모듈성을 높이는 것을 목표로 하는 프로그래밍 패러다임이다.

여기서 말하는 관점은 교차 관심사 혹은 수평적 관심사라고 하는데 말이 너무 어렵다.

아래의 그림을 보면서 추가적인 설명을 해보려고 한다.

위의 그림을 보면 핵심기능 3가지가 있고 이 핵심 기능이 애플리케이션의 각각의 컨트롤러라고 생각해보자.

각각의 컨트롤러는 저마다 수행하는 기능이 있지만 공통적으로 수행하는 기능도 존재한다.

예를 들어 클라이언트가 서버에게 어떤 요청을 보냈는지에 대한 정보를 출력하는 Logging기능이 각 컨트롤러에 공통적으로 존재한다고 하면, 이 기능을 수평적으로 묶어 모듈화를 한 것이 AOP 패턴이라고 생각하면 이해하기가 쉽다.

물론 로깅하는 기능은 미들웨어에서도 충분히 구현이 가능하지만, 인터셉터를 이용해서도 구현이 가능하다.

이후에 차이점에 대해서 알아볼 예정이다. 우선, 공식문서에 나와있는 인터셉터의 예제를 살펴보도록 하자.

logging.interceptor.ts

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    console.log('Before...');

    const now = Date.now();
    return next
      .handle()
      .pipe(
        tap(() => console.log(`After... ${Date.now() - now}ms`)),
      );
  }
}

우선 위의 Before 부분은 컨트롤러가 실행되어지기 전에 먼저 수행되는 부분이다.

그리고 After .. 부분은 컨트롤러에서 수행되고 난 뒤 수행되는 부분이다.

여기서 Interceptor라는 이름이 왜 지어졌는지 알 수 있는 부분인것 같다.

컨트롤러를 두고 전후로 간섭해 특정 기능을 수행하는 녀석이라고 보면 될 것 같다.

이전 파이프 디자인 패턴에서 만들었던 get 요청을 사용해서 위의 인터셉터가 어떻게 수행되는지 실행 결과를 보도록 하자.

위의 예시를 가지고 살짝 변형하여 요청이 성공적으로 수행되었는지 확인하는 인터셉터를 먼저 만들어보자.

common/interceptors/success.interceptor.ts

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { tap, map } from 'rxjs/operators';

@Injectable()
export class SuccessInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    console.log('Before...'); // pre-controller

    const now = Date.now();
    return next
      .handle()
      .pipe(
        tap(() => console.log(`After... ${Date.now() - now}ms`)), // post-request
        map((data)=> ({
          success: true,
          data,
        })) // 여기서 data는 컨트롤러를 거친 후 응답(response)에 대한 data
      );
  }
}

// 공통된 기능을 수행하는 부분을 AOP 관점으로 모듈화를 시킨 것이다.
// 미들웨어와 인터셉터가 다른점은 실행 순서가 다르다는 점이다.
// 위의 인터셉터는 exception filter처럼 성공했을 때 데이터를 가공하는 인터셉터이다

Interceptor, middleware, pipe와 같은 것들은 각 컨트롤러에서 공통적으로 사용되어지기 때문에 common이라는 폴더를 두고

아래와 같이 폴더 구조를 바꿔주었다.

그리고 만든 interceptor를 cats controller 상위에 아래와 같이 의존성 주입(DI)를 시켜준다.

인터셉터는 인터페이스 @Injectable()를 구현하는 데코레이터로 주석이 달린 클래스 이므로 DI를 통해서 사용할 수 있다.

@Controller('cats')
@UseInterceptors(SuccessInterceptor) // Interceptor DI
export class CatsController {
	constructor(
		private readonly catsService: CatsService,
		private readonly authService: AuthService
	) { }

	// 생략


	@Get(':id')
	getOneCat(@Param('id', ParseIntPipe, PositiveIntPipe) param: number) {
		console.log('hello controller')
		return { cats:'get one cat api' };
	}
    	// 생략

}

위의 요청을 테스트 해보도록 하자.

get 요청으로 세팅하고 cats 컨트롤러이므로 cats와 파라미터로 id값이 필요하므로 임의로 123을 넣어서 요청을 보내보자.