7. 뷰 프로젝트 구성

# HTML 파일에서 뷰 코드를 작성하는 경우 다양한 한계점이 존재한다.

가령, (1) 화면의 모양을 미리 예측하기 힘듦 (2) <script> 안에서의 HTML 코드는 구문 강조가 적용되지 않아 가시성이 없음 (3) 코드 들여쓰기 불가 (4) 같은 이유로 스타일 적용이 힘듦 등이 있다.

​

이러한 문제점을 해결한 것이 '싱글 파일 컴포넌트(Single File Components) 이다.

 

싱글 파일 컴포넌트(Single File Components) 체계

 

# .vue 확장자를 가지며 .vue 파일 1개 = 컴포넌트 1개

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

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

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

※ <script> 의 export default { } 코드는 ES6의 자바스크립트 모듈화와 관련된 문법이다.

쉽게는, '해당 컴포넌트의 동작을 정의하는 코드를 추가한다.'고 이해하면 된다.

​

위 코드 형식을 사용한 예제 소스는 아래와 같다.

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

# 싱글 파일 컴포넌트를 이해하려면 .vue 파일을 웹 브라우저가 인식할 수 있는 파일로 변환해주는 웹팩(Webpack) 이나 브라우저리파이 (Browserify) 와 같은 도구가 필요하다.

​

※ 웹팩(Webpack) : 웹 앱의 자원 (HTML, CSS, 이미지 등)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러 (module bundler) 이다.

​

※ 모듈 번들러 (module bundler) : 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어 주는 도구

​

※ 브라우저리파이 (Browserify) : 웹팩과 유사한 성격의 모듈 번들러. 다만, 웹 자원 압축이나 빌드 자동화 같은 기능은 제공하지 않는다.

 

뷰 CLI (Command Line Interface)

 

# 뷰 CLI (Command Line Interface) : 뷰 코어 팀에서 제공하는 CLI 도구이며, 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구

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

npm install vue-cli -global

→ 뷰 CLI 가 시스템 레벨에 설치된다.

​

# 뷰 CLI 명령어

​

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

 

# vue init webpack-simple 로 실습을 해보자.

 

위와 같이 CLI 를 통해 프로젝트를 생성하면 라이브러리를 설치하라는 안내가 나온다. 설치한다.

설치를 완료하면 아래와 같은 구성의 프로젝트가 생성된다.

 

vue 프로젝트 구성

 

 

# node_modules : npm install 명령어로 다운받은 라이브러리가 존재하는 위치

# src : .vue 파일을 비롯하여 애플리케이션을 동작하는데 필요한 로직이 들어갈 위치

# index.html : 뷰로 만든 웹 앱의 시작점. npm run dev 실행 시 로딩되는 파일

# package.json : npm 설정 파일. 뷰 애플리케이션이 동작하는데 필요한 라이브러리들을 정의하는 파일

→ vue init 을 하면 package.json 파일도 함께 생성

→ npm install 을 하면 package.json 의 라이브러리 목록이 전부 프로젝트의 node_modules 폴더 밑에 설치

(웹팩을 빌드하기 위한 babel, 로더 등등)

# webpack.config.js : 웹팩 설정 파일. 웹팩 빌드를 위해 필요한 로직들을 정의하는 파일

 

뷰 로더 (Loader)

 

# 뷰 로더 (Vue Loader) : 웹팩에서 지원하는 라이브러리로, 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해준다. 즉, .vue 파일의 <template>, <script>, <style> 의 내용이 각각 HTML, 자바스크립트, CSS 코드로 인식될 수 있도록 변환한다.