[Vue.js] VueJS 프로젝트 시작하기

현재 회사에 프론트 개발자가 부족하다 보니 내부에서 사용하는 어드민 페이지를 내가 구축하게 되었다. 

사람들이 왜 뷰뷰 거리는지 알거 같았다. 리액트보다 배우기 쉬웠다. 리액트 배울 때는 물어볼 곳이 구글 선생님밖에 없어서 였을 수도 있지만

 

---

React vs Vue

---

※ 공통점

React 와 Vue 둘 다 컴포넌트 기반, Virtual DOM 방식이라는 점에 공통점이 있고, 가볍고 빠르다는 평을 받는다. 

1. 컴포넌트 기반

React 와 Vue 는 웹 UI를 작은 컴포넌트 단위로 구성한다. 컴포넌트는 다른 프로젝트에서도 재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해지는 장점이 있다.

 

2. Virtual DOM

브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더 트리 생성, 레이아웃, 페인팅 과정을 거친다. DOM 노드는 HTML 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정 역시 20회 다시 이뤄진다. 즉, 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하된다.

Virtual DOM은 뷰에 변화가 있다면 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM 에적용시키고 최종 결과만 실제 DOM에 전달한다. 따라서 20개의 변화가 생기면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM 에 전달하고, 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 된다. 즉, 실제 DOM 변화를 최소화시켜 성능을 향상시켰다.

 

※ 차이점

▷ Vue

• 단일 파일 컴포넌트(Single File Component)
  Vue는 단일 파일 컴포넌트 기반의 프레임워크이다. 웹의 뷰(view)를 구성하는 요소인 HTML, CSS, JavaScript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식이다. 이러한 관리 방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업을 수월하게 한다는 장점이 있다.
• HTML 기반 템플릿 구문
  Vue는 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링하는 과정에 템플릿이란 문법을 사용한다.. 이 템플릿을 구성하는 문법이 HTML 기반으로 이뤄져 있어 배우기 쉽다는 특징이 있다.

▷ React

React 는 프레임워크라기보다는 작은 자바스크립트 라이브러리에 가깝다. 이는 다른 프레임워크와 달리 개발에 필요한 모듈을 기본적으로 제공하지 않고, 서드파티(Third party) 라이브러리에 의존한다는 것이다. 이러한 높은 자유도는 (외부 라이브러리를 선택하고 학습해야 하는) 유저들에게 부담으로 다가온다는 단점이 되기도 한다. React 진영은 이러한 단점을 극복하고자 개발환경을 구축할 수 있는 CRA(create-react-app) 툴을 제공하고 있으며, React 와 함께 사용할 수 있는 프레임워크(NextJS, Gatsby 등)도 존재한다.

• 거대한 커뮤니티
  페이스북의 지원을 받는 만큼 지속적인 버전 관리가 이루어지고, React 사용자가 많아 다양한 레퍼런스, 확장 라이브러리가 많다. 또한 이미 React를 사용하고 있는 개발 프로젝트가 많기 때문에 개발자 채용 시, React를 다룰 줄 안다는 것이 장점으로 작용할 수 있다.
• JSX 기반 컴포넌트 구문
  템플릿 방식으로 관리하는 Vue와는 달리, React는 JSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태(State)를 변화시키지 않고 관리한다. 변화가 일어나면 실제 브라우저의 DOM에 새로운 것을 적용하는 것이 아니라, 자바스크립트로 이루어진 Virtual DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트 한다.

 

	React	Vue
개발사	Facebook	Evan You(개인)
출시 년도	2013	2014
용량	100KB	80KB
커뮤니티 생태계	큼	작음
러닝커브	쉬움 (JSX 를 익혀야 함)	상대적으로 더 쉬움 (HTML 을 사용한 템플릿 사용)
문법	JSX	단일 파일 컴포넌트

 

---

VueJS 프로젝트 시작하기

(어쩌다 보니 풀스택)

---

1. vue-cli 설치하기

$ npm install -g @vue/cli
$ npm install -g @vue/cli-init

 

2. VueJS 프로젝트 생성

### 버전 3 미만

### vue init <템플릿 이름> <프로젝트 이름>
$ vue init webpack vue-test

 

### 버전 3 이상

### vue create <프로젝트 이름>
$ vue create vue-test

 

* 환경설정 

### 버전 3 미만

### 버전 3 이상

 

 

 

3. 실행하기

### 버전 3 미만 

$ yarn dev

 

### 버전 3 이상 

$ yarn serve

 

4. 접속하기: http://localhost:8080