2. VueJS 와 기본 구성.

 

1. VueJS는 무엇인가?

VueJS는 프레임워크다.

프레임워크는 라이브러리와 다르다.

개발구조의 껍대기, 뼈대, 밑바닥 원한다면 전체 구성을 담당한다.

쉽게 말해서 개발의 틀을 마련해준다. (필요에 의한 탄생이 해당 프레임워크의 방법론이다.)

틀이기에 강제하기도 하고 답답하게 느껴지기도 한다.

그렇다면 어떤 틀인가?

컴포넌트라는 틀이다.

우리는 VueJS를 이용해 재사용 가능한 컴포넌트를 설계하고, 조립해 나가면서 개발해 나갈 것이다.

 

2. VueJS의 장점은 무엇인가?

1. View 는 Vue에게

돔 생성과 업데이트에 관한 업무는 해당 분야의 프로인 Vue에게 맡기자.

우리는 비지니스 로직에 집중하면 된다. React처럼 특정 랜더 시점에 개입하지 않아도 된다. 전적으로 믿어주자.

Vue는 가볍고 똑똑하다.

2. 잘 가꿔진 풀밭에서 노는 기분

React는 야생에서 뛰노는 맛이 있지만, Vue는 그렇지 않다.

예쁘게 꾸며진 뷰 인스턴스 안에서 놀면 된다.

3. VueJS는 Javascript build 시스템과 아주 잘 맞는다.

예전의 프론트엔드 개발자들은 자바스크립트를 가상화해서 사용해야 했다.

이제는 이에 더해 ES6까지 사용해야 한다.

거기다 SPA가 아니더라도 대규모 프로젝트를 진행하다보면 스크립트 구성에 애를 먹게된다. 파일만 수백개. 로딩 시점 수백개.

VueJS를 쓰면 자연스럽게 JS 빌드 시스템인 Webpack과 친해질 수 있다.

많은 스크립트를 개발하고 관리 할 수 있으니 할 수 있는 일은 더 많아진다.

4. 컴포넌트 활용으로 생산성이 좋아지고 대규모 프로젝트를 분할정복 할 수 있게 된다.

컴포넌트는 화면의 일부분이 될 수도, 기능의 한 부분이 될 수도 있다.

마크업된 템플릿, 스크립트, 스타일 세가지의 결합으로 구성된 하나의 컴포넌트는 라이프사이클 훅을 통해 아주 쉽게 통제 된다.

이로서 다양한 관리포인트가 생겨나고 컴포넌트간의 의존성도 끊음으로서 예측가능한 개발을 가능하게 해준다.

5. 데이터를 기반으로 VIEW를 만들어 내기 때문에 필연적으로 VIEW MODEL을 쉽게 분리할 수 있다.

원한다면 아주 쉽게 MVVM 패턴에 기초한 개발이 가능해진다.

 

두려워하지말자. 누구나 충분히 사용할 수 있다.

프론트엔드 개발자 모두가 원하던 그것이기에 놀랍도록 편하다.

 

3. 기본 구성

CDN을 이용해서 Vue를 import 하는 방식은 검색하면 나오니 필요할 때 쓰면 된다.

우리는 검정 화면이 아니면 코딩을 못하는 고수니깐 제대로 가자.

나도 모르는 많은것들이 깔리는 듯한 느낌이 들더라도 설치하자.

1. Node.js, NPM을 설치하자. 

NodeJS는 그냥 자바스크립트 엔진일 뿐이다. 땅이 있어야 싹을 튀우지.

NPM은 농기구 창고다. 앞으로 우리가 사용할 많은 툴들을 관리해주는 역할일 뿐이다.

별거 아니다 일단 설치하자.

2.  vue-cli 를 설치하자

농기구인 vue-cli 를 설치하자.

npm install -g @vue/cli

단 2스텝만에 모든 준비는 끝났다.

3. 적당한 폴더를 하나 만들고 터미널에서 입력하자

vue create my-project

끝났다. 방금 당신은 논을 만들었다.

다음시간에는 이 논에서 어떻게 경작하면 되는지 알아보자.

그다음에 VueJS를 같이 공부하자.

+ Visual Studio Code 설치하자.