[do it! Vue.js 입문] 05-2. 뷰 프로젝트 구성 방법

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

뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하며, 페이지 사이를 이동할 땐 라우터를 사용해야함

HTML 파일에서 컴포넌트를 등록해 사용하기 어려움 => 오탈자 찾기 + 상위태그와 하위태그 관계 파악 어려움

---

싱글 파일 컴포넌트 체계

이러한 문제점을 해결하는 것이 바로 싱글 파일 컴포넌트(Single File Components) 체계

싱글 파일 컴포넌트 체계: '.vue' 파일로 프로젝트 구조를 구성하는 방식

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

 

.vue 파일 기본 구조

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

<script>
export default{
	// 자바스크립트 내용
}
</script>

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

---

 

뷰 CLI(Command Line Interface)

싱글 파일 컴포넌트 체계를 사용하기 위해 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의

파일로 변환해주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요함

웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해

하나로 묶어 웹 성능을 향상시켜주는 자바스크립트 모듈 번들러(module bundler)

브라우저리파이도 웹팩과 유사한 성격의 모듈 번들러지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 기능X

 

뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI 도구를 제공함

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

CLI에서 제공하는 명령어를 이용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성할 수 있음

 

뷰 CLI 설치

명령 프롬프트 창 또는 터미널을 실행한 후 밑의 명령어 입력

npm install vue-cli-global

 

명령어 실행 시, 설치가 진행되며 뷰 CLI가 시스템 레벨에 설치됨

시스템 레벨 설치 : 명령 프롬프트 창에서 vue 를 입력하면 명령어를 인식한다는 의미

 

뷰 CLI 명령어

템플릿 종류	설명
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 안내문에 따라 npm install을 입력하여 뷰 애플리케이션을 구동하기 위한 관련 라이브러리를 모두 다운로드받음

다운로드가 완료되면 아래와 같은 폴더 구조가 생성됨

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

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

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

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

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

 

vue init 명령어로 프로젝트를 생성할 때 package.json 파일도 함께 생성됨

package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm 명령어 및 뷰로 애플리케이션을 제작하는데 

필요한 라이브러리 정보들을 포함하고 있음

 

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

---

뷰 로더(Vue Loader)

웹팩에서 지원하는 라이브러리

뷰 로더는 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 웹페이지의 형태로 변환해줌

 

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

해당 프로젝트의 webpack.config.js 파일을 보면 뷰 로더 속성을 확인할 수 있음

module, rule은 웹팩의 로더를 설정하는 속성

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

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

프로젝트 폴더 내의 .vue 확장자를 가진 파일을 모두 선택하여 뷰로더를 적용

 

뷰 CLI로 생성한 프로젝트에 웹팩과 뷰로더가 기본적으로 설정되어 있기 때문에

가벼운 화면 프로토타이핑이 가능함