뷰 프로젝트 구성 방법

뷰 프로젝트 구성 방법

---

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 figure this syntax out?</button></li>
                    <li><p style = "color:blue;">this is the second list item</p></li>
                </ul>
            </div>`
    });
 
    Vue.component('your-component', {
        template : `<div><span style = "font-size : 11px;"><button>{{ message }}</button></span></div>`;
    });
 
    new Vue({
        data : {
            message : 'click this button'
        }
    }).$mount('#app');
</script>

위의 코드에서 가장 큰 문제는 각 컴포넌트의 template 속성에 작성한 HTML 태그를 한 눈에 보기 어렵고, 오탈자나 배치 구조를 한 눈에 파악하기가 어렵다는 점이다.

또한 코드를 들여쓰기 하는 것이 어렵기 때문에 상위 태그와 하위 태그의 관계를 파악하기가 어렵다.

이러한 문제점들만 봐도 이것을 실무에 사용할 수 없는 구조라는 것을 알 수 있다.

싱글 파일 컴포넌트 체계

---

위와 같은 문제점들을 해결하는 방법은 바로 싱글 파일 컴포넌트 체계로 프로젝트를 구성하는 것이다.

싱글 파일 컴포넌트 체계란 확장자가 .vue인 파일로 프로젝트를 구성하는 방식을 이야기한다.

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

(.vue 파일의 기본 구조)

앞에서 살펴본 예제 중 <your-component>를 싱글 파일 컴포넌트 쳬계로 적용하면 다음과 같다.

<template>
    <div>
        <span>
            <button>{{ message }}</button>
        </span>
    </div>
</template>
 
 
<script>
    export default {
        data : {
            message : 'click this button'
        }
    }
</script>
 
 
<style>
    span {
        font-size : 11px;
    }
</style>

<template> 태그에 HTML 태그와 뷰 데이터 바인딩 값들을 정의하고

<script> 태그에는 뷰 컴포넌트에서 사용할 속성들을 정의한다.

<style> 태그는 HTML 태그의 스타일 속성들을 정의한다.

처음에 본 코드보다 훨씬 가독성이 좋아지고 코드가 간결해졌다.

뷰 CLI

---

싱글 파일 컴포넌트 체계를 사용하기 위해선 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 도구가 필요하다.

그것을 해주는 도구는 웹팩이 존재하는데, 현재 그것을 다루기엔 워낙 범위가 넓고 깊은 내용들을 다뤄야하므로 다루지 않고 뷰 코어 팀에서 제공하는 뷰 CLI를 이용하여 사용해보자.

(뷰 CLI를 설치하려면 Node.js가 설치되어 있어야 한다.)

• 뷰 CLI 설치하기

뷰 CLI를 설치해보자.

터미널에서 npm install vue-cli -g 로 전역으로 설치한다.

npm 패키지를 설치하고 나서 터미널에 vue를 치면 아래와 같이 나오면 설치가 정상적으로 된 것이다.

• 뷰 CLI 명령어

프로젝트 초기 구성을 위한 명령어를 알아보자.

뷰 개발을 시작할 때 초기 프로젝트를 구성해주는 명령어는 vue init이다.

vue init 명령어를 입력할 때 사용하는 프로젝트 템플릿 종류는 다음과 같다.

템플릿 종류	설명
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가지는 비슷하다.

1. 웹팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용할 수 있다.
2. .vue 파일을 HTML, CSS, JS 파일로 변환해주기 위한 뷰 로더(Vue Loader)를 포함하고 있다.

결론적으로 .vue 파일 방식으로 애플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요하다는 것을 알 수 있다.

위의 6가지 템플릿 중 웹팩과 기타 기능에 신경쓰지 않고 뷰 프레임워크 자체에 집중할 수 있는 템플릿은 webpack-simple이다.

webpack 템플릿은 웹팩의 여러 기능과 테스팅 라이브러리, 문법 검사 라이브러리를 포함하고 있기 때문에 프로젝트 구성 방식을 파악하는데 상당한 시간이 필요하다.

반면 webpack-simple 템플릿은 뷰로 개발하기 위한 웹팩의 최소 기능들만 있기 때문에 프로젝트 구성 자체가 간단하다.

뷰 CLI로 프로젝트 생성하기

---

1. 뷰 프로젝트를 생성할 빈 폴더를 하나 생성하고, 빈 폴더에서 터미널을 열어 vue init webpack-simple을 입력한다.

Sass는 확장된 CSS 언어를 의미한다.

그것을 서치할 것인지 여부를 묻는 것이다.

2. 그리고 뷰 CLI 안내문에 따라 npm install을 입력하여 뷰 애플리케이션을 구동하기 위한 관련 라이브러리를 모두 다운로드 한다.

위의 과정이 완료되면 프로젝트 폴더가 다음과 같은 구조가 된다.

package.json 파일의 내용을 살펴보자.

vue init 명령어로 프로젝트를 생성할 때 package.json이 같이 생성된다.

이 파일은 프로젝트 정보를 담고 있는 설정 파일이며, npm 명령어 및 뷰 애플리케이션을 제작하는데 필요한 라이브러리 정보들을 포함하고 있다.

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

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

3. npm run dev를 터미널에서 실행하면 브라우저가 실행되며 index.html이 열리게 된다.

프로젝트가 http://localhost:8080/으로 구동되고 있다는 것을 알려주고 있으며,

웹팩 결과물이 /dist/에서 제공되고 있다는 의미이다.

(index.html파일이 서버에 의해 실행된 모습)

이 화면은 웹팩에서 로컬 서버를 하나 띄우고 localhost:8080 으로 접근하여 애플리케이션을 실행한 모습이다.

여기까지 뷰 CLI로 싱글 파일 컴포넌트 체계 프로젝트를 구성하고 실행하는 과정이다.

뷰 로더

---

뷰 로더는 웹 팩에서 지원하는 라이브러리다.

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

위에서 싱글 파일 컴포넌트 체계 프로젝트를 구성하고 실행했을 때 src/App.vue 파일의 내용이 웹 페이지에 표시되는 것을 확인할 수 있었다.

App.vue 파일에서 <template>, <script>, <style>의 내용이 각각 HTML, 자바스크립트, CSS 코드로 인식될 수 있도록 뷰 로더가 변환 작업을 수행한 것이다.

이러한 변환 기능은 웹팩에서 담당하고 있는데, 웹팩에 설정한 뷰 로더가 변환 기능을 수행한다.

웹팩은 자바스크립트 모듈만을 인식할 수 있기 때문에 뷰 로더가 .vue 파일을 자바스크립트 모듈로 변환시킨다.

그리고 필요에 따라 웹팩의 추가 플러그인을 이용하면 웹팩으로 변환된 자바스크립트 모듈에서 CSS나 HTML 파일로 분리시킬 수 있다.

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

뷰 로더가 웹팩에서 어떻게 설정되어 있는지 화인해보자.

위에서 생성한 프로젝트의 webpack.config.js파일을 열어보자.

(webpack.config.js 파일 내용)

module과 rules 속성은 웹팩의 로더를 설정하는 속성이다.

test는 로더가 적용될 대상 파일을 지정하는 속성이고, loader는 적용할 로더의 종류를 지정하는 속성이다.

해당 내용은 'Do it! Vue.js 입문'을 참고하여 공부한 내용을 정리한 글입니다.