5장. 화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성

5장. 화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성 - 2

개발 공부/Do it! Vue.js 입문 2025. 5. 26. 09:00

5장 - 2

05-2 뷰 프로젝트 구성 방법

<HTML 파일에서 뷰 코드 작성 시의 한계점>

앞에서 뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하고, 페이지 사이를 이동할 때는 라우터를 사용해야 한다고 설명했다. 특히 앞쪽에서 살펴본 예제들은 모두 HTML 파일에서 예시를 들었는데 실제로 애플리케이션을 제작하다 보면 아래와 같이 한계점을 느끼게 된다.

...
<div id="app">
    <my-component></my-component>
    <your-component></your-component>
</div>
... 
<script>
    Vue.component('my-component', {
        template: `
            <div><h5>complex markup</h5><ul><li><button>can you fiqure this syntax out?</button></li>
            <li><p style="color:blue;">this is the second list item</p></li><li><strong>continue on adding
            more items</strong></li></ul></div>           
            `
    });
    
    Vue.component('your-component', {
        template: `<div><span style="font-size:1.2em;"><button>{{ message }}</button></span></div>`
    });

    new Vue({
        el: '#app',
        data: {
            message: 'click this button'
        }
    });
</script>

위 코드는 HTML 파일에 뷰 컴포넌트를 2개 등록하고, <script> 태그 안에 컴포넌트의 template 속성을 추가한 코드이다.
이 파일을 실행하기 전에 브라우저의 결과를 미리 예측할 수 있을까? 쉽지 않을 것이다.
왜냐하면 일단 <script> 태그 안에서 HTML 코드는 구문 강조가 적용되지 않아 오탈자를 찾기 어렵고, 들여쓰기도 어려워 태그의 관계를 파악하기도 어렵다.

<싱글 파일 컴포넌트 체계>

위와 같은 문제점을 해결하는 방법이 싱글 파일 컴포넌트(Single File Components)체계이다.
싱글 파일 컴포넌트 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다.
확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다.
.vue 파일은 아래와 같은 기본 구조를 가진다.

<template> <!-- 화면에 표시할 요소들을 정의하는 영역   예) HTML + 뷰 데이터 바인딩 -->
    <!-- HTML 태그 내용 -->
</template>

<script> // 뷰 컴포넌트의 내용을 정의하는 영역   예) template, data, methods 등
export default {
    // 자바스크립트 내용
}
</script>

<style> /* 템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 */
    /* CSS 스타일 내용 */
</style>

<script>의 export default { } 코드는 ES6의 자바스크립트 모듈화와 관련된 문법이다. 여기서는 쉽게 export default { } 안에는 해당 컴포넌트 동작을 정의하는 코드를 추가한다는 것만 알고 있으면 된다. ES6의 export 문법은 7장에서 자세하게 알아볼 것이다.

앞 예제의 <your-component>를 싱글 파일 컴포넌트 체계로 변환하면 다음과 같다.

<!-- your-component.vue -->
<template>
    <div>
        <span>
            <button>{{ message }}</button>
        </span>
    </div>
</template>

<script>
export default {       
    data: {
        message: 'click this button'
    }
}
</script>

<style>
span {
    font-size: 1.2em;
}
</style>

이러한 방식으로 <template> 태그 안에는 HTML 태그와 뷰 데이터 바인딩 값들을 넣고, <script> 태그에는 뷰 컴포넌트에서 사용할 속성들을 정의한다. 마지막으로 <style> 태그에는 HTML 태그의 스타일 속성들을 정의한다.

<뷰 CLI>

싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요하다.
웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러(module bundler)이다.
- 모듈 번들러 : 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어 주는 도구
브라우저리파이도 웹팩과 유사한 성격의 모듈 번들러지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 같은 기능이 없다.
- 웹팩과 브라우저리파이에 대해 더 궁금하다면?
  - 웹팩 공식 사이트 : https://webpack.js.org/
  - 웹팩 한글 강의 : https://www.inflearn.com/course/webpack-%EC%9B%B9%ED%8C%A9-%EA%B0%95%EC%A2%8C/
  - 브라우저리파이 공식 사이트 : https://browserify.org/

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

쉽게 배우는 Webpack 강의 | 장기효(캡틴판교) - 인프런

장기효(캡틴판교) | , [사진] 1. 강좌 소개 최신 프론트엔드 프레임워크(React, Angular, Vue)에서 필수로 사용되는 도구인 Webpack의 기본 개념을 학습하는 강좌입니다. Webpack에 막연한 두려움을 가지

www.inflearn.com

Browserify

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node. Here is a tutorial on how to use Browserify on the command line to bundle up a simple file

browserify.org

뷰 프레임워크를 배우는 것도 바쁜데 이런 복잡한 도구들까지 배우기에는 부담스럽다.
그래서 뷰 개발자 들이 편하게 프로젝트를 구성할 수 있도록 뷰 코어 팀에서 CLI(Command Line Interface) 도구를 제공한다.
CLI는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구이며, CLI에서 제공하는 명령어를 이용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성할 수 있다.
- 뷰 CLI를 설치하려면 Node.js가 설치되어 있어야 한다.

뷰 CLI 설치

명령 프롬프트 창(윈도우) 또는 터미널(맥)을 실행한 후 아래와 같이 입력한다.

npm install vue-cli -global

명령어를 실행하면 설치가 진행되고 뷰 CLI가 시스템 레벨에 설치된다.
시스템 레벨에 설치되었다는 말은 명령 프롬프트 창에서 vue를 입력하면 아래처럼 명령어를 인식한다는 의미이다.

뷰 CLI 명령어

뷰 개발을 시작할 때 초기 프로젝트를 쉽게 구성해 주는 명령어는 vue init 이다.
vue init 명령어를 입력할 때 사용하는 프로젝트 템플릿 종류는 아래와 같이 6가지이다.

템플릿 종류	설명
vue init webpack	고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
vue init webpack-simple	웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
vue init browserify	고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
vue init browserify-simple	브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
vue init simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa	웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

템플릿의 내용은 각기 다르지만 전체적인 맥락에서 볼 때 크게 2가지는 비슷하다.
첫째, 웹팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용할 수 있다.
둘째, .vue 파일을 HTML, CSS, 자바스크립트 파일로 변환해 주기 위한 뷰 로더(Vue Loader)를 포함하고 있다.
결론적으로 .vue 파일 방식으로 애플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요하다는 것을 알 수 있다.

앞에서 언급한 템플릿 중 웹팩과 기타 기능에 신경 쓰지 않고 뷰 프레임워크 자체에 가장 집중할 수 있는 템플릿은 webpack-simple이다.
webpack 템플릿은 웹팩의 여러 가지 기능과 함께 테스팅 라이브러리, 문법 검사 라이브러리를 모두 포함하고 있기 때문에 프로젝트 구성 방식을 파악하는 데 상당한 시간이 소요된다. 그리고 까다로운 문법 검사로 인해 화면을 빠르게 구현하기가 어렵다.
반면 webpack-simple 템플릿은 뷰로 개발하기 위한 웹팩의 최소 기능들만 있어 프로젝트 구성 자체가 간단하다.

<뷰 CLI로 프로젝트 생성하기>

1. 프로젝트를 생성할 빈 폴더를 하나 생성하고, 빈 폴더에서 명령 프롬프트 창을 열어 vue init webpack-simple을 입력한다.
명령어를 입력한 후 다음과 같이 질문에 답을 한다.
프로젝트 이름, 설명, 제작자는 기본적으로 설정된 값을 사용해도 되고 다른 값을 입력해도 된다. 마지막에 Sass라는 확장된 CSS 언어 설치 여부를 묻는데 CSS로도 충분히 가능하기 때문에 'No'로 설정한다.

2. 뷰 CLI 안내문에 따라 npm install을 입력하여 뷰 애플리케이션을 구동하기 위한 관련 라이브러리를 모두 다운로드한다. 다운로드가 완료되면 다음과 같은 폴더 구조가 생성된다.
- node_module : npm install 명령어로 다운받은 라이브러리가 존재하는 위치
- src : .vue 파일을 비롯하여 애플리케이션이 동작하는 데 필요한 로직이 들어갈 위치
- index.html : 뷰로 만든 웹 앱의 시작점. npm run dev 실행 시 로딩되는 파일
- package.json : npm 설정 파일. 뷰 애플리케이션이 동작하는 데 필요한 라이브러리들을 정의하는 파일
- webpack.config.js : 웹팩 설정 파일. 웹팩 빌드를 위해 필요한 로직들을 정의하는 파일

여기서 잠시 package.json의 내용을 살펴보자.

{
  "name": "cli-template",			// 
  "description": "A Vue.js project",		// 프로젝트
  "version": "1.0.0",				// 정보
  "author": "impnem <impnem@gmail.com>",	//
  "license": "MIT",
  "private": true,
  "scripts": { // npm 실행 명령어
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": { // 이 아래로 뷰, 웹팩 관련 라이브러리
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

vue init 명령어로 프로젝트를 생성할 때 package.json 파일도 함께 생성된다. package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm 명령어 및 뷰로 애플리케이션을 제작하는 데 필요한 라이브러리 정보들을 포함하고 있다.
npm install 명령어를 실행하면 package.json의 라이브러리 목록이 전부 프로젝트의 node_modules 폴더 밑에 설치된다. 웹팩을 빌드하기 위한 바벨(Babel) 및 여러 가지 로더, 웹팩 데브 서버 등의 라이브러리와 뷰를 구현하기 위한 뷰 코어 라이브러리(2.5.11)등이 설치된다.

3. 마지막으로 npm run dev를 실행하면 브라우저가 실행되면서 아래와 같은 화면이 나타난다.
이 화면은 웹팩에서 로컬 서버를 하나 띄우고 localhost:8080으로 접근하여 애플리케이션을 실행한 모습니다.
프로젝트 폴더의 index.html 파일이 실행된 것이다.

그리고 명령어를 실행한 명령 프롬프트 창에는 다음과 같은 내용이 표시된다.

맨 밑 1줄을 제외한 위 3줄은 뷰 프로젝트가 http://localhost:8080/에 구동되고 있음을 알려주면서 웹팩 결과 값(output)이 /dist/에서 제공되고 있다는 의미이다.

<뷰 로더>

뷰 로더(Vue Loader)는 웹팩에서 지원하는 라이브러리이다.
뷰 로더는 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해 준다.
예를 들어, 앞에서 뷰 CLI로 webpack-simple 프로젝트를 생성하고 실행했을 때 App.vue 파일의 내용이 웹 페이지에 표시되는 것을 확인할 수 있었다. App.vue 파일에서 <template>, <script>, <style>의 내용이 각각 HTML, 자바스크립트, CSS 코드로 인식될 수 있도록 뷰 로더가 변환 작업을 수행한 것이다.
이 변환 기능은 웹팩에서 맡고 있으며, 그 중에서도 웹팩에 설정된 뷰 로더가 변환 기능을 수행한다.
웹팩은 자바스크립트 모듈만 인식할 수 있기 때문에 뷰 로더가 .vue 파일을 일단 자바스크립트 모듈로 변환한다. 하지만 필요에 따라 웹팩의 추가 플러그인을 이용하며 변환된 자바스크립트 모듈을 CSS 나 HTML 파일로 분리할 수 있다.

웹팩 설정 파일의 뷰 로더 속성 확인

뷰 로더가 웹팩에서 어떻게 설정되어 있는지 확인하기 위해 웹팩 설정 파일의 뷰 로더 속성을 확인해보자.
앞에서 생성된 webpack.config.js 파일을 보면 아래와 같이 뷰 로더가 적용되어 있다.

  module: {
    rules: [
      {
        test: /\.vue$/, // 대상 파일 지정
        loader: 'vue-loader', // 사용할 로더 지정
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },

module과 rules는 웹팩의 로더(Loader)를 설정하는 속성이다.
여기서 주목해야 하는 부분은 test, loader 속성이다.
test는 로더가 적용될 대상 파일을 지정하는 속성이고, loader는 적용할 로더의 종류를 지정하는 속성이다.
위 코드는 프로젝트 폴더 내에서 .vue 확장자를 가진 파일을 모두 선택하여 뷰 로더를 적용하는 코드이다. 그리고 .vue 파일을 선택하기 위해 자바스크립트 정규 표현식을 사용하였다.
위 설명을 더 쉽게 이해하기 위해 프로젝트에 아래와 같이 .vue 파일 컴포넌트가 있다고 가정하면 뷰 로더는 프로젝트 폴더의 모든 .vue 파일에 적용된다.

프로젝트 폴더 내의 어느 위치든 .vue 파일을 생성할 수 있지만 체계적인 프로젝트 폴더 구조를 위해 일반적으로 src 폴더 밑에 컴포넌트(.vue) 파일을 배치한다.

뷰 CLI로 생성한 프로젝트에 웹팩과 뷰 로더가 기본적으로 설정되어 있기 때문에 웹팩을 몰라도 어느 정도의 가벼운 화면 프로토타이핑은 가능하다.
뷰 CLI로 프로젝트를 구성하는 과정을 정리하면 아래와 같다.
1. 뷰 CLI 설치 : npm i vue-cli -g
2. 프로젝트 생성 : vue init webpack-simple
3. 관련 라이브러리 설치 : npm install
4. 프로젝트 구동 : npm run dev

해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글

6장. 실전 애플리케이션 만들기 - 2 (0)	2025.05.28
6장. 실전 애플리케이션 만들기 - 1 (1)	2025.05.27
5장. 화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성 - 1 (0)	2025.05.25
4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신 - 2 (2)	2025.05.24
4장. 상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신 - 1 (1)	2025.05.23

ABOUT ME

애딤프의 블로그

5장 - 2

05-2 뷰 프로젝트 구성 방법

<HTML 파일에서 뷰 코드 작성 시의 한계점>

<싱글 파일 컴포넌트 체계>

<뷰 CLI>

뷰 CLI 설치

뷰 CLI 명령어

<뷰 CLI로 프로젝트 생성하기>

<뷰 로더>

웹팩 설정 파일의 뷰 로더 속성 확인

'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글

티스토리툴바

ABOUT ME

5장 - 2

05-2 뷰 프로젝트 구성 방법

<HTML 파일에서 뷰 코드 작성 시의 한계점>

<싱글 파일 컴포넌트 체계>

<뷰 CLI>

뷰 CLI 설치

뷰 CLI 명령어

<뷰 CLI로 프로젝트 생성하기>

<뷰 로더>

웹팩 설정 파일의 뷰 로더 속성 확인

'개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바