1. Vue.js 시작하기 +설치방법

 최근 Front 프레임워크 3대장 중 하나인 Vue.js를 공부해 보려고 합니다.

React나 AngularJS도 있지만 Vue 를 선택한 이유는 

1. 학습난이도가 낮다.

2. 공식문서가 한글화 되어있다.

 단순한 위의 두가지 이유 때문에 선택을 했습니다. 기존에는 jQuery를 이용해서 페이지 작업을 했는데, 요즘은 다 프레임워크를 사용해서 Front작업을 진행을 하는게 추세인 것 같습니다.

 저 또한 공부를 하며 배워나가는 상황이기 때문에 차근차근 최대한 쉽게(내가 나중에 볼 것 같으니까...) 포스팅을 진행해 보도록 하겠습니다.

설치

 요구사항이 있는데 Node.js가 설치가 되어있어야 합니다. 물론 CDN방식이라고 하여 html에 import시켜서 사용을 하는 방법이 있기는 하지만, 조금 큰 프로젝트의 상황을 대비해 Vue-cli를 이용해 설치를 해보도록 하겠습니다.

Node.js 설치하러 가기(공식사이트)

TIP

Vue.js 나 Vue-cli나 동일한 말입니다. 다만 커맨드 라인으로 입력해서 설치를 하느냐 CDN방식으로 사용을 하느냐 차이입니다.

Node.js를 설치하시게 되면 cmd 창에서 npm이라는 명령어를 사용하실 수 있습니다. Node.js를 설치하시고 cmd창에서

 

$ npm --version

를 입력해보시면 설치 여부를 알 수 있습니다.

이제 진짜로 Vue-cli를 설치해보도록 하겠습니다.

$ npm install -g @vue/cli
$ vue --version
3.9.1

해당 명령어를 입력해 Vue CLI3을 설치하도록 합니다.

프로젝트 생성

 여러분이 작업할 프로젝트를 생성할 차례입니다. 방법은 크게 두가지가 있습니다.

1. 보일러플레이트를 이용한다.

2. 직접 생성한다.

1번의 경우는 Webpack을 이용한 방법이고, 2번의 경우는 직접 사용자가 필요한 것들을 구성하여 프로젝트를 생성할 수 있습니다.

 2번의 방법으로 설정을 해보도록 하겠습니다.

$ vue create frontend

프로젝트를 만들고 싶은 위치에 이동하여 해당 위치에서 cmd창을 열고 위와 같이 입력합니다. 프로젝트명은 알아서 정해주시면 됩니다. 저는 frontend라고 만들어 보도록 하겠습니다.

$ vue create frontend
Vue CLI v3.9.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features
 
✨  Creating project in /work/temp/hello-vue-cli.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
(... 생략 ...)
🎉  Successfully created project hello-vue-cli.
👉  Get started with the following commands:
 
$ npm run serve  혹은 
$ vue ui 

추가 플러그인같은 경우는 나중에 마음대로 추가를 할 수 있기 때문에, 기본 설정을 사용하여 설치를 해줍니다.

설치가 완료 된 후에는 14줄 15줄 중 하나의 커맨드를 이용해 서버를 실행시킬 수 있습니다.

완료

 설치를 완료하시고 localhost:8080으로 접속을 해보시면 아래와 같은 화면을 만나보실 수 있습니다.

이렇게 되면 Vue CLI3을 설치하고 원하는 위치에 프로젝트까지 만드는 작업이 끝이 나게 됩니다.

 더 많은 작업을 해줄 수 있지만 복잡해지기 때문에 금방 흥미를 잃어버릴 수 있어 이러한 부분들은 필요할 때 하나씩 추가를 해보도록 하겠습니다.