[Vuejs] Vuejs의 컴포넌트와 webpack

Vuejs의 폴더를 살펴보면 src 폴더가 존재하는데, 이 폴더 안에 존재하는 파일들(모듈, 혹은 컴포넌트)이 webpack의 패키징 대상 파일들이다.

모듈

하나의 자바스크립트 안에는 여러 개의 모듈들이 존재한다. 이 모듈들은 서로 참조할 수 있다. 즉, 상호의존적인 관계이다. 서로 필요로 하는 모듈을 임포트 해서 사용할 수 있으며 각 모듈은 완전히 독립적인 컴포넌트이다.

모듈1
    import 모듈2;
    import 모듈3;
모듈2
    import 모듈3;
모듈3

여러 개의 컴포넌트, 혹은 모듈들이 import/export 관계로 구성되어져 있다. 모듈의 개수가 많고, 모듈간의 의존 관계가 복잡하면 복잡할수록 하나 혹은 하나 이상의 자바스크립트로 만들어야 한다. 여기서 webpack이 이러한 상호의존관계인 모듈관계를 분석해서 하나 이상의 자바스크립트 파일로 패키징을 한다. 또 바벨은 비표준 자바스크립트 코드(template, script, style로 구성된 vue 파일)을 순수 자바스크립트 코드로 변환해 주는 도구이다.

웹팩을 통해 패키징된 자바스크립트 파일은 index.html에 들어가는데, id=”app” 속성을 갖고 있는 div 바로 아래에 위치하게 된다. (app.js)

    <div id="app"></div>
    <!-- built files will be auto injected -->

요약하자면 src에는 여러 컴포넌트(모듈)이 존재하고, 이를 웹팩이 app.js로 변환해 준다. 이를 기반으로 만들어진 것이 vue 애플리케이션이다. app.js는 모든 컴포넌트의 정보와 라우터 정보를 갖고 있어 클라이언트가 요청한 url에 따라서 다른 응답을 수행할 수 있다.

router

index.js는 라우팅 정보가 정의된 파일이다. vue router를 사용해서 페이지를 이동할 수 있다. Vue.js의 공식 라우터로 SPA를 쉽게 구축할 수 있고, 화면 간의 이동 시 깜빡거림 없이 매끄럽게 전환되는 장점이 있다.

    import { createRouter, createWebHistory } from 'vue-router'
    import Home from '../vies/Home.vue'

    const routes = [
	{
		path: '/', // 이 url일 때
		name: 'Home',
		components: Home // 이 컴포넌트가 보여져야 한다
	}
]

위 코드와 같이 필요한 모듈을 import 시키고, url과 컴포넌트들을 매핑시킨다. App.vue의 <router-view>는 url과 매핑된 컴포넌트를 표시하는 곳이다.

index.html에는 위에서 봤던 것처럼 <div id=”app”>인 div가 존재하는데, 이 div 안에 App.vue 컴포넌트가 들어간다. 위에서 설명한 것처럼 app.js는 모든 컴포넌트의 정보와 라우터 정보를 갖고 있어, 요청 url에 따라서 router-view에 들어가는 컴포넌트가 달라진다.