vue.js 프레임워크에 대해 정리를 하려고 오랜만에 velog 포스팅을 켰다.
vue는 리액트, 앵귤러와 같이 웹 페이지프론트를 개발하기 위한 pwa(progressive Web App)프레임워크이다.
-progressive Web Apps이란 무엇일까?
일반적인 웹기술로 구현된 웹앱에 NativeMoblieApp(ios, android)만이 제공해왔던 app push, background sync등의 주요기능 등을 점진적(progressively)으로 적용하여 APp을 향상시키는 것을 말함.
우선 뷰를 사용하려면 가볍게 사용하기 좋은 cdn과 많이 사용하는 방식인 cli를 사용하여 시작할 수있다.
cli를 사용하여 vue를 알아보기로 하자!
cli는 이곳에 들어가서 시작할 수 있다.
-Vue Cli란?
기본적인 vue의 개발 환경을 설정해주는 도구로서 터미널을 통해 쉽게 설치할 수 있다. 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민,lint, build, 라이브러리의 구성 webpack 설정에 대한 고민을 덜 수 있다.
본격적으로 뷰-cli 설치를 시작해보자!
npm 또는 yarn 이 설치되어있어야 하는데 npm으로 설치를 해보았다.
혹시 에러가 뜬다면 sudo 명령어를 붙여 실행해보면 설치가 된다.
설치가 완료된것을 확인하고 싶으면 아래명령어를 입력해보자.
흐음 설치가 잘된것 같다!
그렇다면 이제 vscode나 atom등의 ide를 이용하여 폴더를 열어준다.
나는 vscode를 이용해서 vue 프로젝트 파일을 생성해보록 하였다.
맨 윗줄의 vue create 프로젝트명 으로 입력하면
cli의 선택지가 주어지는데 기본적으로 default(babel, eslint)가 주어지고 manually라는 여러 필요 라이브러리를 선택할 수 있는 선택지가 있다.
나는 manually를 통해 프로젝트를 생성하였다.
자세한건 후편에 이어서 설명하도록 하고 우선 만들어진 프로젝트 내부를 살펴보기로 하자!
호오.. 구성이 알차다.
우선 public부터 살펴보면,
index.html 내의
<div id="app"></div>이곳에서 화면에 보여지는 것들을 생성하는 것 같아 보인다.
이제 본격적으로 vue 파일을 확인해보도록 하자.
App.vue 파일을 열어보니 template 내부로 index.html id="app" 을 받아온다.
여기서 npm run serve를 하면 vue가 시작된다.
다음포스팅에서 뷰를 다루는법을 알아보도록 하겠다.!
