Vite 모노레포 프로젝트에서 공통 모듈 사용하기

박상훈·2024년 9월 10일

1. 소개

이 포스트에서는 Vite를 사용한 모노레포 환경에서 공통 모듈을 설정하고 개별 프로젝트에서 사용하는 방법을 단계별로 알아보겠습니다. 이 방법은 Redux 스토어, 유틸리티 함수, 공통 컴포넌트 등 다양한 종류의 공통 코드에 적용할 수 있습니다.

2. 프로젝트 구조 예시

root/
├── apps/
│   └── projectA/
├── packages/
│   ├── components/
│   ├── pages/
│   └── common/
└── vite.config.js

apps에는 개별 프로젝트 폴더가
packages에는 공통으로 사용되는 파일들을 위치 시킵니다.

3. Vite 설정

먼저, root/vite.config.js 파일에 다음과 같이 별칭(alias)을 설정합니다:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@components": path.resolve(__dirname, "./packages/components"),
      "@pages": path.resolve(__dirname, "./packages/pages"),
      "@common": path.resolve(__dirname, "./packages/common"),
    },
  },
});

이렇게 하면 @common과 같은 별칭을 사용하여 공통 모듈에 쉽게 접근할 수 있습니다.

4. 공통 모듈 패키지 설정

4.1 패키지 생성

packages/common 디렉토리에 package.json 파일을 생성합니다:

{
  "name": "@projectA/common",
  "version": "1.0.0",
  "main": "index.js",
  "private": false
}

package.json 설정

name:

패키지의 이름입니다.
@projectA/common에서 projectA 부분은 네임스페이스로, 여러분의 조직이나 프로젝트를 나타냅니다.
이 부분은 자유롭게 변경할 수 있습니다. 예를 들어, @myproject/common, @companyname/common 등으로 설정할 수 있습니다.
주의: npm에 패키지를 공개할 계획이라면, 이미 사용 중인 이름과 충돌하지 않도록 주의해야 합니다.

version:

패키지의 버전을 나타냅니다.
시맨틱 버저닝 규칙을 따르는 것이 좋습니다.
1.0.0은 첫 번째 주요 릴리스를 의미합니다.
패키지를 업데이트할 때마다 이 버전을 적절히 증가시켜야 합니다.(동료들간 버전 표기 방식을 결정해야합니다)

main:

패키지의 주요 진입점(entry point)을 지정합니다.
"main": "index.js"는 이 패키지를 import할 때 index.js 파일이 로드된다는 의미입니다.
만약 TypeScript를 사용한다면 "main": "index.ts"로 변경할 수 있습니다.

private:

이 필드가 true로 설정되면 npm에 실수로 패키지를 공개하는 것을 방지합니다.
false로 설정하면 npm에 패키지를 공개할 수 있습니다.
내부용 패키지라면 "private": true로 설정하는 것이 안전합니다.

추가로 고려할 만한 필드들:

description: 패키지에 대한 간단한 설명을 추가할 수 있습니다.
author: 패키지 작성자의 정보를 추가할 수 있습니다.
license: 패키지의 라이선스를 지정할 수 있습니다.

4.2 공통 모듈 구현

packages/common/utils.js 파일을 생성하고 공통 기능을 구현합니다. :

export const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

4.3 진입점 설정

packages/common/index.js 파일을 생성하고 다음 내용을 추가합니다:

export * from "./utils"; (전체 내보내기)
export { formatDate } from "./utils"; (일부 내보내기)

5. 개별 프로젝트에 공통 모듈 추가

각 개별 프로젝트에(apps/projectA)의 package.json 에 공통 모듈 의존성 추가합니다.

{
  "dependencies": {
    "@projectA/common": "1.0.0",
    // ... 기타 의존성
  }
}

6. 의존성 설치 및 실행

프로젝트 루트 디렉토리에서 npm i 로 설치를 진행합니다. (yarn,pnpm 등 자신이 사용하는 설치방식에 맟춰서 사용)

7. 공통 모듈 사용하기

개별 프로젝트의 컴포넌트(예: apps/projectA/src/App.jsx)에서 공통 모듈을 사용합니다.

import React from 'react';
import { formatDate } from '@projectA/common';

function App() {
  const today = new Date();

  return (
    <div>
      <h1>Common Module Test</h1>
      <p>Today's date: {formatDate(today)}</p>
    </div>
  );
}

export default App;

8. 최종 정리

프로젝트 구조 설정

루트 디렉토리에 apps(개별 프로젝트용)와 packages(공통 모듈용) 폴더 생성

Vite 설정

vite.config.js에서 @common과 같은 별칭(alias) 설정

공통 모듈 패키지 생성

packages/common 폴더 생성
package.json 파일 설정 (name, version, main 등 지정)

공통 모듈 구현

필요한 유틸리티 함수, 컴포넌트 등 작성
index.js에서 모듈 export

개별 프로젝트에 공통 모듈 추가

각 앱의 package.json에 공통 모듈 의존성 추가

공통 모듈 사용

개별 프로젝트의 컴포넌트에서 공통 모듈 import 및 사용

의존성 설치 및 실행

루트 디렉토리에서 npm install 실행
개별 프로젝트에서 npm run dev 등으로 실행
(6,7 의 순서는 바뀌어도 상관없습니다)

박상훈

다들 좋은 하루 되세요

이전 포스트

기존 프로젝트 Turbo Repo + MONO Repo 전환 ( 2 )

다음 포스트