[JavaScript 시리즈 19편] 프런트엔드 빌드와 배포의 기본

프런트엔드 빌드와 배포의 기본

이제 코드를 사용자에게 전달할 차례입니다. 빌드와 배포 흐름을 이해하면 프로젝트를 안정적으로 공개할 수 있습니다.

이번 글에서 새로 나오는 용어

번들링: 여러 JS·CSS 파일을 하나의 묶음으로 압축해 배포하는 과정입니다.
트랜스파일링: 최신 문법을 구형 브라우저가 이해하도록 다른 문법으로 바꾸는 작업입니다.
환경 변수: 실행 환경마다 달라지는 값을 .env 파일 등에 분리해 관리하는 설정입니다.
정적 호스팅: 빌드 결과물을 업로드해 그대로 제공하는 서비스로, Netlify나 Vercel이 여기에 해당합니다.
CI 파이프라인: 코드가 푸시될 때 자동으로 테스트와 빌드를 실행하는 작업 흐름입니다.

핵심 개념

번들링(Bundling, 자원 묶기): 여러 JS·CSS·이미지 파일을 하나의 묶음으로 만드는 과정입니다. Vite, Webpack 같은 도구가 담당합니다.
트랜스파일링(Transpiling, 문법 변환): 최신 문법을 구형 브라우저가 이해하는 코드로 변환하는 작업입니다. Babel이나 esbuild가 수행합니다.
환경 변수(Environment Variables, 설정 분리 키): API URL이나 키를 코드와 분리해 import.meta.env.VITE_API_URL 같은 형태로 관리합니다.
정적 호스팅(Static Hosting, 빌드 산출물 제공): Netlify, Vercel, GitHub Pages처럼 빌드 산출물을 업로드해 제공하는 서비스입니다.
CI 파이프라인(CI Pipeline, 자동화 흐름): GitHub Actions나 GitLab CI로 테스트·빌드·배포를 자동화하는 절차입니다.

코드로 확인하기

먼저 Vite 프로젝트를 생성해 로컬 개발 환경을 마련합니다.

npm create vite@latest dashboard -- --template vanilla
cd dashboard
npm install
npm run dev

Vite 프로젝트를 만들고 로컬에서 개발 서버를 띄웁니다.

이제 빌드를 실행해 산출물을 확인합니다.

npm run build

dist/ 폴더가 생성되고, 최적화된 HTML/CSS/JS 파일이 들어갑니다.

환경 변수를 분리해 배포 환경마다 설정을 바꿉니다.

# .env
VITE_API_URL=https://api.school.example

const apiUrl = import.meta.env.VITE_API_URL;
await fetch(`${apiUrl}/tasks`);

환경 변수를 사용하면 빌드 환경마다 다른 설정을 적용할 수 있습니다.

다음은 GitHub Actions 워크플로로 테스트와 배포를 자동화하는 예시입니다.

# .github/workflows/deploy.yml
name: deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: dist

GitHub Actions를 사용해 main 브랜치 푸시 시 자동으로 빌드하고 GitHub Pages에 배포합니다.

마지막으로 npm 스크립트를 정리해 어느 환경에서나 같은 명령을 씁니다.

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

스크립트를 통일하면 로컬, CI, 배포 환경에서 같은 명령을 사용합니다.

왜 중요한가

빌드 과정을 이해하면 성능 최적화 옵션을 조정할 수 있습니다.
환경 변수와 비밀 관리가 제대로 되어야 API 키가 외부에 노출되지 않습니다.
자동화된 배포는 사람 손으로 하는 반복 작업을 줄이고, 릴리즈 속도를 높여 줍니다.

실습

따라 하기: Vite 프로젝트를 생성하고 npm run build로 산출물을 만든 뒤 dist/ 내용을 확인합니다.
확장하기: .env 파일을 만들어 API URL을 분리하고, GitHub Actions로 빌드·배포 파이프라인을 구성합니다.
디버깅: 환경 변수를 설정하지 않았을 때 에러가 발생하는지 확인하고, CI 로그에서 원인을 찾습니다.
완료 기준: main 브랜치에 푸시하면 자동으로 배포되고, 정적 호스팅 URL에서 최신 변경 사항이 보이면 실습이 끝납니다.

마무리

빌드와 배포를 자동화하면 프로젝트를 다른 사람과 공유하기 쉬워집니다. 다음 글에서는 미니 앱 전체를 복습하며 리팩터링 아이디어를 정리합니다.