<div id="readability-page-1" class="page"><div>
 <a href="/m/category/BACKEND/NODEJS">BACKEND/NODEJS</a><h3>[nestjs] ClassSerializerInterceptor 전체 적용하기</h3>
 </div><cite>나를찾는아이</cite>
 2022. 8. 10. 11:17
 <div>
 웹어플리케이션은 요청에 대한 응답결과를 client에 object 또는 object의 array 형태로 전달합니다

그런데 이러한 값을 뭔가 특정 룰에 의해 공통적으로 관리하고 싶습니다


예를 들면 password같은 결코 response 되어야 하지 말아야할 값을 숨겨야하기도 하고

특정값을 어떤 연산에 의해서 조작을 하여 리턴을 하거나,

조합을 통해 만든 특정값을 추가적으로 리턴하고 싶기도 하죠

real world에서는 이러한 케이스가 정말 많습니다


이러한 행위를 이러한 필요가 발생할때마다 반복적으로 코드를 작성하지 않고

통합적으로 관리할수 있다면 참 좋겠죠?

 nestjs는 리턴되는 response object 를 관리할수 있는 라이프사이클을 가지고 있는데요

interceptor가 바로 좋은 위치입니다

ClassSerializerInterceptor 는 이러한 역할을 도와줄 좋은 nestjs 빌트인 기능입니다

response 되는 entity를 감지하여 해당 entity에 데이터를 변경하여 최종적으로 client에게 response 합니다


UserEntity가 있다고 가정합니다

그 안에는 민감한 password 필드가 있는데 이 값은 절대로 유저에게 노출되어서는 안됩니다

이때 해당 필드위에 @Exclude 를 사용하세요

이 값은 response시에 노출되지 않게됩니다

<pre id="code_1660096957580" data-ke-language="typescript" data-ke-type="codeblock"><code>import { Exclude } from 'class-transformer';

export class UserEntity {
 id: number;
 firstName: string;
 lastName: string;

 @Exclude()
 password: string;

 constructor(partial: Partial&lt;UserEntity&gt;) {
 Object.assign(this, partial);
 }
}</code></pre>

Entity의 기존 필드에는 존재하지 않지만&nbsp;

firstName과 lastName을 합친 fullName이라는 값을 추가적으로 리턴하고 싶습니다

그럴땐 @Expose() 사용합니다

<pre id="code_1660096991916" data-ke-language="typescript" data-ke-type="codeblock"><code>@Expose()
get fullName(): string {
 return `${this.firstName} ${this.lastName}`;
}</code></pre>

그리고 내가 원하는 전체 컨트롤러 또는 개별 라우터에 ClassSerializerInterceptor 인터셉터를 적용합니다
<pre id="code_1660096976588" data-ke-language="typescript" data-ke-type="codeblock"><code>@UseInterceptors(ClassSerializerInterceptor)
@Get()
findOne(): UserEntity {
 return new UserEntity({
 id: 1,
 firstName: 'Kamil',
 lastName: 'Mysliwiec',
 password: 'password',
 });
}</code></pre>

이때의 결과값은

<pre id="code_1660097272926" data-ke-language="typescript" data-ke-type="codeblock"><code>{
 "id" : 1,
 "firstName" : "Kamil",
 "lastName" : "Mysliwiec",
 "fullName" : "Kamil Mysliwiec"
}</code></pre>

이렇게 나오게 될거예요

참 좋죠?


<a href="https://docs.nestjs.com/techniques/serialization" target="_blank" rel="noopener">https://docs.nestjs.com/techniques/serialization</a>
<figure id="og_1660096455940" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Documentation | NestJS - A progressive Node.js framework" data-og-description="Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac" data-og-host="docs.nestjs.com" data-og-source-url="https://docs.nestjs.com/techniques/serialization" data-og-url="https://docs.nestjs.com" data-og-image="https://scrap.kakaocdn.net/dn/bSAGI4/hyPotY3wZu/xA9ZKlSzke3msIu7KhTSQk/img.png?width=820&amp;height=429&amp;face=0_0_820_429"><a href="https://docs.nestjs.com/techniques/serialization" target="_blank" rel="noopener" data-source-url="https://docs.nestjs.com/techniques/serialization">

<div>
Documentation | NestJS - A progressive Node.js framework
Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac
docs.nestjs.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bSAGI4/hyPotY3wZu/xA9ZKlSzke3msIu7KhTSQk/img.png?width=820&amp;height=429&amp;face=0_0_820_429"></figure>

이러한 인터셉터는 컨트롤러나 라우터 단위로도 설정을 할수 있고

앱 전체에 대해서 global로 적용이 가능합니다

<pre id="code_1660096404689" data-ke-language="typescript" data-ke-type="codeblock"><code>async function bootstrap() {
 const app = await NestFactory.create(AppModule);
 app.useGlobalInterceptors(new ClassSerializerInterceptor(app.get(Reflector)));
 await app.listen(3000);
}
bootstrap();</code></pre>



 
 
 </div></div>

나를 찾는 아이

Kyoung min, Kim

웹어플리케이션은 요청에 대한 응답결과를 client에 object 또는 object의 array 형태로 전달합니다
 
그런데 이러한 값을 뭔가 특정 룰에 의해 공통적으로 관리하고 싶습니다
 
 
예를 들면 password같은 결코 response 되어야 하지 말아야할 값을 숨겨야하기도 하고
 
특정값을 어떤 연산에 의해서 조작을 하여 리턴을 하거나,
 
조합을 통해 만든 특정값을 추가적으로 리턴하고 싶기도 하죠
 
real world에서는 이러한 케이스가 정말 많습니다
 
 
이러한 행위를 이러한 필요가 발생할때마다 반복적으로 코드를 작성하지 않고
 
통합적으로 관리할수 있다면 참 좋겠죠?
 
nestjs는 리턴되는 response object 를 관리할수 있는 라이프사이클을 가지고 있는데요
 
interceptor가 바로 좋은 위치입니다
 
ClassSerializerInterceptor 는 이러한 역할을 도와줄 좋은 nestjs 빌트인 기능입니다
 
response 되는 entity를 감지하여 해당 entity에 데이터를 변경하여 최종적으로 client에게 response 합니다
 
 
UserEntity가 있다고 가정합니다
 
그 안에는 민감한 password 필드가 있는데 이 값은 절대로 유저에게 노출되어서는 안됩니다
 
이때 해당 필드위에 @Exclude 를 사용하세요
 
이 값은 response시에 노출되지 않게됩니다
 
import { Exclude } from 'class-transformer';
export class UserEntity {
 id: number;
 firstName: string;
 lastName: string;
 @Exclude()
 password: string;
 constructor(partial: Partial<UserEntity>) {
 Object.assign(this, partial);
 }
}
 
Entity의 기존 필드에는 존재하지 않지만 
 
firstName과 lastName을 합친 fullName이라는 값을 추가적으로 리턴하고 싶습니다
 
그럴땐 @Expose() 사용합니다
 
@Expose()
get fullName(): string {
 return `${this.firstName} ${this.lastName}`;
}
 
그리고 내가 원하는 전체 컨트롤러 또는 개별 라우터에 ClassSerializerInterceptor 인터셉터를 적용합니다
@UseInterceptors(ClassSerializerInterceptor)
@Get()
findOne(): UserEntity {
 return new UserEntity({
 id: 1,
 firstName: 'Kamil',
 lastName: 'Mysliwiec',
 password: 'password',
 });
}
 
이때의 결과값은
 
{
 "id" : 1,
 "firstName" : "Kamil",
 "lastName" : "Mysliwiec",
 "fullName" : "Kamil Mysliwiec"
}
 
이렇게 나오게 될거예요
 
참 좋죠?
 
 
https://docs.nestjs.com/techniques/serialization
 
이러한 인터셉터는 컨트롤러나 라우터 단위로도 설정을 할수 있고
 
앱 전체에 대해서 global로 적용이 가능합니다
 
async function bootstrap() {
 const app = await NestFactory.create(AppModule);
 app.useGlobalInterceptors(new ClassSerializerInterceptor(app.get(Reflector)));
 await app.listen(3000);
}
bootstrap();

[nestjs] ClassSerializerInterceptor 전체 적용하기

댓글