모노레포 도입기 - 2. 모노레포 도입 후 프로젝트 초기 세팅 과정 (with TypeScript, Eslint, Prettier)

Dahee Kim·2022년 5월 26일

모노레포 도입기

목록 보기

2/3

모노레포 도입기

오늘은 지난 글에 이어 모노레포를 도입하고, 프로젝트를 초기 세팅한 과정에 대해서 간략히 소개하겠습니다.

yarn berry workspace

yarn 설치
npm에서 최신 버전의 yarn을 내려받아주세요.

$ npm install -g yarn

yarn berry 설정
yarn 버전을 berry로 설정해주세요.

$ yarn set version berry

yarn init
yarn init으로 package.json 파일을 만들어줍니다.

$ yarn init

workspace 세팅
package.json 파일을 설정해줍니다. 저는 루트 경로의 /packages 폴더 내부의 모든 폴더가 workspace에 속하도록 만들었습니다.

{
  "name": "monorepo",
  "private": true,
  "workspaces": {
  	[
      "packages/*"
  	],
  },
  "packageManager": "yarn@3.0.2"
}

typescript

typescript 설치

$ yarn add -D typescript

node, react, jest를 위한 typescript 모듈 설치

$ yarn add -D @types/node @types/react @types/jest

tsconfig.json 파일 구성

{
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "moduleResolution": "Node",
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "strict": true,
      "target": "es6",
      "lib": ["ES5", "ES6", "ESNext", "DOM"],
      "skipLibCheck": true,
      "baseUrl": ".",
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "isolatedModules": true
    },
    /* // 각 프로젝트에 오버라이드할 tsconfig 파일이 있다면 추가
    "references": [
      { 
        "path": "packages/common-components"
      },
      {
        "path": "packages/common-styles"
      },
      {
        "path": "packages/common-utils"
      },
    ],
    */
    "exclude": ["packages/**/dist/**"],
}

eslint

eslint 설치

$ yarn add -D eslint

eslint init하고, 프로젝트 성격에 맞게 옵션 선택.

$ npx eslint --init

yarn을 사용하는 경우 아래 질문에서 NO 선택.

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? ‣ No / Yes

위 항목 복사해 와서 yarn으로 설치

yarn add -D eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

eslintrc 파일 구성

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "airbnb",
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks",
        "prettier",
        "@emotion",
        "jest",
        "jest-dom"
    ],
    "rules": {
        "prettier/prettier": "error",
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
    }
}

prettier

prettier 설치

$ yarn add -D prettier

eslint와 충돌을 막아주는 config, plugin 설치

$ yarn add -D eslint-config-prettier eslint-plugin-prettier

.prettierrc 파일 구성

{
    "arrowParens": "always",
    "bracketSameLine": true,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": false,
    
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "none",
        "useTabs": false,
    "vueIndentScriptAndStyle": false,
    "disableLanguages": []
}