뷰 프로젝트(Vue Project) 구성 방법

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

앞에서 뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하고, 페이지 사이를 이동할 때는 라우터를 사용해야 한다고 설명하였다. 특히 앞에서 다룬 예제들은 모두 HTML 파일에서 자바스크립트와 마크업을 이용하여 예시를 들었으나 실제 애플리케이션을 제작하다 보면 파일 구조에 한계를 느끼게 된다.

 

<div id="app>
	<my-component></my-component>
    <your-component></your-component>
</app>

<script>
	Vue.component('my-component', {
    	template: '<div><h5>complex markup</h5><ul><li><button>can you figure 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 Component) 체계이다.

.vue 파일로 프로젝트 구조를 구성하는 방식을 말한다.

확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다.

 

.vue 파일은 아래와 같은 기본구조를 가진다.

<template>
	<!-- HTML 태그 내용 --> //화면에 표시할 요소들을 정의하는 영역
</template>

<script>
export default {
	//자바스크립트 내용 -> 뷰 컴포넌트의 내용을 정의하는 영역
}
</script>

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

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

<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>

 

---

뷰 CLI

뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 뷰 코어 팀에서 CLI(Command Line Interface)도구를 제공한다.

CLI는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구이다.

 

뷰 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)기능을 지원하는 뷰 프로젝트

 

 

뷰 CLI로 프로젝트 생성하기 

1. 뷰 프로젝트 생성할 빈 폴더를 생성하고 빈 폴더에서 명령 프롬프트 창을 열어 vue init webpack-simple을 입력

 

2. 뷰 CLI 안내문에 따라 npm install을 입력하여 뷰 애플리케이션을 구동하기 위한 관련 라이브러리를 모두 다운로드한다. 다운로드가 완료되면 폴더 구조가 생성이 된다.

 

vue init 명령어로 프로젝트를 생성할 때 package.json 파일도 함께 생성된다. package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm 명령어 및 뷰로 애플리케이션을 제작하는 데 필요한 라이브러리 정보들을 담고 있다.

 

npm install 명령어를 실행하면 package.json의 라이브러리 목록이 전부 프로젝트의 node_modules 폴더 밑에 설치된다.

웹팩을 빌드하기 위한 바벨(Babel) 및 여러 가지 로더, 웹팩 데브 서버 등의 라이브러리와 뷰를 구현하기 위한 뷰 코어 라이브러리 등이 설치된다.

 

3. 마지막으로 npm run dev를 실행하면 브라우저가 실행되면서 뷰 초기 화면이 나타난다. 프로젝트 폴더의 index.html파일이 실행된 것이다.

 

뷰 로더

뷰 로더(Vue Loader)는 웹팩에서 지원하는 라이브러리이다. 뷰 로더는 싱글 파일 컴포넌트 체계에서 사용하는 .vue파일의 내용을 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해 준다.

 

웹팩은 자바스크립트 모듈만 인식하기 때문에 뷰 로더가 .vue파일을 일단 자바스크립트 모듈로 변환한다. 하지만 필요에 따라 웹팩의 추가 플러그인을 이용하면 웹팩으로 변환되니 자바스크립트 모듈을 CSS나 HTML 파일로 분리할 수 있다.

 

webpack.config.js

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