ksundev 님의 블로그

[Vue] CDN에서 CLI로 넘어가기 본문

[개발] Vue.js/기본

[Vue] CDN에서 CLI로 넘어가기

ksundev 2025. 6. 23. 15:12

Vue CLI로 생성한 Vue.js 애플리케이션의 기본 구조와 실행 흐름 이해하기

Vue CLI 설치하기

Vue CLI를 사용하기 전에 먼저 전역으로 설치해야 합니다:

# npm을 사용하는 경우
npm install -g @vue/cli

# yarn을 사용하는 경우
yarn global add @vue/cli

# 설치 확인
vue --version

새 프로젝트 생성

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

# 또는 특정 이름으로 생성
vue create vue3-cli

설치 과정에서 다음과 같은 옵션들을 선택할 수 있습니다:

  • Default (Vue 3): Vue 3 + 기본 설정
  • Default (Vue 2): Vue 2 + 기본 설정
  • Manually select features: 수동으로 기능 선택

🔄 Vue CLI vs 기존 CDN 방식

기존 방식 (CDN)

<!DOCTYPE html>
<html>
<head>
    <title>Vue App</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

Vue CLI 방식

  • 모듈화: 각 기능을 별도 파일로 분리
  • 빌드 도구: Webpack을 통한 최적화
  • 개발 환경: 핫 리로드, ESLint, TypeScript 지원
  • 배포 최적화: 코드 분할, 압축, 캐싱

Vue CLI가 기존의 <script> 태그 방식을 대체하여 현대적인 개발 환경을 제공합니다.

Vue CLI로 새로운 애플리케이션을 만들면 기본적으로 몇 개의 핵심 파일들이 생성됩니다. 이 파일들이 어떻게 연결되어 작동하는지 알아보겠습니다.

📁 프로젝트 구조

vue3-cli/
├── public/
│   └── index.html          # 진입점 HTML 파일
├── src/
│   ├── main.js            # Vue 앱의 시작점
│   ├── App.vue            # 루트 컴포넌트
│   ├── components/
│   │   └── HelloWorld.vue # 자식 컴포넌트
│   └── assets/
│       └── logo.png       # static assets
└── package.json           # 프로젝트 설정들

🔄 실행 흐름

1. index.html - 웹 페이지의 진입점

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

역할:

  • 웹 브라우저가 처음 로드하는 HTML 파일
  • <div id="app"></div>가 Vue 애플리케이션이 마운트될 컨테이너
  • Webpack이 빌드 시 JavaScript 파일들을 자동으로 주입

2. main.js - Vue 애플리케이션의 시작점

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

역할:

  • Vue 3의 createApp 함수로 애플리케이션 인스턴스 생성
  • 루트 컴포넌트(App.vue)를 가져와서 마운트
  • #app DOM 요소에 Vue 애플리케이션을 연결

3. App.vue - 루트 컴포넌트

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

역할:

  • 모든 컴포넌트의 최상위 부모 컴포넌트
  • 다른 컴포넌트들을 import하고 사용
  • 전역 스타일 정의

4. HelloWorld.vue - 자식 컴포넌트

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 기타 내용 -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
/* 컴포넌트별 스타일 */
</style>

역할:

  • 재사용 가능한 컴포넌트
  • 부모로부터 msg prop을 받아서 표시
  • scoped 스타일로 컴포넌트별 CSS 격리

🔗 데이터 흐름

index.html (진입점)
    ↓
main.js (Vue 앱 생성)
    ↓
App.vue (루트 컴포넌트)
    ↓
HelloWorld.vue (자식 컴포넌트)

💡 핵심 개념

1. 단일 파일 컴포넌트 (SFC)

  • .vue 파일 하나에 template, script, style이 모두 포함
  • 각 섹션이 명확히 분리되어 관리 용이

2. 컴포넌트 계층 구조

  • 부모-자식 관계로 컴포넌트 구성
  • Props를 통한 데이터 전달
  • 이벤트를 통한 자식→부모 통신

3. 빌드 프로세스

  • Webpack이 모든 파일을 번들링
  • Vue Loader가 .vue 파일을 JavaScript로 변환
  • 최종적으로 브라우저에서 실행 가능한 형태로 생성

🚀 Vue CLI 개발 서버 실행

npm run serve
# 또는
yarn serve

이 명령어를 실행하면:

  1. Webpack 개발 서버가 시작
  2. index.html을 기준으로 애플리케이션 서빙
  3. main.js가 Vue 앱을 초기화
  4. App.vue와 하위 컴포넌트들이 렌더링

🛠️ Vue CLI의 장점

  • 표준화된 프로젝트 구조: 일관된 폴더 구조와 파일 명명 규칙
  • 빌드 도구 자동 설정: Webpack, Babel, ESLint 등이 미리 구성됨
  • 핫 리로드: 코드 변경 시 자동으로 브라우저 새로고침
  • 플러그인 시스템: 필요한 기능을 쉽게 추가 가능

이렇게 Vue CLI로 생성된 애플리케이션의 기본 구조와 실행 흐름을 이해하면, 더 복잡한 기능을 추가하거나 커스터마이징할 때 훨씬 수월해진답니다 :)

'[개발] Vue.js > 기본' 카테고리의 다른 글

[SFC] 코드 작성 요령  (0) 2025.06.24
[SFC] App.vue 파일 구조  (0) 2025.06.24
Vue 데이터 바인딩: id, class, style  (0) 2025.06.22
Vue 디렉티브 - (v-if, v-show)  (0) 2025.06.21
Vue의 Component 통신 방식 - 3. 같은 level 끼리  (2) 2025.06.21
'[개발] Vue.js/기본' Related Articles more