[ VueJS 02 ] Vue js 탄생 및 설치방법 (Vue 기초)

[ Vue 02 ] Vue js 탄생 및 설치방법 (Vue 기초)

안녕하세요. 코드부기입니다.

Vue에 관해 간단한 설명과 그 외에 Vue를 사용하기 위해선 어떻게 해야되는지에 대해 설명해드리겠습니다. 현재 제가 몸담고 있는 스타트업에서는 오직 Vue만을 이용한 프로젝트를 개발하고 있는 중입니다. 그만큼 현재 인기있는 프레임워크중에 하나이고 또 진입장벽은 낮아서 누구나 진입이 가능합니다.

그리고 저는 앞으로도 프로젝트 개발에 있어서 Vue를 사용하여 개발하기 때문에 Vue를 이번 시간을 통해서 알려드리도록 하겠습니다.

[ Vue의 배경 ]

현재 Vue는 다른 프레임워크들 ( react: Facebook, angular: Google ) 과 어깨를 나란히 견줄 수 있을만큼 무섭게 성장하는 프레임워크입니다.

Vue는 지금 현재 급격히 관심이 늘고 있는 자바스크립트 프레임워크입니다.

2014년에 출시를 하였고, Vue는 ES5기능을 이용하기 때문에 그 아래 버전을 구현한 IE8 이하 버전에서는 사용이 불가합니다.

[ VueJS 기능 ]

Vue는 클라이언트 (프론트엔드) 자바스크립트 프레임워크입니다.

Vue는 View를 중점적으로 다루고 있어서 기존에 구현한 프로젝트에 쉽게 적용이 가능합니다.

Vue는 가상 DOM을 사용하고 있고 재사용이 가능한 컴포넌트 단위를 이용합니다.

UI에 특화되어있고, 라우팅 및 상태관리는 third party 라이브러리를 사용합니다.

다음과 같이 Vue는 Dom에 렌더링하기 위해 템플릿이라는 태그를 사용하고 있습니다.

Vue는 v-if(Domain Specific Language)같은 문법을 사용해 작성합니다.

Vue는 style태그를 사용합니다.

이 태그를 통해서 css를 다룹니다. style 태그 안에 scoped라는 속성이 존재하는데요, 다음과 같이 사용하면 style태그가 적용된 컴포넌트에서만 css가 적용됩니다.

만약 scoped를 빼면 모든 컴포넌트에서든지 사용이 가능합니다.

내부구현을 살펴보자면 scoped를 선언하게 되면 실행하면서 data-v-xxxxxx와 같은 유일속성의 값이 생성되고 h2가 h2[data-v-xxxxxx]로 컴파일이 됩니다.

따라서 태그를 선언한 컴포넌트에서만 적용됩니다.

[ VueJS 설치 ]

- Script에 추가하기

첫번째 방법으로는 CDN을 사용하는 것입니다.

Vue.Js코드를 직접 삽입하는 대신에 

다음과 같이 script태그를 통해 넣어줄 수 있습니다. 웹 주소를 넣는 것이기 때문에 직접 삽입하는 것보다 훨씬 간편합니다.

- npm을 통해 다운받기

서비스를 시작할 때는 npm을 통해 받는 것이 좋습니다. 왜냐하면 번들러를 이용해서 적용할 수가 있습니다.

맨 처음 구현할 프로젝트 경로 상에서 명령어창에 "npm install vue"을 입력하여 간편하게 vue를 설치해줍니다.

그러면 vue가 해당하는 경로상에 설치가 됩니다.

오늘 내용은 여기서 마치겠습니다.

감사합니다.