Vue CLI 기반 프로젝트 초기화 및 구조 분석

Vue CLI는 Vue.js 공식 팀에서 제공하는 강력한 프로젝트 스캐폴딩 도구로, 개발자가 빠르게 표준화된 Vue 애플리케이션을 구성할 수 있도록 지원합니다. 이 도구는 반복적인 설정 작업을 자동화하고, 웹팩 기반의 빌드 환경, 코드 검사, 라우팅, 상태 관리 등을 통합하여 개발 생산성을 크게 향상시킵니다. 설치는 npm 또는 yarn을 통해 전역으로 수행할 수 있습니다:

npm install -g @vue/cli

설치 후 다음 명령어를 사용해 새로운 프로젝트를 생성할 수 있습니다:

vue create my-vue-app

프로젝트 생성 과정에서 다양한 옵션을 선택할 수 있으며, 주요 구성 요소는 다음과 같습니다:

Babel: 최신 JavaScript(ECMAScript 2015+) 문법을 브라우저 호환 가능한 형태로 변환
Router: 클라이언트 측 라우팅 기능 추가 (vue-router)
Vuex: 중앙 집중식 상태 관리 저장소 (Vuex)
CSS Pre-processors: Sass, Less, Stylus 등과 같은 스타일 전처리기 사용 가능
Linter / Formatter: ESLint와 Prettier를 통한 코드 품질 및 스타일 일관성 유지

초보자라면 코드 포맷팅 도구가 복잡도를 증가시킬 수 있으므로, 초기에는 Babel과 Router만 선택하고 점진적으로 기능을 확장하는 것이 좋습니다.

프로젝트 생성 단계 예시

작업 디렉터리를 생성하고 해당 위치로 이동합니다.
명령어 실행: vue create vue-project-sample
프리셋 선택 화면에서 Manually select features를 선택합니다.
방향키로 원하는 기능을 선택하고, 스페이스바로 체크합니다. 일반적으로 아래와 같이 구성합니다:

Babel, Router, Vuex, CSS Pre-processors, Linter

Vue 버전 선택: 현재 안정적인 Vue 2.x 또는 최신 Vue 3.x 중 선택
라우터 모드 선택: 해시 모드 대신 HTML5 히스토리 모드 사용 시 N 입력
CSS 전처리기 선택: 일반적으로 Less 또는 Sass를 선택
Lint 규칙 적용 시점: Lint on save 추천
설정 파일 위치: 구성 파일을 별도로 분리하는 In dedicated config files 선택
현재 선택 사항을 프리셋으로 저장할지 여부: 일회성 프로젝트라면 N

프로젝트 실행

생성된 디렉터리로 이동 후 개발 서버를 시작합니다:

cd vue-project-sample
npm run serve

또는 yarn을 사용하는 경우:

yarn serve

주요 디렉터리 및 파일 구조 설명

node_modules/: 설치된 모든 npm 의존성 모듈 포함
public/: 정적 자산 보관 폴더. 웹팩 처리 없이 그대로 출력 디렉터리에 복사됨
– index.html, favicon.ico, 외부 라이브러리 등 포함 가능
src/: 소스 코드의 핵심 디렉터리
- assets/: 이미지, 폰트, SCSS/Less 파일 등 빌드 과정에서 처리되는 리소스
- components/: 재사용 가능한 UI 컴포넌트 (.vue 파일)
- views/: 페이지 단위의 뷰 컴포넌트
- router/index.js: 라우트 정의 및 경로 매핑
- store/index.js: Vuex 기반 글로벌 상태 관리
- main.js: 앱 진입점, 루트 인스턴스 생성 및 마운트
- App.vue: 최상위 컨테이너 컴포넌트
.gitignore: Git에서 추적 제외할 파일 및 디렉터리 지정
babel.config.js: Babel 트랜스파일링 설정
package.json: 프로젝트 메타데이터, 스크립트 명령어, 의존성 목록
vue.config.js: Webpack 오버라이드, 프록시 설정, 출력 경로 변경 등 사용자 정의 구성
README.md: 프로젝트 소개 및 사용 방법 문서

public vs assets 차이점

public 폴더 내 파일은 빌드 시 그대로 / 루트 경로에 복사되며, 정적 요청으로 처리됩니다. 예를 들어 public/logo.png는 http://localhost:8080/logo.png로 접근 가능합니다.

반면 assets 폴더의 리소스는 모듈 방식으로 임포트되며, 웹팩에 의해 번들링되고 URL 해싱이 적용되어 성능 최적화 및 캐시 관리가 용이합니다. 예:

<template>
  <img src="@/assets/logo.svg" alt="Logo" />
</template>

Vue 3 프로젝트 생성

최신 Vue 3 기반 프로젝트를 생성하려면 프리셋 선택 단계에서 Default (\[Vue 3\])를 선택하면 됩니다. 이 설정은 Composition API, vite-like build 환경(webpack 5 기반), Babel, ESLint을 기본 포함합니다.

생성 후 아래 명령어로 개발 서버 실행:

cd your-vue3-project
npm run serve

Vue CLI는 대규모 팀 프로젝트에서 특히 유용하며, 일관된 코드 스타일, 자동화된 빌드 파이프라인, 환경별 배포 전략을 쉽게 구현할 수 있도록 설계되었습니다.

괴물 클럽