개요

백엔드와 프론트엔드에서 공통으로 사용하는 타입(Response, DTO, 그 외 오브젝트 타입)을 하나의 파일로 관리하기 위해 두 가지 방법을 고려해봤습니다.

1. 프로젝트 최상단에 타입 파일을 정의하고 다음과 같이 상대 경로를 이용해 타입을 불러오는 방법

   import type { SomeType } from '../../../../type'
   

2. 모노레포를 활용해 공통 패키지로 분리하고 상대 경로 없이 타입을 불러오는 방법

   import type { Category } from '@common/types'
   

첫 번째 방법은 쉽지만, 자동 완성이 안 되고, 파일 경로가 바뀌었을 때 전체 경로가 다시 바뀌어야한다는 단점이 있기 때문에 두 번째 방법을 선택했습니다.

이 과정에서도 두 번의 리팩토링을 거쳤는데요, 처음에는 아래 코드를 보면서, “어? 엔티티를 저렇게 타입처럼 쓸 수 있구나. 그럼 저 엔티티를 공통 패키지로 분리한 뒤, 프론트에서 API 응답으로 사용하면 되겠다!” 라고 생각했습니다.

import { Category } from './entities/category.entity'

async findAll(): Promise<{ result: Category[] }> {
  const categories = await this.categoryRepository.find({
    relations: ['menu'],
  })
  return { result: categories }
}

그렇게 실제로 엔티티를 공통 모듈로 나눠서 타입을 사용해봤는데, 막상 큰 단점이 하나 있었습니다. 바로 엔티티와 Response 타입이 항상 같지가 않다는 것입니다.

그래서 결국에는 이런 식으로 직접 타입을 작성해줬습니다.

JSON을 타입스크립트 타입으로 바꿔주는 컨버터(https://transform.tools/json-to-typescript)를 이용하시면 쉽게 타입을 만들 수 있습니다!

설정 방법

1. packages 폴더 안에 common-types라는 폴더를 만듭니다.