[ 프로젝트 ] 타입스크립트 환경 범위 통합

김민석·2021년 7월 1일

WORKOUT!

목록 보기

7/18

제목을 적절하게 지은 것인지는 모르겠다.

현재 내 프로젝트는 타입스크립트 환경 설정을 서버와 클라이언트가 분리해서 진행하려고 했었다.

그런데 생각해보니, 이런 형태에서는 나중에 클라이언트-서버간 통신을 할 때, 타입을 공통적으로 지정했을 때의 이점을 누리지 못하지 않을까? 하는 생각이 들었다.

따라서 아예 클라이언트-서버의 환경을 통합하여 개발하는 방향으로 선회하기로 하였다.

여기서부터 표시한 부분까지는 좋은 방법이 아니다.

추후 아래의 방식이 잘못되었다는 것을 깨닫고 수정하였다.
아래 😱 표시까지는 지나쳐도 좋다.

아래는 현재의 파일 구조다.

위의 구조를 아래와 같은식으로 변경하였다.

이렇게 하면 common 디렉토리에서 지정한 type을 server / client 양쪽 모두에서 사용할 수 있게 될 것이다.

이 방법은 현재 프로젝트가 monorepo 형태이기 때문에 가능한 것이다.

검색을 좀 해보니 패키지화해서 배포한 후에 사용하는 방법도 있는 것 같다. 하지만 개인프로젝트에서 그럴 필요는 없을 것으로 생각한다.
방법 - stackoverflow

이후 아래와 같은 option을 tsconfig.json에 추가하였다.

{
  "compilerOptions": {
    //::: 생략
    "baseUrl" : ".",  // < ---- 이거
    "paths": { // < ---- 그리고 이거 
      "common" : ["src/common"] 
    }
  }
,
  "include" : ["src", "ormconfig.js"]
}

이렇게 하면 내 프로젝트 내부에서
ìmport { foo } from 'common' 이렇게 접근이 가능해진다.

😱😱😱😱😱

😱잠깐!

클라이언트로 넘어가는 단계에서 위에서 만든 구조가 단단히 잘못되었다는 것을 깨달았다.
위의 기록은 시행착오를 겪은 과정을 남겨두고 싶기 때문에 지우지 않을 예정이다.
다만, 혹여나 누가 이 글을 본다면 위의 것은 기억 속에서 잊어야한다!

아래 내용은 여기를 참고하였다. ( github respository로 mono-repo의 구조 예시가 있다.)

디렉토리를 수정한 이유는 다음과 같다.

우선,

client와 server에서 같은 타입을 공유해야한다. 따라서 한쪽에서 필요한 type이 바뀌면 자동으로 다른쪽에서 오류를 뱉어야 컴파일 단계에서 오류를 잡을 수 있기 때문이다.
client와 server 양자에 필요한 모듈들이 다르다. 기존 설정대로라면, 각자가 필요한 모듈을 하나의 root directory에서 갖고 있기 때문에 배포시 문제가 생긴다.

예를 들어, server를 ec2에 배포하고 싶다면 root directory를 모두 올려서 개중 서버만 실행시켜야 하는 바보같은 일이 벌어진다.

따라서 위 두 가지를 충족시키기 위하여 다음과 같은 일이 필요했다.

client / server 각각에서 tsconfig.json을 가지고 있어서 독립적으로 typescript의 작동 방식이 할당되어야함.
각각 package.json을 갖고 있어야 한다. 따라서 필요한 모듈을 각각 관리해야 한다.

따라서 폴더 구조를 다시 변경하였다.

wo
├─ src
│  ├─ client
│  │  ├─ src
│  │  │  └─ ts.ts
│  │  └─ tsconfig.json [3]
│  ├─ server
│  │  ├─ .gitignore
│  │  ├─ ormconfig.js
│  │  ├─ package.json
│  │  ├─ src
│  │  │  ├─ app.ts
│  │  │  ├─ controllers
│  │  │  ├─ entity
│  │  │  ├─ factories
│  │  │  ├─ routes
│  │  │  ├─ seeds
│  │  │  ├─ server.ts
│  │  │  └─ utils
│  │  ├─ tsconfig.json [2]
│  │  └─ yarn.lock
│  └─ shared
│     └─ Types.ts
├─ tsconfig.json [1]
└─ yarn.lock

tsconfig.json [1]

{
    "compilerOptions": {
      "target": "ES5", 
      "module": "commonjs", 
      "moduleResolution": "node",
      "strict": true, 
      "esModuleInterop": true, 
      "skipLibCheck": true, 
      "forceConsistentCasingInFileNames": true,
      "baseUrl": ".", 
      "paths": {
        "@shared/*" : ["src/shared/*"]
      }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

paths
src/shared/ 디렉토리 안에 있는 파일들을 절대 경로로 import 할 수 있게 된다.

즉, 아래와 같은 방식으로 사용할 수 있다.
 // src/server/src/controllers/exercise.ts
import * as Type from '@shared/Types';
그렇지 않다면 아래와 같이 써야한다.
import * as Type from '../../shared/Types'

tsconfig.json [2]

{
    "extends":"../../tsconfig.json",
    
    "compilerOptions": {
      "emitDecoratorMetadata": true, //typeORM을 위해
      "experimentalDecorators": true, //typeORM을 위해
      "outDir": "dist",
    }
  
}