뷰 애플리케이션의 실행 과정

Vue 애플리케이션의 실행 과정에서 package.json, index.html, main.js, App.vue는 각기 다른 역할을 맡으면서 유기적으로 연결되어 애플리케이션을 구동합니다. 그에 대해 앞선 글에서 뷰 애플리케이션의 기본 구조를 설명했습니다.

그렇다면 이것들이 어떻게 동작하는지 실행 흐름에 맞춰 설명해 보겠습니다.

 

1. package.json과 개발 서버 실행

• 역할 : package.json은 Vue 애플리케이션의 메타 정보와 스크립트를 정의한 파일입니다.
• 연관 : npm run dev 명령어를 실행하면 package.json 파일의 scripts에 정의된 serve 명령어(vue-cli-service serve)가 호출됩니다. 이 명령어는 개발 서버를 구동하고, 소스 파일을 감시하며 변경 사항을 실시간으로 반영합니다.
• 흐름 : npm run dev → 개발 서버 구동 → index.html로 진입

2. index.html과 애플리케이션 진입점

• 역할 : 개발 서버가 구동되면 브라우저는 index.html을 불러옵니다. 이 HTML 파일은 Vue 애플리케이션이 렌더링될 기본 구조를 정의하며, Vue 인스턴스가 마운트되는 <div id="app"></div> 요소를 포함합니다.
• 연관 : index.html은 Vue 애플리케이션의 진입점으로, 이 파일에서 main.js 스크립트가 포함되어 있습니다. 브라우저는 main.js 파일을 불러와 Vue 인스턴스를 생성하고, #app 요소에 Vue 컴포넌트를 마운트합니다.
• 흐름 : index.html → <div id="app"></div> 정의 → main.js 스크립트 호출

3. main.js와 Vue 인스턴스 생성

• 역할 : main.js는 Vue 애플리케이션의 진입점 파일로, Vue 인스턴스를 생성하고 루트 컴포넌트(App.vue)를 애플리케이션의 마운트 대상에 연결하는 역할을 합니다.
• 연관 : main.js는 App.vue 파일을 가져와 createApp(App)을 통해 Vue 애플리케이션을 생성합니다. 이후 mount('#app')을 통해 index.html 파일에 정의된 #app 요소에 애플리케이션을 마운트합니다. 이로써 Vue 컴포넌트들이 브라우저에 렌더링됩니다.
• 흐름 : main.js → Vue 인스턴스 생성 → App.vue 컴포넌트 마운트 → #app 요소에 추가

4. App.vue와 첫 화면 렌더링

• 역할 : App.vue는 Vue 애플리케이션의 루트 컴포넌트입니다. 이 컴포넌트는 애플리케이션의 기본 화면 구조를 정의하고, 다른 하위 컴포넌트들을 포함할 수 있습니다.
• 연관 : main.js에서 App.vue를 루트 컴포넌트로 설정하여, 이 컴포넌트의 내용이 브라우저에서 첫 화면으로 렌더링됩니다. 즉, 사용자가 웹 브라우저에서 주소를 입력하면 처음 보게 되는 화면은 App.vue의 템플릿입니다.
• 흐름 : App.vue → 루트 컴포넌트로서 브라우저에 렌더링 → 첫 화면 출력

전체적인 실행 흐름 요약

1. npm run dev 명령어 실행 → **package.json**의 scripts에 따라 개발 서버 구동
2. 개발 서버가 **index.html**을 불러옴 → **<div id="app"></div>**에 Vue 애플리케이션이 마운트될 준비
3. **index.html**에서 main.js 호출 → Vue 인스턴스 생성 및 **App.vue**를 #app 요소에 마운트
4. App.vue 컴포넌트가 루트 컴포넌트로 렌더링 → 브라우저에서 첫 화면 출력

이 과정에서 package.json은 서버 구동과 의존성 관리를 담당하고, index.html은 Vue 애플리케이션의 진입점이자 마운트 요소를 제공합니다. main.js는 Vue 인스턴스를 생성하고 App.vue를 브라우저에 연결하며, App.vue는 최종적으로 렌더링되는 화면의 구조를 제공합니다.