개발자가 되고 싶은 개발자

class-transformer란 무엇이고 왜 사용할까? 본문

Dev/JavaScript & TypeScript

class-transformer란 무엇이고 왜 사용할까?

Fullth 2024. 8. 15. 15:10
Photo by Mudit Agarwal on unsplash

Preface

동료분이 노드 관련해서 질문주셔서 문제점을 같이 찾아보다가 class-validator의 옵션이 원인이었고, 몰랐던 옵션에 대해 알게되었습니다.
해당 옵션만 정리하려다가 TypeStack의 라이브러리를 같이 정리하고자 하여 class-transformer 대한 기본적인 내용들을 우선 정리합니다.

TypeStack

노드와 브라우저를 위한 데코레이터 기반의 프레임워크와 라이브러리를 개발하는 Git Organization입니다.

Decorator based frameworks and libraries for Node and browser.

TypeStack

Decorator based frameworks and libraries for Node and browser. - TypeStack

github.com

Node.js 환경에서 일반적으로 많이 사용하게 되는 class-validator, class-transformer 모두 TypeStack에 속하는 프로젝트입니다.

typestack/class-transformer

간단한 예시와 왜 필요한지에 대해서 알아보겠습니다.

GitHub - typestack/class-transformer: Decorator-based transformation, serialization, and deserialization between objects and cla

Decorator-based transformation, serialization, and deserialization between objects and classes. - GitHub - typestack/class-transformer: Decorator-based transformation, serialization, and deseriali...

github.com

import { plainToInstance } from 'class-transformer';

// User 클래스
class User {
  name: string
}

// 클라이언트로부터 수신하였다고 가정
let clientJsonData = {
  name: “fullth”,
}

// to convert user plain object a single user. also supports arrays
// 플레인 유저 객체를 단일 유저 객체로 변환합니다. 물론 배열도 지원합니다. (공식문서의 주석입니다.)
let users = plainToInstance(User, clientJsonData);

api 통신을 통해서 클라이언트로부터 json 데이터를 전달받습니다.
전달받은 데이터와 전달받고자 했던 타입이 동일하다고 해서 클래스의 인스턴스가 전달되는 것이 아니라, 리터럴 객체 즉, 문자열이 전달됩니다.

인스턴스화 시키지 않는다면 타입스크립트에서는 곧바로 user.name에 접근했을 때 해당 변수의 타입이 string 타입인지 알 수 없고 any를 추론하게 됩니다.

해당 함수를 가공시키는 부분도 클래스 내부에 응집시킬 수 없고, 외부에서 관리해야하는 치명적인 단점이 생기게 됩니다.

Spring의 @RequestBody

스프링을 했을 당시에는 이런 부분에 대해서 신경쓴 적이 없었었는데 문득 어떻게 처리되고 있는지 궁금해져서 동료분께 물어봤습니다.
해당 어노테이션에 대한 답변을 들었고, 예전에 공부했던게 새록새록 기억이 났습니다.

스프링으로 시작해서 당연하게 사용하며 신경쓰지 않았던 부분들이 Express.js와 비교되면서 프레임워크가 구성되어 있으면 이렇게 편했구나라는 생각과 더불어 동시에
기초가 부족한 저에게 근본적인 원리에 대해서 고민하고 찾아보고 스프링과 비교도 할 수 있는 계기가 되어 노드로 개발하게된 것에 대한 장점을 하나 찾은 것도 같습니다.

언어나 프레임워크에 해당하는 문제가 아니라 통신이라는 과정을 각각의 환경에서 어떻게 처리하는지에 대한 방식이 다른 것이기 때문에,
이런 근본적인 접근을 할 수 있어야하고 각 방식에 대해서 빠르게 습득하는 것이 중요하다는 생각이 들었습니다.

@PostMapping("/request")
public ResponseEntity postController(
  @RequestBody LoginForm loginForm) {
 
    exampleService.fakeAuthenticate(loginForm);
    return ResponseEntity.ok(HttpStatus.OK);
}

Ref

향로님의 블로그를 참고하였습니다.
기본적인 설명은 알고있는 부분이었으나, 개별적으로 호출하기 불편한 점을 아래 포스팅을 참고할 수 있을 것 같습니다.

TypeScript 환경에서 class-transformer 적극적으로 사용하기

요즘 같이 분산 환경이 적극적으로 도입 되고 있는 시기에는 꼭 프론트엔드가 아니더라도 백엔드 환경에서도 외부의 HTTP API를 호출하는 일은 당연한 일입니다. 그래서 HTTP API (저는 Rest API라는

jojoldu.tistory.com