Yarn Workspaces, TypeScript, 그리고 Absolute Imports를 사용하여 React Monorepo 설정하기

Yarn Workspaces, TypeScript 및 절대 경로를 이용하여 React 모노 리포 설정하기

React 프로젝트를 yarn workspaces, TypeScript 및 절대 경로와 함께 설정하는 과정에서 어려움을 겪고 있다면, 혼자가 아닙니다. 이 블로그 글은 공통 프로젝트에서 .ts 또는 .tsx 파일을 가져올 때 발생하는 TypeError 문제에 대한 해결책을 제공합니다. 프로젝트를 올바르게 구성하고 누락된 요소를 처리하는 단계를 안내하겠습니다.

폴더 구조

문제 해결 과정에 들어가기 전에 권장되는 구조를 확인해 보겠습니다:

- root
  - package.json
  - tsconfig.json
  - packages
    - common
      - package.json
      - tsconfig.json
    - services
      - web
        - package.json
        - tsconfig.json

이 계층 구조를 지키는 것은 올바른 구성과 임포트 해결을 용이하게 해줍니다.

package.json 설정하기

먼저, 루트의 package.json 파일을 수정하여 필요한 워크스페이스와 종속성을 포함시킵니다:

{
  "name": "내-프로젝트-이름",
  "private": true,
  "workspaces": [
    "packages/*",
    "services/**/*"
  ]
}

내-프로젝트-이름을 프로젝트의 실제 이름으로 대체해야 합니다. 이 구성은 yarn이 지정된 폴더 내의 모든 패키지를 인식하고 관리할 수 있게 합니다.

TypeScript 구성

임포트를 올바르게 해결하기 위해 TypeScript를 구성해야 합니다. 루트 tsconfig.json에 다음을 추가해 보세요:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["packages/*/src"]
    }
  }
}

baseUrl을 "."으로 설정하여 TypeScript가 루트 폴더를 기준으로 임포트를 검색하도록 합니다. 추가로, "paths" 속성은 @myproject/로 시작하는 모든 임포트가 패키지 내의 src 폴더에서 해결되도록 지정합니다.

임포트 오류 수정하기

임포트 오류를 해결하고 common 패키지로부터 임포트를 가능하게 하려면, web/package.json 파일을 수정해야 합니다:

{
  "dependencies": {
    "@myproject/common": "*"
  }
}

common 패키지의 package.json에서 이름이 "@myproject/common"으로 설정되어 있는지 확인하세요. 이 구성으로 웹 패키지 내에서 common 패키지에서 코드를 임포트할 수 있습니다:

import { myUtilFunction } from "@myproject/common";

결론

이 글에서 안내한 단계를 따라가면, React 프로젝트를 성공적으로 yarn workspaces, TypeScript 및 절대 경로와 함께 설정할 수 있습니다. 권장되는 폴더 구조를 지키고, package.json과 tsconfig.json 파일을 올바르게 구성하며, 필요한 종속성을 추가하여 임포트 오류를 해결하세요. 추가적인 문제가 발생하면 제공된 예제 저장소를 참조하고 추가 학습 자료를 찾아보시기 바랍니다.

즐거운 코딩하세요!

참고 자료 : 

reactjs