TypeScript + NodeJS(express) + MongoDB 조합으로 API 서버 만들때 주의할 점

 

들어서며

출처: https://medium.com/@jentchai/typescript-my-first-impressions-71970d1411e6

NodeJS를 쓰는 개발자들은 처음엔 유연한 JavaScript로 시작했다가 어느순간 TypeScript으로 넘어가게 되고 고마움을 느낍니다.

저도 개발을 하면 할수록 TypeScript의 필요성을 느끼고 있고 잘 이용할려고 합니다.

하지만 TypeScript로 API 서버를 만들면서 의아했던 부분들이 있었습니다.

 

 

의문

1. 상황

req.body로 클라이언트로부터 서버로 데이터를 전달 받았을 때 type 오류가 발생하지 않습니다.

제가 생각했을 때 아래 두가지 상황에서 분명 오류가 발생하고 데이터가 저장되지 않아야 하는데 그렇지 않았습니다.

 

2-1. Interface에 정의한 요소가 아님에도 오류가 발생하지 않는다.

// interface.ts
export interface UserInterface {
  name: string;

  age: number;

  address: string;
}

// app.ts
const userData: UserInterface = req.body;

위와 같이 제가 테스트를 하기 위해 UserInterface을 정의하였습니다.

그리고 나서 app.ts에서 req.body로 정보를 받았을 때 type을 UserInterface로 명시를 하였습니다.

그렇다면 제가 UserInterface에 정의하지 않은 'phonNumber'라는 요소를 넣으면 어떻게 될까요?

 

코드 상이었으면 위와 같이 오류라는 것을 알려줍니다.

이게 바로 JavaScript 개발자들이 TypeScript 언어를 쓰는 이유죠.

 

이번에는 req.body로 phonNumber을 넣어서 데이터를 보내보도록 하겠습니다.

postman을 이용한 결과 아무 에러 발생도 되지 않고 잘 처리되는 것을 확인하게 되었습니다.

코드 상처럼 Interface에 정의하지 않았다고 알려주길 바랬는데 말이죠.

 

 

2-2. Interface에 정의한 type이 아님에도 데이터가 잘 저장된다.

이번에는 Interface에 정의된 요소이지만 type을 다르게 해서 데이터에 저장이 되지는 확인해보도록 하겠습니다.

 

코드로 입력할 경우에는 바로 TypeScript가 친절하게 Interface에 정의한 type과 다르다고 알려줍니다.

하지만 이번에도 req.body로 가져온 데이터의 경우 아무런 에러 표시도 없이 데이터에 잘 저장되는 현상까지 발견됩니다.

 

 

 

3. 문제점

이런 의문들이 무슨 문제라도 되냐고 물어보실 수 있지만 API 서버에서는 상당히 위험한 상황입니다.

서버에서는 데이터와 연결되어져 있기 때문에 타입이 뚫리게 되면 향후 문제가 커지게 됩니다.

그렇다고 오로지 프론트엔드에서 타입 검사를 잘하여 데이터를 보내주길 바래서는 안됩니다.

 

 

 

원인 및 해결법

req.body에 커서를 올려보면 눈에 띄는 한가지가 보입니다.

바로 .body: any 입니다!

 

body의 값이 any로 잡혀 있기 때문에 교집합으로 인해 모든 값과 type이 들어갈 수 있었던 것입니다.

그래서 수동으로 뚫린 타입 가드를 대응해줄 로직을 짜줘야 합니다.

(2번째의 경우 mongoDB 대신 MySql 쓰면 대응할 수 있다) 

 

즉, req를 받는 타이밍에서 전부 체크를 해줘야지 안전하다고 할 수 있습니다!

 

 

 

마무리하며

이렇게 의아함을 정리하니 TypeScript가 모두 다 해결해 줄 것이라 믿었던 저의 안일함에 반성하게 되었습니다.

앞으로는 API를 만들때 더욱 예외처리를 빡세게 해주어야 겠다고 생각하게 되었습니다.

 

사수님과 이와 관련해서 이야기해본 결과 공유해드리면 좋을 글이 있어 참고 사항으로 넣었습니다.

토스에서도 이와 관련된 사항으로 1년전에 포스팅한 글이 있더라고요.

궁금하신 분들은 한 번 읽어보시길 추천드립니다.

https://toss.tech/article/template-literal-types

Template Literal Types로 타입 안전하게 코딩하기