Monorepo에 프로젝트 Scaffolding 구축하기

지난 글 Pnpm으로 Monorepo 구축하기 - 1. 도입 배경에서 언급했듯이, 모노레포를 도입한 가장 큰 이유는 반복적인 설정 작업과 중복 코드를 줄여 관리 효율성을 높이기 위함이었습니다. 그러나 모노레포를 사용하더라도 매번 프로젝트를 생성할 때마다 별도로 설정을 해줘야 하는 불편함이 여전히 존재합니다.

이 문제를 해결하기 위해, 이번 글에서는 command line을 통해 신속하게 초기 프로젝트를 구성할 수 있는 맞춤형 Scaffolding 도구를 구축하는 방법을 다루어 보겠습니다.

1️⃣ Frontend Scaffolding이란?

프론트엔드 스캐폴딩은 프론트엔드 프로젝트의 신속한 개발과 조직화를 돕는 도구나 프레임워크를 의미합니다.

이러한 스캐폴딩 도구는 미리 정의된 구조, 설정, 기능 등을 제공해 개발자들이 프로젝트를 빠르고 효율적으로 시작할 수 있도록 도와줍니다.

2️⃣ Scaffolding 도구의 목표

제가 사용하는 프론트엔드 스캐폴딩 도구의 주요 목표는 다음과 같습니다.

1. 자동화된 프로젝트 설정

   새로운 프로젝트 생성 시, 기본적인 설정 파일과 구조를 자동으로 생성하여 반복적인 작업을 줄이고, 일관성 있는 개발 환경을 제공합니다.

2. 공통 패키지 및 의존성 통합

   Tailwind CSS, ESLint, Prettier 등 공통적으로 사용하는 패키지와 도구를 미리 설정하여, 개발자가 별도로 설정하지 않아도 되는 통합된 개발 환경을 제공합니다.

이러한 목표를 달성하기 위해, 이 글에서 다루는 스캐폴딩 도구는 다음과 같은 기능을 포함합니다 :

• Vite의 react-ts 템플릿 기반 프로젝트 생성
• 기본적인 설정 파일 제공 (tsconfig.json, vite.config.ts 등)
• 기본적인 프로젝트 구조, 절대 경로 설정 제공
• Root에 프로젝트 실행 스크립트 추가
• 공통 패키지 및 의존성 관리
  • Tailwind CSS
  • react-router-dom
  • ESLint, Prettier, Husky, Commit Lint

3️⃣ Scaffolding 도구 구축하기

이제 본격적으로 스캐폴딩 도구를 구축하는 방법을 살펴보겠습니다. 스캐폴딩 도구 구축 과정은 두 가지 주요 단계로 나눌 수 있습니다.

첫 번째 단계에서는 모노레포 내에서 Vite의 React-TS 템플릿을 기반으로 기본 프로젝트 템플릿을 생성하는 과정입니다. 이 단계에서는 템플릿의 구조와 설정을 정의합니다.

두 번째 단계에서는 command line을 활용하여 이 템플릿을 바탕으로 새로운 프로젝트를 생성하는 방법을 다룹니다. 이 과정에서는 프로젝트의 이름을 지정하고, 필요한 설정과 의존성 설치를 자동화하는 스크립트를 작성합니다.

1. Vite 기반 템플릿 생성하기

먼저, Vite의 React-TS 템플릿을 사용하여 기본적인 프로젝트를 생성하고, 이를 모노레포의 packages/frontend-template 디렉토리에 저장합니다.

cd packages
npm create vite frontend-template --template react-ts

vite에서 제공하는 템플릿에는 기본적인 설정 파일과 폴더 구조가 포함되어 있습니다. 각 프로젝트의 상황에 맞게 추가로 필요한 파일이나 폴더를 생성(혹은 삭제)하여 프로젝트 구조를 정의합니다.

아래의 예시는 기본적인 프로젝트 구조를 정의하는 한 가지 방법이며, 실제 프로젝트의 요구에 따라 다르게 구성할 수 있습니다.

예시 템플릿 : younyikim-playground/frontend-template

2. 프로젝트 생성 및 설정 자동화 스크립트 작성하기

이제, frontend-template 템플릿을 활용하여 새로운 프로젝트를 생성하고 필요한 설정을 자동으로 추가하는 bash 스크립트를 작성합니다.

✅ Bash Script란?
Bash 스크립트는 UNIX 및 Linux 시스템에서 명령어를 자동으로 실행하기 위한 파일입니다. 이러한 스크립트는 일련의 명령어를 순서대로 실행하여 작업을 자동화하는 데 유용합니다. .sh 확장자를 가진 파일로 저장되며, 실행 권한을 부여한 후 커맨드라인에서 실행할 수 있습니다.

① 새 프로젝트 생성 스크립트 작성하기

모노레포 Root의 scripts/scaffolding 에 create-react-project.sh 파일을 생성합니다. 이 스크립트는 frontend-template 템플릿을 복사하여 새로운 프로젝트를 생성하고, 필요한 의존성을 설치하며, 필요한 설정을 자동으로 적용합니다.

create-react-project.sh 스크립트에 포함되는 주요 기능은 다음과 같습니다 :

• 프로젝트 경로 유효성 검사

  • 사용자가 입력한 경로가 유효한지 확인하고, 경로가 올바르지 않으면 에러 메세지를 출력합니다.

• 템플릿 복사 및 초기 설정

  • frontend-template 템플릿을 입력받은 경로에 복사합니다.
  • package.json의 name 필드를 네이밍 컨벤션에 맞게 자동으로 설정합니다.

• 프로젝트 의존성 설치

  • pnpm install 명령어를 실행하여 프로젝트의 의존성을 설치합니다.

• 프로젝트 실행 스크립트 추가

  • 모노레포 Root의 package.json 파일에 새로운 프로젝트를 실행할 수 있는 스크립트를 추가합니다.

스크립트 예시

#!/bin/bash

# 새로운 프로젝트 경로를 인수로 받습니다.
PROJECT_PATH=$1

# 프로젝트 경로 유효성 검사
if [ -z "$PROJECT_PATH" ]; then
  echo "🚫 프로젝트 경로를 입력해주세요. Usage: $0 <project-path/project-name>"
  exit 1
fi

# 템플릿 디렉토리 경로
TEMPLATE_DIR=packages/frontend-template

# 새로운 프로젝트 디렉토리 생성
mkdir -p "$PROJECT_PATH"
cp -R $TEMPLATE_DIR/. $PROJECT_PATH
cp -R $TEMPLATE_DIR/.gitignore $PROJECT_PATH

# package.json 파일의 name 필드 설정
PACKAGE_NAME="새로운 프로젝트 이름"
jq --arg name "$PACKAGE_NAME" '.name = $name' $PROJECT_PATH/package.json > tmp.$$.json && mv tmp.$$.json $PROJECT_PATH/package.json

...

# 의존성 설치
pnpm install

# 스크립트 추가
NEW_SCRIPT_NAME="새로운 스크립트 이름"
NEW_SCRIPT="pnpm --filter $PACKAGE_NAME"
jq --arg key $NEW_SCRIPT_NAME --arg value "$NEW_SCRIPT" '.scripts[$key] = $value' package.json > tmp.$$.json && mv tmp.$$.json package.json

echo "🎉 HAPPY CODING!"

전체 스크립트 : create-react-project.sh

② 프로젝트 생성 명령어 추가하기

이제 Root의 package.json 파일에 새로운 스크립트를 추가하여, 커맨드라인에서 간편하게 프로젝트를 생성할 수 있도록 설정합니다.

package.json의 script에 아래 스크립트를 추가합니다.

"scripts": {
  "scaffolding:frontend": "bash scripts/scaffolding/create-react-project.sh"
}

위에서 정의한 스크립트를 실행하려면, 모노레포의 루트 디렉토리에서 아래와 같이 명령어를 입력합니다:

pnpm scaffolding:frontend <project-path>

예를 들어, 새로운 프로젝트를 apps/new-project 디렉토리에 생성하고 싶다면 다음과 같이 실행합니다:

pnpm scaffolding:frontend apps/new-project

이 명령어 실행시, 아래와 같이 프로젝트 생성이 이루어지는 것을 확인할 수 있습니다.

성공적으로 프로젝트 생성이 완료된 후, 자동으로 추가된 pnpm new-project:service dev를 실행하면 바로 프론트엔드 프로젝트를 실행할 수 있습니다.

4️⃣ 마무리

이번 글에서는 모노레포 환경에서 프론트엔드 스캐폴딩 도구를 구축하는 과정에 대해 알아보았습니다.
이 글이 여러분의 모노레포 관리 및 프로젝트 생성 작업에 유용한 도움이 되었기를 바랍니다. 감사합니다!

🎉 HAPPY CODING! 🚀