프론트엔드 모노레포 - 환경설정

모노레포에서 기대하는 개발 경험

1. 공용 컴포넌트 기준으로, 크롬 익스텐션과 웹 사이트 모두 활용 ✅

2. 기본적인 개발 및 빌드, 배포까지 파이프라인 구성

3. CI / CD 과정에서 크롬 및 웹의 각 화면의 주요 테스트 케이스를 통과할 수 있게

4. Chrome 익스텐션과 Web의 상호작용 케이스 또한 E2E 테스트로 검사

5. Eslint, Prettier, Husky 를 하나의 설정으로 관리 ✅

패키지 매니저 정하기

• Ghost Dependency : 패키지 크기 최적화를 위해 Hoisting 할 때, 사용자가 모르는 의존성의 패키지가 마치 설치된 것 처럼 작동 → yarn berry 나 pnpm 에서 활용하는 패키지 Link 방식으로 해결가능합니다.

• Zero Install : 로컬 프로젝트의 패키지 캐싱 크기와 속도가 빠른 yarn의 경우, 이 캐싱을 버전 관리에 포함시킬 수 있습니다. 이렇게 된다면 버전관리 툴에 따른 모든 환경은 패키지를 설치할 필요가 없어집니다.

nodeLinker: pnp
enableGlobalCache: false

packageExtensions:
  "@crxjs/vite-plugin@*":
    dependencies:
      "vite": "^6.3.5"

공통 패키지 정의

• React : 의존성 설치

• TailwindCSS : 의존성 설치

• Typescript : 의존성 설치 및 tsconfig.base.json 으로 글로벌 설정 관리

• eslint : 의존성 설치 및 글로벌 설정 관리

• prettier : 의존성 설치 및 글로벌 설정 관리

• tsconfig.base.json

{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "jsx": "react-jsx",
    "allowJs": true,
    "target": "ES2017"
  }
}

{
  "compilerOptions": {
    "target": "esnext",
    "types": ["vite/client", "node", "chrome"],
    "lib": ["dom", "dom.iterable", "esnext"],
    ...
    "paths": {
      "@src/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@locales/*": ["src/locales/*"],
      "@pages/*": ["src/pages/*"]
    }
  },
  "include": ["src", "utils", "vite.config.base.ts", "vite.config.chrome.ts", "vite.config.firefox.ts"],
  "extends": "../../tsconfig.base.json"
}

• eslint.config.js

exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'plugin:prettier/recommended'],
  rules: {},
};

• .prettierrc

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "useTabs": false,
  "bracketSpacing": true,
  "endOfLine": "auto"
}

패키지 정의하기

• common-components 패키지

pnpm create vite

• next.js 패키지

pnpm create create-next-app@latest

• Vite + React 기반 Chrome Extension 패키지

패키지 상호작용 테스트

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  className?: string;
}

const Button = ({ children, onClick, className = '' }: ButtonProps) => {
  return (
    <button className={`bg-blue-500 text-white p-2 rounded-md ${className}`} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

"common-components": "workspace:*"

import React from 'react';
import { Button } from 'common-components';
import logo from '@assets/img/logo.svg';

export default function Popup() {
  return (
    <div className="absolute top-0 left-0 right-0 bottom-0 text-center h-full p-3 bg-gray-800">
      <header className="flex flex-col items-center justify-center text-white">
        <img src={logo} className="h-36 pointer-events-none animate-spin-slow" alt="logo" />
        <p>
          Edit <code>src/pages/popup/Popup.jsx</code> and save to reload.
        </p>
        <a className="text-blue-400" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React!!!asdasdasdasdas
        </a>
        <Button>Click me!!</Button>
        <p>Popup styled with TailwindCSS!</p>
      </header>
    </div>
  );
}

import { Button } from 'common-components';

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <div className="flex gap-4 items-center flex-col sm:flex-row">
          <Button>Click me!!!</Button>
        </div>
      </main>
    </div>
  );
}

정리

1. eslint나 prettier, tsconfig와 같은 설정을 공통적으로 적용할 수 있었습니다. 다만, 패키지 마다 속성이 조금씩 차이나기 때문에 제일 간편하다고 느껴진 건 prettier 가 공통적으로 적용되는 점입니다.

2. 이와 비슷하게 husky나 lint-stage 적용도 일괄적으로 할 수 있어 깔끔하게, 또 안정적으로 다양한 패키지를 관리할 수 있었습니다.

3. 공용 컴포넌트를 크롬 확장프로그램과 Next.js 에서 모두 사용하며 중복 코드를 줄이고, 관리 포인트를 하나(common-components) 로 만드는 과정은 가장 큰 장점이라고 느꼈습니다.