Mildang Frontend Quick Start

Mildang Frontend는 TypeScript/React 기반 모노레포이며, Turborepo, Next.js, GraphQL, pnpm을 사용합니다.

사전 준비

1. nvm(Node Version Manager) 설치 및 로드

   • 설치

     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

   • 셸 재로딩(macOS 기본 zsh 기준)

     source ~/.zshrc

2. 프로젝트 Node 버전 적용(.nvmrc 사용)

   nvm install
   nvm use
   node -v  # 20.11.1 이어야 합니다 (.nvmrc 기준)

3. pnpm 글로벌 설치

   npm install -g pnpm@9.15.9
   pnpm -v

4. Turbo 글로벌 설치

   npm install -g turbo
   turbo --version

초기 저장소 세팅

1. 저장소 클론 및 디렉터리 이동

   git clone https://github.com/mildang/mildang-frontend.git
   cd mildang-frontend

2. 의존성 설치

   pnpm install

3. 스키마 기반 코드 생성

   pnpm codegen:root

환경 변수 설정

보안 주의사항: 민감한 환경변수는 dotenv-vault를 통해 안전하게 관리됩니다.

dotenv-vault를 통한 환경변수 관리

로컬에서 .env 파일을 직접 작성하지 않고, dotenv-vault에서 환경별 설정을 가져와 사용합니다.

1. 로그인

npx dotenv-vault login

• dev 계정으로 로그인하거나 회사 계정으로 가입/로그인합니다.

2. 환경변수 확인

npx dotenv-vault@latest open

• 웹 UI에서 현재 설정된 환경변수들을 확인할 수 있습니다.

3. 환경변수 가져오기

npx dotenv-vault@latest pull ${환경} .env

사용 가능한 환경:

• develop - 개발 환경
• stage - 스테이징 환경
• production - 프로덕션 환경
• schoolpt - mildang-ui 전용 환경
• feature - 피처 브랜치 환경

실행 후 프로젝트 루트에 .env 파일이 생성됩니다.

4. 환경변수 사용 예시

# 개발 환경 설정 가져오기
npx dotenv-vault@latest pull develop .env

# 스테이징 환경 설정 가져오기
npx dotenv-vault@latest pull stage .env

스크립트 실행 규칙

• 전체 빌드

turbo build

• 프로젝트(개별 앱/패키지) 내부에서: pnpm으로 스크립트를 실행하세요.

  cd apps/student-web
  pnpm dev
  pnpm build
  pnpm test