Vue 프로젝트 로딩 과정 분석: index.html부터 컴포넌트 렌더링까지

Vue 프로젝트를 실행하면 브라우저에서 애플리케이션이 어떻게 구성되고 로딩되는지 이해하는 것은 중요합니다. 이 글에서는 Vue CLI로 생성된 기본 프로젝트를 기준으로 index.html, main.js, App.vue, index.js(라우터 설정 파일)의 관계와 로딩 순서를 분석합니다.

프로젝트 구조 개요

Vue CLI로 생성된 프로젝트는 일반적으로 다음과 같은 핵심 파일들로 구성됩니다:

index.html: 최초 진입점 HTML 파일
src/main.js: Vue 인스턴스를 생성하고 애플리케이션을 초기화하는 파일
src/App.vue: 최상위 컴포넌트
src/router/index.js: 라우트(경로)를 정의하는 파일

1. index.html: 시작점

브라우저가 가장 먼저 로딩하는 파일입니다. Webpack 빌드 설정(예: webpack.dev.conf.js)에 의해 이 파일이 진입점으로 지정됩니다. index.html의 기본 구조는 다음과 같습니다:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

핵심은 <div id="app"></div>입니다. 이 DOM 요소가 Vue 인스턴스가 마운트될 타겟이 됩니다. Webpack은 빌드 시 자바스크립트 번들을 이 파일에 자동으로 주입합니다.

2. main.js: Vue 인스턴스 생성 및 마운트

Webpack에 의해 번들링된 자바스크립트 코드가 실행되면서 main.js가 호출됩니다. 이 파일은 Vue 애플리케이션의 진입점 역할을 합니다:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
}).$mount('#app')

주요 동작:

el: '#app'을 통해 index.html의 <div id="app">를 찾아 Vue 인스턴스를 연결합니다.
router를 주입하여 애플리케이션 전체에서 라우팅을 사용할 수 있게 합니다.
render: h => h(App)은 App.vue 컴포넌트를 최상위 컴포넌트로 렌더링하도록 지시합니다. (이전 버전에서는 template: '<App/>'를 사용했지만, render 함수가 더 일반적입니다.)

3. App.vue: 최상위 레이아웃 컴포넌트

main.js에 의해 렌더링되는 첫 번째 컴포넌트입니다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view />
  </div>
</template>

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

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

<router-view>는 Vue Router가 제공하는 특수 컴포넌트입니다. 현재 URL에 매칭되는 라우트의 컴포넌트가 이 위치에 동적으로 렌더링됩니다. 즉, <router-view>가 뷰포트(viewport) 역할을 하며, 라우트 변경 시 콘텐츠가 교체됩니다.

4. router/index.js: 라우트 정의 파일

라우트 설정 파일로, URL 경로와 컴포넌트를 매핑합니다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

이 코드는 / 경로에 HelloWorld 컴포넌트를 할당합니다. 사용자가 루트 경로(/)에 접근하면 HelloWorld.vue가 App.vue의 <router-view> 안에 렌더링됩니다.

5. HelloWorld.vue: 실제 콘텐츠 렌더링

라우트에 의해 호출되는 실제 컴포넌트입니다. 화면에 표시되는 각종 링크, 텍스트, 이미지 등이 여기서 정의됩니다. (자세한 내용은 생략)

로딩 순서 요약

브라우저가 index.html을 다운로드하고 파싱합니다.
index.html의 <div id="app"> 요소를 파싱하고, Webpack 번들이 로딩됩니다.
main.js가 실행되며 Vue 인스턴스를 생성하고 App.vue를 루트 컴포넌트로 설정합니다.
App.vue의 템플릿이 렌더링되면서 <router-view>가 준비됩니다.
라우터 설정(index.js)을 기반으로 현재 URL에 맞는 컴포넌트(예: HelloWorld.vue)가 <router-view> 위치에 렌더링됩니다.

이 과정은 컴포넌트 기반 아키텍처와 라우팅이 어떻게 협력하여 단일 페이지 애플리케이션(SPA)을 구성하는지 보여줍니다.

태그: vue index.html main.js App.vue router

6월 5일 01:31에 게시됨

괴물 클럽