Vue.js 개발 환경 구성

장기효(캡틴판교)님의 'Do it! Vue .js 입문' 을 읽고 필요한 부분은 추가하여 내용을 정리한 글 입니다. 

1. Vue.js

Vue.js : 웹페이지 화면을 개발하기 위한 프런트엔드 프레임워크

 

장점

• 배우기 쉽다. 

• 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.

• 리액트의 장점과 앵귤러의 장점을 갖고 있다.(앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 랜더링 특징)

특징

• MVVM 패턴 :화면을 Model(모델) - View(뷰) - 뷰 모델(View Model)로 구조화하여 개발하는 방식이다.

MVVM (출처 : https://012.vuejs.org/guide/)

뷰(View)	사용자에게 보이는 화면
돔(DOM)	HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model)	데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding)	뷰에 표시되는 내용과 모델의 데이터를 동기화
뷰모델(ViewModel)	뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

 

• 컴포넌트 기반의 프레임워크 : 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)이다. 이를 통해 개발할 수 있어서 코드의 재사용성이 쉽다.

 

components(출처: https://012.vuejs.org/guide/#Components)

• 앵귤러의 양방향 데이터 바인딩 + 리액트의 단방향 데이터 흐름의 장점 결합   

양방향 데이터 바인딩(Tow-way Data Binding): 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경

단방향 데이터 흐름(One-way Data Flow):  컴포넌트 간에 데이터를 전달할 떄 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게 끔 되어 있다.

 

•  가상 돔(Virtual DOM) : 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 화면 갱신으로 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.

 

2. 개발 환경 구성

Node.js(노드제이에스) 설치

Node.js는 서버 사이드 자바스크립트로, 서버측에서 실행되는 자바스크립트 실행 환경을 이야기 한다. 뷰 CLI(Command Line Interface)를 이용하여 쉽게 뷰 프로젝트를 구성하려면 Node.js를 설치해야 한다.

 

아래 URL 접속 후 LTS 버전을 다운로드 한다.

https://nodejs.org/ko/

Node.js

 

 

Visual Studio Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code Plugin 설치

• vetur : 코드 자동완성, 디버깅, 문법 강조 기능 제공

• vue 2 snippets : 코드 문법 강조, 조작 지원 제공

• View-in-browser : 기본 브라우져로 볼 수 있는 기능 제공

• html snippets : html 문법 빠르게 작성 기능 제공

• js-css-html formmatters : js, css, html 코드 자동 완성 기능 제공

• vue-beautify : vue.js 코드 정리

• ESLint :  자바스크립트 문법 체크 

 

크롬 확장 플러그인 설치

뷰개발자도구(Vue.js Devtools) : 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석 가능

 

https://chrome.google.com/webstore/search/Vue.js%20devtools?hl=ko

Chrome 웹 스토어

 

 

3. 뷰 CLI를 이용한 프로젝트 생성

Vue-CLI : 뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 지원하는 도구

설치 

npm install vue-cli -global (전역 즉 시스템 레벨에 vue cli 설치)

 

프로젝트를 관리할 폴더 생성 및 이동

mkdir vueJsTest             //vueJsTest 폴더 생성

cd vueJsTest                //vueJsTest 폴더로 이동

vue init webpack-simple     // 웹팩 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용

ex)
? Generate project in current directory? Yes
? Project name test
? Project description 055055
? Author 055055
? License MIT
? Use sass? No


npm install           //package.json 파일에 등록된 자바스크립트 라이브러리 모두 다운로드

npm run dev           // 애플리케이션 실행

 

4. 웹팩(webpack) & NPM

webpack : 웹 앱의 자원(HTML, CSS, Images)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러(module bundler)이다. 즉 파일간의 연관 관계를 파악 하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구

모든 파일의 내용을 1개의 파일에 담는 이유 : 
웹 화면을 구성할 때 javascript, css, 이미지 파일마다 서버로 보내는 HTTP 요청이 발생한다.
따라서 HTTP 네트워크 요청 숫자가 늘어나면 늘어날 수록 서버로 보내는 로딩 시간이 길어지게 된다.
그렇기에 1개의 파일에 담아서 요청하게 되면 웹 앱의 로딩 속도를 향상 시킬 수 있다.

 

웹팩 데브 서버(webpack dev server)

웹팩 설정 파일의 변화를 감지하여 빠르게 웹팩을 빌드할 수 있도록 지원하는 유틸리티이자 Node.js 서버이다. 웹팩 설정 파일의 내용이 변경되면 브라우저 화면을 자동으로 새로 고침하고, 바로 다시 웹팩으로 빌드하는 기능을 갖고 있다. 

 

NPM :전 세계 자바스크립트 라이브러리가 존재하는 공개 저장소