html 파일에서 뷰 코드 작성 시의 한계점
코드 복잡해지고..가독성 떨어짐
-> 싱글 파일 컴포넌트 체계 : .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자.vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다.
뷰 CLI
싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩이나 브라우저리파이와 같은 도구가 필요하다.
웹팩: 웹의 자원(html, css, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜주는 자바스크립트 모듈 번들러
모듈 번들러: 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어 주는 도구
뷰 CLI 명령어
vue init 는 초기 프로젝트를 쉽게 구성해주는 명령어이다.
- vue init webpack
- vue init webpack-simple
- vue init browserify
- vue init browserify-simple
- vue init simple
- vue init pwa
템플릿의 비슷한 점!
1. 웹팩이나 브라우저파이 같은 모듈 번들러를 프로젝트 자체에 포함해서 바로 사용할 수 있음.
2. vue 파일을 html, css,js 파일로 변환해 주기 위한 뷰 로더를 포함하고 있음
결론: vue 파일 방식으로 웹을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요함.
vue init webpack-simple 사용, 프로젝트 구조 ⬇⬇
package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm 명령어 및 뷰로 애플리케이션을 제작하는 데 필요한 라이브러리 정보들을 포함하고 있음.
npm install 명령어를 실행하면 package.json의 라이브러리 목록 전부가 프로젝트 폴더 내, node_modules 폴더 밑에 설치된다.
이후 npm run dev를 실행하면 브라우저가 열리면서 아래와 같은 화면이 나온다.
vue.js 프로젝트가 http://localhost:8080/에 구동되어 있음을 알려주면서 웹팩 결과 값(output)이 /dist/에 제공되고 있다는 의미이다.
뷰 로더
vue loader는 웹팩에서 지원하는 라이브러리이다. 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에 실행 가능한 웹 페이지의 형태로 변환해준다.
app.vue 파일에서 template, script, style 태그 내용이 각각 html, js, css코드로 인식될 수 있도록 변환 작업을 수행한 것!
이 변환 작업은 웹팩에서 맡고 있음. 그 중에서도 웹팩에 설정된 vue loader가 변환 기능을 수행한다. 웹팩은 js 모듈만 인식할 수 있기 때문에 vue loader가 .vue 파일을 먼저 js 모듈로 변환한다.
module과 rules는 웹팩의 로더를 설정하는 속성
test: 로더가 적용될 대상 파일 지정
loader: 적용할 로더의 종류를 지정
뷰 CLI로 생성한 프로젝트에 웹팩과 뷰 로더가 기본적으로 설정되어 있기 때문에 웹팩을 몰라도 가벼운 화면 프로토타이핑은 가능하다!
- 뷰 cli 설치 (npm i vue-cli -g)
- 프로젝트 생성 (vue init webpack-simple)
- 관련 라이브러리 설치 (npm install)
- 프로젝트 구동 (npm run dev)
[Reference]
Do it Vue.js 입문(이지스퍼블리싱)
