Vue 프로젝트 설정 방법 비교: 수동 Webpack vs Vue CLI

Vue.js 프로젝트 설정 방법 비교: 수동 Webpack vs Vue CLI

Vue.js 프로젝트를 시작할 때 개발자들이 마주하는 첫 번째 선택지는 바로 어떤 방식으로 프로젝트를 설정할 것인가입니다. 크게 두 가지 접근 방법이 있습니다: 수동으로 Webpack을 설정하는 방법과 Vue CLI를 사용하는 방법. 이 글에서는 두 방식의 차이점과 각각의 장단점을 자세히 살펴보겠습니다.

수동 Webpack 설정이란?

수동 Webpack 설정은 개발자가 직접 빌드 도구와 설정 파일을 구성하는 방식입니다. 물론 처음부터 모든 걸 타이핑하지는 않고, 보통은 다음과 같은 방법들을 사용합니다:

일반적인 수동 설정 방법들:

• 공식 문서나 튜토리얼의 예제 코드 복사
• GitHub의 보일러플레이트 템플릿 사용
• 기존 프로젝트의 설정 파일 복사 후 수정
• 온라인 webpack 설정 생성기 활용

예를 들어, 다음과 같은 webpack.config.js 파일을 기반으로 시작하게 됩니다:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {}
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

Vue CLI란?

Vue CLI는 Vue.js 팀에서 공식적으로 제공하는 명령줄 도구로, 미리 구성된 템플릿을 사용해 Vue 프로젝트를 빠르게 생성할 수 있게 해줍니다.

# Vue CLI 설치
npm install -g @vue/cli

# 새 프로젝트 생성
vue create my-project

실제 작업 과정 비교

수동 Webpack 설정의 실제 과정

1단계: 기본 템플릿 선택

# GitHub에서 Vue Webpack 보일러플레이트 클론
git clone https://github.com/vuejs-templates/webpack-simple.git
# 또는
npm init webpack-simple my-project

2단계: 필요에 맞게 커스터마이징

• package.json의 의존성 수정
• webpack.config.js 설정 조정
• 추가 로더나 플러그인 설치 및 설정
• 개발/프로덕션 환경 분리

3단계: 추가 기능 구현

# 필요한 패키지들을 하나씩 설치하고 설정
npm install --save-dev sass-loader
npm install --save-dev eslint-loader
npm install --save-dev @babel/preset-env
# 각각을 webpack.config.js에 수동으로 추가

Vue CLI의 실제 과정

1단계: 프로젝트 생성

vue create my-project
# 대화형 인터페이스에서 필요한 기능 선택

2단계: 즉시 개발 시작

cd my-project
npm run serve
# 모든 설정이 이미 완료된 상태

상세 비교 분석

1. 초기 설정 시간과 노력

수동 Webpack 설정

• 기본 템플릿을 찾고 이해하는 시간: 30분~1시간
• 프로젝트 요구사항에 맞게 수정하는 시간: 1~3시간
• 버그 발생 시 디버깅 시간: 추가 1~2시간
• 총 소요 시간: 2~6시간

Vue CLI

• 프로젝트 생성 시간: 5~10분
• 기본 설정 이해 시간: 10~20분
• 커스터마이징 시간 (필요시): 30분~1시간
• 총 소요 시간: 15분~1.5시간

2. 실제 개발자 경험

수동 Webpack 설정의 현실

# 새로운 기능을 추가할 때마다...
npm install vue-router --save
# webpack.config.js 수정 필요
# 설정 에러 발생 시 Stack Overflow 검색
# "Module not found" 에러와 씨름
# 개발 시간의 30%를 설정 문제 해결에 소모

Vue CLI의 현실

# 플러그인으로 간편하게 추가
vue add router
vue add vuex
vue add @vue/typescript
# 자동으로 모든 설정이 구성됨
# 개발에만 집중 가능

3. 문제 해결과 디버깅

수동 설정에서 자주 발생하는 문제들

// 의존성 버전 충돌
"vue-loader": "^15.9.0",
"webpack": "^4.44.0"  // 호환되지 않는 버전들
// 해결: 각 패키지 문서를 확인하고 호환 버전 찾기

// 로더 설정 누락
Module parse failed: Unexpected token
// 해결: .vue 파일 처리를 위한 vue-loader 설정 추가

// 환경 변수 설정 문제
process.env.NODE_ENV is undefined
// 해결: DefinePlugin 수동 설정 필요

Vue CLI에서의 문제 해결

# 대부분의 설정 문제는 이미 해결된 상태
# 문제 발생 시 공식 문서나 커뮤니티에서 쉽게 해답 찾기 가능
# vue.config.js로 간단한 오버라이드만 필요

4. 장기적 유지보수

수동 설정의 현실적 문제

• 6개월 후 프로젝트에 새 팀원 합류 시 설정 이해에 시간 소요
• Webpack 5로 업그레이드 시 설정 파일 전면 수정 필요
• 보안 취약점 발생 시 어떤 패키지를 업데이트해야 하는지 추적 어려움
• "이 설정을 왜 했는지 기억이 안 난다" 상황 발생

Vue CLI의 장기적 이점

• 표준화된 구조로 팀원 온보딩 시간 단축
• 정기적인 업데이트로 보안 및 최신 기능 자동 반영
• 문제 발생 시 커뮤니티에서 빠른 해결책 공유
• 설정보다 비즈니스 로직에 집중 가능

5. 확장성과 커스터마이징

수동 설정의 자유도

• 모든 설정을 완전히 제어 가능
• 특별한 요구사항에 맞춤 설정 가능
• 실험적인 기능을 자유롭게 도입 가능

Vue CLI의 유연성

// vue.config.js를 통한 커스터마이징
module.exports = {
  configureWebpack: {
    // webpack 설정 직접 수정
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  chainWebpack: config => {
    // webpack-chain을 통한 세밀한 조정
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'My Custom Title'
        return args
      })
  }
}

프로젝트 구조 비교

수동 설정 프로젝트 구조

my-vue-app/
├── src/
│   ├── main.js
│   ├── App.vue
│   └── components/
├── dist/
├── package.json
├── webpack.config.js
├── babel.config.js
└── index.html

Vue CLI 프로젝트 구조

my-vue-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── main.js
│   ├── App.vue
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   └── assets/
├── tests/
├── package.json
├── vue.config.js
├── babel.config.js
└── README.md

어떤 방식을 선택해야 할까?

수동 Webpack 설정을 선택하는 경우

학습 목적

• Webpack과 빌드 도구의 동작 원리를 깊이 이해하고 싶을 때
• 프론트엔드 빌드 시스템에 대한 전문성을 키우고 싶을 때

특별한 요구사항

• 기존 레거시 시스템과의 통합이 필요한 경우
• 매우 특수한 빌드 파이프라인이 필요한 경우
• 실험적인 기능을 도입해야 하는 경우

완전한 제어권

• 모든 설정을 완벽히 이해하고 제어하고 싶을 때
• 번들 크기를 극한까지 최적화해야 하는 경우

Vue CLI를 선택하는 경우

빠른 개발 시작

• 프로토타이핑이나 MVP 개발
• 학습보다 개발에 집중하고 싶을 때
• 팀 프로젝트에서 일관된 설정이 필요한 경우

표준 프로젝트

• 일반적인 웹 애플리케이션 개발
• PWA, SPA, SSR 등 표준적인 아키텍처 사용
• Vue 생태계의 베스트 프랙티스를 따르고 싶을 때

유지보수성 중시

• 장기간 운영될 프로젝트
• 팀원들이 쉽게 프로젝트에 참여할 수 있어야 하는 경우
• 정기적인 업데이트와 보안 패치가 중요한 경우

현실적인 권장사항

현실적인 권장사항

개인 프로젝트나 학습용

• 처음 Vue를 배우는 경우: Vue CLI로 시작해서 Vue 자체에 집중
• 웹팩을 배우고 싶은 경우: 수동 설정으로 한 번 경험해보기
• 빠른 프로토타이핑: 무조건 Vue CLI

회사 프로젝트

• 스타트업/빠른 개발: Vue CLI (개발 속도 최우선)
• 대기업/레거시 시스템: 기존 빌드 시스템과의 통합 필요성에 따라 결정
• 장기 운영 프로젝트: Vue CLI (유지보수성 고려)

팀 프로젝트

• 팀원 수준이 다양한 경우: Vue CLI (진입 장벽 낮춤)
• 모든 팀원이 고수인 경우: 프로젝트 요구사항에 따라 선택
• 신입 개발자가 많은 경우: Vue CLI (온보딩 시간 단축)

결론

수동 Webpack 설정과 Vue CLI의 가장 큰 차이는 시간 투자 대비 가치입니다.

수동 설정을 선택해야 하는 경우:

• 웹팩과 빌드 시스템을 깊이 이해하고 싶을 때 (학습 목적)
• 기존 레거시 시스템과 복잡한 통합이 필요할 때
• 극도로 특수한 빌드 요구사항이 있을 때

Vue CLI를 선택해야 하는 경우 (대부분의 상황):

• 빠른 개발과 출시가 중요할 때
• 팀 프로젝트에서 일관성이 필요할 때
• 장기 운영되는 서비스일 때
• Vue 학습에 집중하고 싶을 때

실무에서의 현실적 조언:
수동 설정도 결국 기존 템플릿을 복사해서 수정하는 것이므로, "처음부터 다 만든다"는 생각보다는 "어떤 도구가 더 효율적인가"의 관점에서 접근하는 것이 좋습니다. 대부분의 경우 Vue CLI가 더 실용적인 선택이며, 특별한 이유가 있을 때만 수동 설정을 고려하시기 바랍니다.