devlog

2022.04.26 - [Structure] - monorepo use yarn berry with nextjs, react storybook + typescript - 1 (root basic setting)

next js + typescript 프로젝트 추가

cd packages
yarn create next-app {project} --typescript

typescript config

root의 tsconfing 세팅을 extends하여 생성

중복된 설정 제거 및 extends

{
  "extends": "../../tsconfig.json",
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

package.json 수정

version -> packageManager

root package.json의 packageManager 복사하여 붙여넣기

{
  "name": "web",
  "packageManager": "yarn@3.2.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@common/components": "workspace:*",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@types/node": "17.0.27",
    "@types/react": "18.0.7",
    "@types/react-dom": "18.0.0",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "next-transpile-modules": "^9.0.0",
    "typescript": "4.6.3"
  }
}

yarn 패키지 의존성 갱신

root 위치에서 yarn 실행

yarn workspace 확인

yarn workspaces list

최종

yarn berry 활성화

yarn set version berry
yarn init
yarn plugin import typescript
yarn

yarn plugin import typscript

자체 types를 포함하지 않는 패키지를 추가할 때 @types 패키지를 package.json폴더에 종속성으로 자동으로 추가

Workspace 구성

root 디렉토리의 package.json 파일 수정

• packages 디렉토리 하위의 모든 디렉토리를 패키지로 봄

{
  "workspaces": ["packages/*"]
}

typescript, eslint, prettier 설치

yarn add -D typescript prettier eslint

vs code 세팅

yarn dlx @yarnpkg/sdks vscode

하위 패키지(workspace)만들기

mkdir packages

typescript config

tsconfgi.json

* next js의 기본 옵션을 사용함

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "references": [
    {
      "path": "packages/components"
    }
  ],
  "include": [],
  "exclude": ["node_modules"]
}

prettier config

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 200,
  "endOfLine": "auto",
  "arrowParens": "avoid",
  "bracketSpacing": true
}

eslint config 생략

최종 구조