[ 프로젝트 ] 프로젝트 구조 변경 🔥

이 글은 <타입스크립트 환경 범위 통합> 이라는 내 블로그에도 기록되어 있다. 추후, 저 글을 보고 혼동하지 않기 위해서 붙여놓았다.

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

우선,

1. client와 server에서 같은 타입을 공유해야한다.

따라서 한쪽에서 필요한 type이 바뀌면 자동으로 다른쪽에서 오류를 뱉어야 컴파일 단계에서 오류를 잡을 수 있기 때문이다.

2. client와 server 양자에 필요한 모듈들이 다르다.

기존 설정대로라면, 각자가 필요한 모듈을 하나의 root directory에서 갖고 있기 때문에 배포시 문제가 생긴다.

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

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

1. client / server 각각에서 tsconfig.json을 가지고 있어서 독립적으로 typescript의 작동 방식이 할당되어야함.

2. 각각 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",
    }
  
}

• 상위에 있는 tsconfig.json [1]의 설정을 모두 상속받되, typeORM을 위해 필요한 것을 설정하였다.
• outDir를 설정해서 tsc로 컴파일 할 때, server 디렉토리 내에 dist 폴더에 모아진다.

tsconfig.json [3]

다른 글에서 webpack 설정과 함께!