타입스크립트에서 서버와 프론트 공통 타입 관리하기

배경

최근에 서버와 프론트의 공통 타입을 관리하면 좋을것같다는 얘기를 들었다. 예전부터 이런 생각을 했지만 서버와 프론트의 pacakge.json을 합치면 너무 방대해질것같아서 적용하지는 않았었다.

생각해보기

타입스크립트와 프리티어, 린트정도를 전체 패키지에서 설치를 하고 서버와 클라이언트에서 각각의 패키지를 설치하면 괜찮을 것 같다. 즉흥에서 얘기했지만 괜찮은 방법이라고 생각한다. 나의 경우에 프리티어는 공통 타입으로 관리하고 린트와 타입스크립트는 설정이 다르다. 그러면 전체 패키지에서 중복되는 프리티어, 린트, 타입스크립트를 설치하고 프리티어만 패키지에서 관리하면 된다. 그리고 타입스크립트를 공통 타입을 위해 사용되기 때문에 기본이 되는 tsconfig를 설정해주고 프론트 서버에서도 tsconfig를 설정해주면 될 것 같다.

작성해보기

나는 client, server 구조를 프로젝트에서 사용한다. 이제 전체 패키지에서 yarn init을 해서 package.json을 생성하고 공통 라이브러리를 설치하자. 그리고 tsconfig에 기본 설정만 입력하자.

이제 서버와 클라이언트에서 tsconfig 설정만 해주면 끝이다. baseurl, paths, include의 설정을 바꿔야 한다.

타입스크립트를 설정해본사람이라면 한번보고 알 내용이지만 간단하게만 설명을 적어두겠다. 먼저 baseUrl을 한단계 아래 디렉토리로 변경해줘야 한다. 왜냐하면 현재 폴더가 아닌 다른 폴더에서 import를 해와야 하기 때문이다. 그리고 paths에서도 헷갈리지 않게 절대경로를 설정해주자.
또한 자동 import를 위해서 include에도 아래와 같이 추가해줘야 한다.

    "baseUrl": "../" /* Base directory to resolve non-absolute module names. */,
    "paths": {
      "@/*": ["./client/src/*"],
      "common/*": ["./common/*"]
    } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
  "include": ["src/**/*", "../common/**/*"],

이렇게 해주면 끝이다. common이라는 폴더이름이 조금 애매한것같긴한데... 이건 좀 더 생각해보고 자료를 찾아봐야겠다. 그리고 생각해보니 공통으로 사용되는 상수도 존재한다. validation 부분만 생각해봐도 그렇고. 이런 부분도 공통적으로 뺄수 있겠다.