모노레포 구축해본썰 푼다ㅎㅎ - 모노레포 구축기

현재 bigbroCO. 이라는 실제 사용하게될 전국적인 프로젝트를 모노레포로 개발하기로 해서 모노레포를 구축하고 있다

bigbroCO.-front repo - https://github.com/bigbroCO-team/bigbroCO.-Front(현재 개발중)

GitHub - bigbroCO-team/bigbroCO.-Front

 

현재 어떻게 구축하고 있는지를 작성해보려고 한다

 

pnpm workspace

사실 이번 기회에 yarn berry를 사용해서 모노레포를 구축해 zero install 기능을 사용해보고 싶었지만 아직 yarn berry를 재데로 사용해본적이 없어 많이 사용해봤고 학교 선배님들도 pnpm으로 모노레포를 많이 구축해보셔서 트러블 슈팅하기 좋을거 같아 pnpm을 사용하기로 정했다

 

요구사항

이번 모노레포에서 세팅해야 할것들은 workspace 구조 세팅, prettier세팅, eslint세팅, storybook세팅 정도가 있는거 같다

 

workspace 구조 세팅

현재 workspace의 구조는 실행가능하거나 빌드가 가능한 apps 디렉토리와 공유하는 부분을 담당하는 packages 디렉토리 이렇게 구조를 잡았다

 

apps 디렉토리에는 client 페이지, admint 페이지, storybook이 있고
packages 디렉토리에는 eslint-config-custom 디렉토리만 있다 (추후 다른 디렉토리 추가 예정)

 

이렇게 구조가 잡혔으면 pnpm-workspace.yaml에 아래와 같이 작성한다

// pnpm-workspace.yaml

packages:
  - 'apps/*'
  - 'packages/*'

 

prettier 세팅

나는 prettierrc.json을 root에다가 위치시켜줬다 왜냐하면 각각의 package 마다 해줄수도 있긴한다 이런 경우는 package 마다 포멧이 다를때 이런식으로 각각 세팅해주고 나는 똑같이 포멧을 할거기 때문에 root에 위치 시켜 주었다

// .prettierrc.json

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "es5"
}

 

 

eslint 세팅

eslint 세팅을 이번에 처음 세팅해보았고 또 package를 만들어서 공유해보는 것도 처음이여서 많이 고생했다 packages 폴더에 eslint-config-custom 파일을 만들었고 index.js에 아래와 같이 작성했다

// index.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
  },
  plugins: ['unused-imports', '@typescript-eslint'],
  extends: ['plugin:prettier/recommended', 'next/core-web-vitals'],
  rules: {
    // 사용하지 않는 import문을 error 처리
    'unused-imports/no-unused-imports-ts': ['error'],

    // 사용하지 않는 변수 error 처리
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error'],

    // console.log문을 error 처리
    'no-console': 'error',
  },
};

 

위와 같이 eslint rule 설정을 해주고 client와 admin에 eslint-config-custom 의존성을 설치한후 .eslintrc.json에다가 아래와 같이 작성하면 index.js의 rule이 적용이 된다

// .eslintrc.json

{
  "root": true,
  "extends": ["custom"]
}

 

storybook 세팅

storybook 세팅도 eslint와 마찬가지로 이번에 처음 세팅해봤는데 생각보다는 어렵지 않아서 다행이라고 생각했다

monorepo에서는 storybook을 어떻게 해야하는지 몰라서 찾아 봤는데 학교 선배님께서 모노레포 storybook 세팅에 대해 블로그를 작성해주셔서 도움을 받았다

블로그 링크 - https://blog.msg-team.com/monorepo-pnpm-%EC%84%B8%ED%8C%85%ED%95%98%EB%8A%94-%EB%B2%95-72721dd5f740

monorepo + pnpm?

 

apps 디렉토리에 storybook 디렉토리를 만들고 아래의 두 명령어를 차례대로 입력해준다 

pnpm init

pnpm dlx storybook@latest init

 

그 다음 main.js 파일에서 아래와 같이 client, admin의 components 디렉토리의 stories 파일 경로를 설정해주면 된다

 

마무리

아직 tsconfig 세팅과 기타 여러가지 세팅을 하지 못했다 나중에 tsconfig와 여러가지 세팅들을 하고 나서 블로그에 추가 하도록하겠다

이번 블로그는 라이브러리를 사용한다던지 기술에 대한 설명은 아니고 실제 프로젝트의 세팅법을 블로그로 작성해보왔는데 실제 세팅하면서 느꼈던 점을 작성하니 좋은것 같다고 생각한다 앞으로도 이런 글을 자주 쓰면 좋을거 같다는 생각이 들었다