Vue 시작하기

Vue ?

Vue는 React, Angular, Svelt 등과 같이 UI를 개발하기 위한 프론트엔드 프레임워크다.

 

특징

SPA

Vue는 SPA(Single Page Application)을 개발에 중점을 두는 프레임워크로, 한 페이지 내에서 다른 페이지로 이동하는 라우팅이 아닌 한 페이지 내에서 컴포넌트들을 바꿔서 다른 컨텐츠를 보여주는 형식으로 페이지를 만드는데 특화되어있다. (물론 multi page application을 만들수도있다.)

낮은 Learning curve

개발자로써 새로운 기술을 익힐 때 중요하게 생각하는 기준 중 하나가 learning curve다. 기술을 익혀서 실제로 사용하기까지 시간이 얼마나 걸리는지, 노력이 얼마나 드는지를 고려하게 될텐데, Vue는 낮은 learning curve를 가지고 있다. Vue의 특징을 어느 정도 이해하고 있다면, 익히는데 걸리는 시간이 상당히 적게 걸린다.

 

내가 Vue를 선택한 이유 ?

처음에는 vanilla javascript, html, css를 사용해 웹 페이지를 만들었다. 하지만 개발을 하다보니 아래와 같이 느꼈다.

1. 생산성이 떨어진다.
2. 재사용 가능한 UI 코드들이 꽤 생긴다.
3. 여러 페이지를 만들 일이 없다.

이런 점을 생각을 하다보니 당연히 프론트엔드 프레임워크를 찾게 됐고, React와 Vue 중에 선택을 하게 되었다.(Angular는 점점 인식이 안 좋아지던 시기...)

두 프레임워크 모두 위의 문제점을 해결 가능하다. 다만, 내가 선택하는 기준은 딱 하나였다.

 

빨리 배울 수 있으면 좋겠다.

 

실제로 두 개의 프레임워크를 이틀에 걸쳐 사용해 같은 페이지를 똑같이 만들어본 결과 React가 Vue에 비해 대략 3배 정도는 시간이 더 걸렸다. 나는 당연히 회사의 요구사항인 빠른 결과물을 내야 했고 자연스럽게 Vue를 선택하게 되었다.

 

Vue 시작하기

Vue CLI를 깔자. Vue CLI는 Vue 프로젝트를 빠르게 구조화 시켜주고, 만들어주고, 빌드해주고, 배포해주는 등 다양한 기능을 제공하는 CLI이다.

npm install -g @vue/cli

또는 

yarn add -g @vue/cli

설치가 완료되면

vue create vue-project

로 Vue 프로젝트를 만든다. 이 때 많은 옵션들이 나오는데 옵션은 자신이 원하는 대로 설정하면 된다.(Default로 설정하고 나중에 옵션 추가해도 된다. 옵션들에 대해서는 '프로젝트 설정 옵션'에서 따로 설명하도록 하겠다. 일단 Default로 가자!)

 

옵션들을 다 선택했으면 폴더가 생겼을텐데, 폴더로 이동하자.

 

cd vue-project

폴더로 이동했으면 바로 웹 페이지를 올려보고 싶지 않은가? 어떤 명령어를 쳐야 웹 페이지가 올라가는지 확인하고 싶으면 package.json을 확인하면 된다.

 

package.json에 serve를 하면 vue cli가 웹 페이지를 열어준다고 하는데 npm의 경우 npm run serve, yarn의 경우 yarn serve를 하면 된다.

npm run serve

또는

yarn serve

위에 명령어를 치면 http://localhost:8080/ 에 들어가보라고 나온다. 들어가보자.

 

이제 저 UI 내용을 담고 있는 vue 파일을 수정해보면서 vue 프로젝트를 시작하자.