여러분, 안녕하세요! 첫 포스팅이 끝나고 오랜만에 소매를 걷어붙이고 코딩을 시작할 시간입니다.

무엇보다 먼저 프로젝트 구조를 준비하고 빌드하는 것을 좋아합니다. 논리적인 첫 번째 단계는 Yarn과 Typescript를 설치하고 무엇이든 빌드하도록 하는 것입니다.

원사 설정

Yarn을 설치하려면 16.10부터 Node와 함께 번들로 제공되는 Corepack을 사용하는 것이 좋습니다. 올인원 패키지 관리자인 것 같고 이미 Yarn이 포함되어 있습니다. corepack enable(실험적이며 기본적으로 비활성화되어 있으므로)를 실행한 다음 yarn init -2를 실행하여 새 프로젝트를 초기화하기만 하면 됩니다.

ℹ -2 ensures that it uses Yarn 2+ (modern), required to work with zero-installs. More on it later!

앞서 언급했듯이 Yarn 작업 공간을 사용하여 모듈을 구성하고 싶습니다. 각 모듈에는 자체package.json 파일이 필요하므로 다음 구조부터 시작하겠습니다.

📦tamiyo
 ┣ 📂client
 ┃ ┗ 📜package.json
 ┣ 📂server
 ┃ ┗ 📜package.json
 ┣ 📂shared
 ┃ ┗ 📜package.json
 ┗ 📜package.json

package.json 콘텐츠는 대부분 일반적이며 상위 파일에 작업 공간 위치를 지정하는 workspaces 필드가 포함되어 있다는 차이점이 있습니다.

 {
  "name": "tamiyo",
  "version": "1.0.0",
  "packageManager": "[email protected]",
  "workspaces": [
    "server",
    "client",
    "shared"
  ]
}

모듈의 경우 일관성을 위해 패키지 이름 앞에 @tamiyo를 붙입니다. 예를 들어 클라이언트 파일은 다음과 같습니다.

{
  "name": "@tamiyo/client",
  "version": "1.0.0",
  "packageManager": "[email protected]"
}

yarn install를 실행하면 올바르게 설정되었는지 확인하고 일부 파일이 생성되었음을 알 수 있습니다. yarn.lock는 잘 알려져 있고 나머지는 Yarn의 zero-installs: .yarnrc.yml , .pnp.cjs 및 .yarn 디렉토리와 관련이 있습니다. 이 모든 것을 저장소에 체크인하면 종속성이 변경되지 않는 한(따라서 설치가 0인 경우) 더 이상 이 명령을 실행할 필요가 없습니다! 이 메커니즘의 더 많은 이점에 대해서는 설명서를 읽으십시오.

Typescript 설정

Typescript를 시작해 봅시다! 가장 먼저 할 일은 yarn add -D typescript 로 설치하는 것입니다. tsc와 함께 실행할 수 있는 yarn tsc CLI 도구를 설치하여 Typescript 코드를 Javascript로 컴파일하여 브라우저, 노드 등에서 실행할 수 있도록 합니다.

Typescript는 다양한 프로젝트 설정과 함께 tsconfig.json 파일로 표시되는 프로젝트로 구성됩니다. 또한 우리가 사용하고 있는 Yarn 작업 공간과 잘 어울리는 더 작은 하위 프로젝트로 나눌 수도 있습니다! 각 작업 공간에도 tsconfig.json 파일을 배치하기만 하면 됩니다.

📦tamiyo
 ┣ 📂client
 ┃ ┣ 📜package.json
 ┃ ┗ 📜tsconfig.json
 ┣ 📂server
 ┃ ┣ 📜package.json
 ┃ ┗ 📜tsconfig.json
 ┣ 📂shared
 ┃ ┣ 📜package.json
 ┃ ┗ 📜tsconfig.json
 ┣ 📜package.json
 ┗ 📜tsconfig.json

루트tsconfig.json는 특별합니다. 여기에는 하위 프로젝트를 지정하는 references 속성이 있습니다. 여기서는 작업 공간입니다. 또한 모듈 자체가 아니기 때문에 루트 프로젝트가 아무 것도 빌드하지 않도록 "include": []를 지정합니다.

{
  "references": [
    { "path": "./shared" },
    { "path": "./client" },
    { "path": "./server" }
  ],
  "include": []
}

작업 공간은 실제 코드가 상주하는 곳이므로 작업 공간tsconfig.json에는 컴파일러 옵션이 포함됩니다.

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "build",

    "target": "es6",
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "composite": true,
    "esModuleInterop": true,
    "isolatedModules": false,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

TSConfig reference에서 해당 의미를 확인할 수 있습니다. Typescript 하위 프로젝트를 사용할 때 composite: true가 필요하다는 점에 유의하는 것이 중요합니다. 각 작업 공간에서 이러한 모든 속성을 반복하지 않으려면 공통tsconfig.common.json으로 추출하고 작업 공간에서 확장하도록 할 수 있습니다.

# ./tsconfig.common.json
{
  "compilerOptions": {
    "target": "es6",
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "composite": true,
    "esModuleInterop": true,
    "isolatedModules": false,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

# {module}/tsconfig.json
{
  "extends": "../tsconfig.common.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "build"
  }
}

이를 통해 루트 디렉터리에서 빌드할 수 있어야 합니다. 각 모듈의 src 디렉토리 아래에 간단한 파일을 넣어 테스트해 보겠습니다.

// {module}/src/index.ts
console.log('Hello!')

yarn tsc --build --verbose를 실행하면 구성에서 지시한 대로 모든 Typescript 파일을 컴파일하고 .d.ts 디렉토리 아래에 .js 및 {module}/build 파일을 생성해야 합니다. 이러한 파일은 노드, 브라우저 등에서 실제로 실행될 것입니다.

다음 단계

우리 프로젝트는 적어도 컴파일할 수 있습니다! 다음으로, 무언가를 준비하고 실행해야 할 때입니다. 앞서 언급했듯이 저는 Create React App을 사용하여 클라이언트를 구축하여 신속하게 작업을 수행할 것입니다. 또한 서버를 구현하고 통합하는 방법도 살펴보겠습니다.