[Vue] 뷰 프로젝트 구성하기

Do it! Vue.js 입문을 읽고 정리한 내용입니다.

뷰 프로젝트 구성 방법

싱글 파일 컴포넌트 체계

HTML 파일에서 뷰 코드 작성시 가독성이 떨어지고 유지보수가 어렵다는 한계가 있다.

이를 해결하기 위해 싱글 파일 컴포넌트 체계(Single File Component)를 사용한다.

SFC란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말하며 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. 아래와 같은 구조를 가진다.

<template>
    <!-- HTML 태그 내용 -->
</template>

<script>
    // 자바스크립트 내용
<script>

<style>
    /* CSS 스타일 내용 */
</style>

뷰 CLI

SFC 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요하다.

웹팩은 웹 앱의 자원들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상 시켜주는 자바스크립트 모듈 번들러이다. 브라우저리파이는 웹팩과 유사하지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 같은 기능은 없다.

뷰에서는 편의를 위해 CLI 도구를 제공한다.

설치

npm install vue-cli -global

명령어

• 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 파일 방식으로 애플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩 같은 모듈 번들러가 필요하다.

프로젝트 생성, 구동

• vue init webpack-simple
• npm install
• npm run dev

뷰 로더

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

변환 기능은 웹팩에서 맡고 있는데 그 중에서도 웹팩에 설정된 뷰 로더가 변환 기능을 수행한다. 웹팩은 자바스크립트 모듈만 인식할 수 있기 때문에 뷰 로더가 .vue 파일을 일단 자바스크립트 모듈로 변환한다. 하지만 필요에 따라 웹팩의 추가 플러그인을 이용하면 웹팩으로 변환된 자바스크립트 모듈을 CSS나 HTML 파일로 분리할 수 있다.

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

webpack.config.js 파일을 보면 뷰 로더 속성을 확인할 수 있다.

test : 로더가 적용될 대상 파일을 지정하는 속성

loader: 적용할 로더의 종류를 지정하는 속성

정규식에 따라 .vue 확장자를 가지는 파일을 모두에 뷰 로더가 적용된다.