Vue의 SPA 원리 (feat.webpack, vue-loader..)

# vue파일들

SPA는 HTML 파일 하나, 단 하나의 파일 만을 가지고 웹 서비스를 제공한다.

단 하나의 '정적 페이지(HTML)'만을 가지고 웹 서비스를 제공한다.

하지만, 정말 웹서비스를 제공하는데 HTML파일 하나면 될까?

→ 정답은 No!!

실제 개발한 서비스를 제공하기 위해서는 필요한건 아래와 같다.

1. 웹서비스의 밑바탕을 이루는 HTML 파일

2. 스크립트 코드들이 빌드된 JS파일

3. 이미지, 폰트와 같은 정적 리소스(jpg, png 등)

보통 이렇게 3가지 구성으로 SPA의 기반이 마련되고, 하나의 웹 서비스를 제공할 수 있다.

일반적으로 SPA는 개발을 할 때, 각 파일별로 기능이 나누어져있다.

이 SPA의 파일들은 실제 서비스에 직접적으로 사용되지는 않는다.

예를 들어, Vue.js를 사용할 경우, Vue 파일들을 활용한다. 확장자가 .vue인 파일들로 기능을 나누어 개발하고 정의한다.

자, 여기서 질문이 있을 수 있다.

Q. SPA에서는 html, 하나의 파일로 서비스를 제공한다는데, vue파일'들'이라니?

A. vue파일들이 서비스를 제공한다. 다만, 서비스에 '직접적으로' 사용되지는 않고,

n개로 이루어진 형태가 아니라 단일화된 하나의 파일로써 서비스를 제공한다.

→ n개의 vue파일들이 컴파일과 빌드를 거쳐서 '단일화된 파일'인 'js파일'.

사실상 SPA의 주축, 뼈대 역할을 하는 HTML파일에는 아래와 같이 <body>태그가 작성되게 된다.

<body>
 <div id="app"></div>
 <script src="/dist/build.js"></script>
</body>

script태그를 사용해서 vue파일들이 단일화된 js파일인 build.js를 품고 있다.

여기서 한번 정리해보면,

1. SPA는 단일 파일로 하나의 '웹 서비스'를 제공한다.

2. 서비스의 기능 구현은 각 역할에 맞는 vue파일에 정의한다.

3. n개의 vue파일은 컴파일 & 빌드되어 1개의 js파일이 된다.

4. HTML파일은 빌드된 js파일을 활용한다.

# Vue.js도 결국은 JS이다.

브라우저는 HTML, CSS, JavaScript 이렇게 딱 3개밖에 모른다. 다른 것들은 전부 out of 안중.

더 정확하게는 확장자가 html, css, js인 것들을 인식해서, 그에 맞게 해석하고 화면에 보여준다.

Q. .vue 파일이 어떻게 브라우저에서 동작할까?

Vue.js를 기반으로 프론트엔드 개발을 할 때, 우리는 확장자가 *.vue인 파일들을 사용한다.

.vue도 html, js, css가 아닌 out of 안중 확장자인데도 불구하고 브라우저에서 동작한다.

어떻게!???

→ *.vue는 JavaScript로 인식하여 브라우저가 동작한다.

우리가 작성한 *.vue파일을 브라우저가 "아, 얘는 JavaScript구나"라고 인식할 수 있게 변환해주는 작업이 필요하다.

또한, n개의 *.vue파일을 하나의 JS파일로 모아주는 작업도 필요하다.(위 코드의 build.js같이)

이 작업을 도와주는 친구가 바로

→ webpack

다시 정리해보자.

1. *.vue파일은 Vue.js에서 활용되는 파일. 내부 코드는 Vue.js 문법에 기초해서 작성되었다.

2. 브라우저는 html, css, js 말고는 모른다.

3. 그렇기 때문에 *.vue파일 내의 코드들을 js코드로 변환해줘야한다.

4. 그리고 js코드로 변환된 *.vue파일 내의 코드들을 하나의 js파일로 모아주는 작업도 필요하다.

5. 이 때 사용되는 것이 바로 webpack

# webpack

- 웹앱의 자원(html, 이미지 등)들을 자바스크립트 모듈로 변환 → 변환된 자바스크립트들을 하나로 묶음으로써 웹 성능을 향상시켜주는 '자바스크립트 모듈 번들러'.

## 모듈 번들러

- 모듈 : 쉽게 이해하자면, 파일 1개가 module 1개.

모듈은 입맛 까다로운 브라우저처럼 특정 파일 형식을 가리지 않는다.

html, js, css는 당연하고, vue, scss, jsx를 비롯해 정적 리소스인 jpg, png와 같은 파일까지도 모두 모듈로 정의.

이러한 각 모듈들에 알맞는 형식(loader)을 적용해 변신 & 합체와 같은 정리를 해주는 걸 bundle.

그런 역할을 webpack이 해주기 때문에 접미사 '-er'을 붙여 "Module Bundler"라고 부른다.

한번 더 정리!

1. Webpack은 module bundler이다.

2. 개발할 때 쓰이는 각 파일 하나하나가 module.

3. .vue파일 하나하나는 각각 module이다.

4. Webpack이 bundle이라는 과정을 거쳐 .vue파일을 .js파일로 변환.

## Loader(로더)

webpack에서 다양한 종류의 파일들이 모두 모듈이다.

그리고 webpack이 그런 모듈들을 변신 & 합체하여 번들링하고, 실제 브라우저에서 동작이 가능하게끔 정리해준다.

각 모듈들 즉, 각 파일들은 당연히 다 다르다.

(당연히 확장자부터 파일 포맷, 바이너리까지 다르다.)

그렇기에 번들 작업이 진행될 때는 각 파일에 맞는 형식으로 번들이 진행되어야 한다.

(즉, vue파일인 모듈은 vue파일에 맞는 형식으로 번들진행, css파일모듈은 css파일에 맞는 형식으로 번들 진행)

이때 사용되는 개념이 loader.

.vue파일을 webpack이 해석하고자 할 때는 vue-loader를 사용한다.

## vue-loader

참고로, webpack은 자바스크립트 모듈만 인식할 수 있다.

따라서 vue-loader가 ".vue파일"을 자바스크립트 모듈로 변환시킨다.

vue-loader는

- webpack에서 지원하는 라이브러리

- webpack의 플러그인 중 하나(**Plugin: 소프트웨어나 응용프로그램의 기능을 확장하거나 변경하기 위해 사용되는 소프트웨어 구성요소. 주로 별도로 개발되어 원래 소프트웨어에 추가되어 확장기능을 제공.)

- webpack의 loader 중 하나

- SFC 체계에서 사용하는 .vue파일의 내용을 브라우저에서 실행 가능한 웹페이지의 형태로 변환.

- .vue파일 처리 : Vue.js 앱에서 '.vue'확장자를 가진 파일은 html 템플릿, js 스크립트, style을 포함하고 있다.

'vue-loader'는 이러한 '.vue'파일을 파싱하고, html템플릿, js 스크립트, style을 추출한다.

<template> ⇒ JavaScript 함수(render함수) 또는 template옵션으로 컴파일한다.
- render함수는 가상 DOM을 생성하고, 템플릿의 data와 vue를 동기화하는 Vue컴포넌트의 일부로 사용됨.

// 예시 컴포넌트
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  // 템플릿 부분
  render() { //render함수
    return this.$createElement('div', this.message);
  },
};

<script> ⇒ JavaScript로 변환. 해당 컴포넌트를 Vue 인스턴스로 초기화하는 코드로 컴파일.
<style> ⇒ CSS로 변환

이렇게 template, script 는 자바스크립트로 변환된다.

<!-- MyComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

<style scoped>
div {
  color: blue;
}
</style>

▼

위 '.vue'파일은 아래와 같이 번들링 될 수 있다.

// build.js
import Vue from 'vue';

export default {
  template: '<div>{{ message }}</div>', //render함수 대신, template옵션으로
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};

webpack은 이러한 자바스크립트 모듈을 자신의 bundle에 집어넣어 하나의 js파일로 만든다.(위에서는 build.js)

build.js 파일의 간단한 예시. (vue-cli사용하기 전의 app.js파일과 비슷한 형태)

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

Vue.config.productionTip = false;

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

## .vue에서 CSS로 변환된 <style>은?

CSS로 변환된 style은 각 CSS들끼리 bundling되어 하나의 CSS파일(styles.css)로 추출된다.

(MiniCssExtractionPlugin이라는 webpack 플러그인이 CSS파일을 별도의 파일로 추출한다.)

이렇게 번들링 된 파일들을 서버로부터 받아올 때,

index.html 파일 하나, build.js 파일, 그리고 별도로 추출된 css파일 이렇게 넘어온다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your App</title>
  <link rel="stylesheet" href="styles.css"> <!-- 추출된 CSS 파일 로드 -->
</head>
<body>
  <div id="app"></div>
  <script src="build.js"></script><!--번들링된 build.js-->
</body>
</html>

위에 설명한 내용들을 정리도 할 겸, 도식화를 해보았다.

참고: 너무나도 도움이 많이 된 글! (거의 이 글을 정리해서 다듬었다고 해도 무방하다!)

https://blinders.tistory.com/72

[Vue.js_#03] N : 1 (feat. webpack)

0. 시작하기에 앞서 사실 저번 편에 이어서 이번 편도 좀 지루하지 않을까, 라는 생각이 듭니다. 대체 Vue.js 에 대해서 설명하는 포스팅이라고 해놓고 Vue.js를 실질적으로 활용하는 설명은 어디 있

blinders.tistory.com

'Vue.js' 카테고리의 다른 글

[Udemy Vue 완벽가이드 Section16] 234. 데이터 요구 사항 계획하기 (1)	2023.12.08
[Udemy Vue 완벽가이드 Section16] 메인 프로젝트:"코치 찾기" 웹앱 233. 프로젝트/웹앱 계획하기 (1)	2023.12.08
[Udemy Vue 완벽가이드 Section15] 230. 요약 (0)	2023.11.14
[Udemy Vue 완벽가이드 Section15] 226. 도전 과제! (0)	2023.11.13
[Udemy Vue 완벽가이드 Section15] 225. Vuex 코드 및 파일 구조화하기 (0)	2023.11.12

더나은세상을위해

Vue의 SPA 원리 (feat.webpack, vue-loader..)

# vue파일들

# Vue.js도 결국은 JS이다.

Q. .vue 파일이 어떻게 브라우저에서 동작할까?

# webpack

## 모듈 번들러

## Loader(로더)

## vue-loader

## .vue에서 CSS로 변환된 <style>은?

'Vue.js' 카테고리의 다른 글

티스토리툴바

Vue의 SPA 원리 (feat.webpack, vue-loader..)

# vue파일들

# Vue.js도 결국은 JS이다.

Q. .vue 파일이 어떻게 브라우저에서 동작할까?

# webpack

## 모듈 번들러

## Loader(로더)

## vue-loader

## .vue에서 CSS로 변환된 <style>은?

'Vue.js' 카테고리의 다른 글

'Vue.js' Related Articles

티스토리툴바