상세 컨텐츠

본문 제목

[Vuejs] 바닥에서 시작하기, 그리고 화면 출력하기 (덤으로 배포파일까지!)

프로그래밍/웹관련

by jin* 2017. 5. 8. 18:56

본문






이전 포스팅에서 Vuejs를 왜 쓰면 좋고, 다른 비슷한 프레임워크들이 어떤 것들이 있고, 어떤 차이점들이 있는지 알아보았습니다. Vuejs가 정말 쉽게 동작한다라는 것도 어느정도 인지하셨을 것 같습니다 : )
그러면 실제로 Vuejs를 처음에 시작하게 되면 어떤 것들을 먼저 해야하고, 내가 적용하는 것이 틀린방법은 아닌지 이야기를 시작해보려 합니다. 시작하기전에 제가 설명드리는 방법이 정답은 아니라는 것을 미리 말씀드립니다. 그러나 정말 아무 것도 모르는 상황에서 이러한 방법으로 시작했을 때 나름 도움이 될 것 이라고 생각됩니다.

브라우저에서 바로 적용하기

Vuejs는 브라우저에서 바로 적용해서 사용하실 수 있습니다. 기존 프로젝트에 추가로 적용되더라도 전혀 충돌없이 함께 사용할 수 있기 때문에 부담없이 시작할 수 있습니다.

unpkg를 통해서 CDN주소를 제공해주고 있기 때문에 처음에 가볍게 적용하려면 아래 주소를 HTML페이지에 추가해주세요.

<script src=“https://unpkg.com/vue@2.3.2”></script>

그리고 잘 적용되어 있는지 확인하는 방법이 있습니다.
크롬 개발자도구에 확장프로그램으로 vue 개발자도구를 제공해주고 있습니다.

현재 크롬브라우저를 사용중이시라면 아래 링크를 눌러서 vue-devtools를 설치해주세요.
vue-devtools


그리고 스크립트가 추가된 웹페이지에서 개발자도구를 실행하면 Vue라는 탭이 하나 추가된 것을 확인하실 수 있습니다. (만약 Vue가 적용되어 있지 않으면 탭에 조차 출력되지 않습니다.)

잘 적용되어 있는데 Vue탭이 안보이시지면 브라우저를 종료 후 다시 실해주세요 : )

vue-devtools는 Vue에 적용되어 있는 값들, 컴포넌트들을 실시간으로 추적해주고, 사용자가 눈으로 확인할 수 있도록 GUI로 출력시켜줍니다. (앞으로 자주 사용하게 될 좋은 툴입니다!)

그리고 Vuejs가 적용될 DOM(Element)을 만들어줍니다.

<div id=“vue-app”>
    {{ message }}
</div>

그리고 vue.js 가 추가된 아래쪽에 Vuejs로 개발을 시작합니다. (다시 쉽게 말씀드리면 jQuery적용하듯이 script를 열어주면 됩니다)

<script>
new Vue({
  el: ‘#vue-app’,
  data: function () {
    return {
      message: ‘안녕하세요. 뷰(Vue)입니다.’
    }
  }
})
</script>

이렇게 하면 <div id=“vue-app”> 하위에 있는 {{ message }} 가 안녕하세요. 뷰(Vue)입니다.로 대체되는 것을 확인하실 수 있습니다 : )
<div id=“vue-app”> 하위에서는 data 안에 있는 값들을 마구마구 출력이 가능하다는 것을 느낌으로 인지하셨을 것입니다!

음, 참 쉽죠?

여기서 추가로 응용해보면 class도 변수에 미리 지정해놓고 사용할 수 있습니다!

<head>에 미리 css을 지정해놓도록 하겠습니다.

<style>
.big-font-size {
  font-size: 30px;
}
.font-color-red {
  color: red;
}
</style>

그리고 Vuejs 코드들이 반영될 HTML코드를 작성해주세요.

<div id=“vue-app”>
  <span v-bind:class=“[customClass.size, customClass.color]”>
    {{ message }}
  </span>
</div>

이렇게 작성합니다. 간단하게 설명을 드리면 class앞에 v-bind:라는 것을 보셨는데, Vue에서 HTML을 렌더링하면서 v-bind가 붙어있을 경우 Vuejs 코드에서 대입할 데이터가 있는지 찾아보고 변환해줄 수 있도록 미리 알려주는 아이라고 생각하시면 되고, 공식 홈페이지에서는 이를 directive(디렉티브)라고 설명하고 있습니다.

Vuejs 디렉티브 설명 - 공식홈페이지

그러면 코드에서는 아래와 같이 심플하게 정의하면 됩니다.

new Vue({
  el: ‘#vue-app’,
  data: function () {
    return {
      message: ‘안녕하세요. 뷰(Vue)입니다.’,
      customClass: {
        size: ‘big-font-size’,
        color: ‘font-color-red’
      }
    }
  }
})

순서대로 적용하고 나면 어떻게 출력되는지, 아래 예제코드링크를 확인하실 수 있습니다 : )

예제링크 - jsfiddle

vue-cli 사용하기

그러면 새로운 프로젝트에 적용할 때는 어떻게 적용해야 할까요? 위에처럼 HTML에 하나하나씩 나열해서 적용해야할까요?

Vuejs에서는 누구나 쉽게 프로젝트를 시작하고 설정같은 것에 고민하지 말고, 비지니스 로직에만 신경쓰도록 지원해주고 있습니다. 그 결과물로 vue-cli라는 툴이 있습니다. 이 툴 역시 오픈소스로 공개되어 있습니다.

vue-cli는 npm모듈로 제작되어 있기에 node.js가 필수적으로 설치되어 있어야 쉽게 사용하실 수 있습니다.

node.js 4.x 이상을 사용하여야 하고 현재(2017.5 기준) 6.x에서 가장 잘 작동한다고 공식홈페이지 작성되어 있습니다. npm버전은 3.x 이상이여야 합니다.
node.js는 https://nodejs.org/ko/ 여기에서 다운로드 받아 설치할 수 있습니다.node.js`를 설치하게 되면 npm 은 자동으로 설치됩니다.

node.js가 설치되어 있으면 버전을 확인합니다.

# node.js 버전 확인
$ node --version
v7.4.0

# npm 버전 확인
$ npm --version
4.0.5

명령어를 입력 후 엔터를 치면 바로 아래 버전이 표기됩니다.

여기까지 잘 따라오셨으면 원래 우리의 목적인 vue-cli를 설치해보도록 합시다!

$ npm install vue-cli -g

위 명령어를 실행하면 어디에서든지 vue-cli를 요청할 수 있도록 설치가 됩니다. 간혹 mac or linux에서 -g로 설치가 안될 수도 있는데 그 때는 명령어 앞에 sudo를 추가해줍니다. $ sudo npm install vue-cli -g 이렇게 말이죠.

설치하고 나면 vue-cli로 프로젝트를 생성하고 초기설정을 자동으로 설정할 수 있습니다.

$ vue init <template-name> <project-name>

이러한 형식으로 프로젝트를 생성할 수 있는데 template-name에는 몇가지 방법들이 있습니다.

여기에서는 2가지 설정방법을 알려드리도록 하겠습니다. (webpack관련으로 진행하는게 가장 평범하고 가장 많이 사용되기 때문에 webpack관련 2가지만 설명드리겠습니다)

먼저 webpack-simple 입니다. 심플이라고 적혀있어서 처음에 이 것으로 시작하는 경우가 많은데 정말 당황스러울 정도로 심플합니다. 그래서 실제 뭔가 서비스를 운영하려는 목적이라면 추천하지 않는 방향이기도 합니다.

저도 처음에는 뭣모르고 webpack-simple로 프로젝트를 생성했었는데, 지금은 정말 테스트나 예제 만들때만 사용하고 있습니다 : )

webpack-simple template

$ vue init webpack-simple vue-example-project

이렇게 요청하면 몇가지 질문지가 출력됩니다. 영어라고 당황하지 않으셔도 됩니다. 엔터만 막 누르면 기본으로 설정되거든요 ( ͡° ͜ʖ ͡°)

# 프로젝트 이름
? Project name (vue-example-project):

# 프로젝트 설명
? Project description (A Vue.js project):

# 작성자
? Author (devjin0617 <devjin0617@gmail.com>):

# sass 사용여부
? Use sass? (Y/n)




질문시 괄호 안에 있는 내용은 그냥 엔터쳤을 때 반영될 내용입니다. 엔터친다고 난리는 안나니, 특별히 바꿀 것이 없다면 엔터를 치셔도 무관합니다 : )

프로젝트가 잘 만들어지고 나면 다음 어떤 행동을 해야하는지까지 잘 설명해주고 있습니다.

  • cd vue-example-project (해당 프로젝트 폴더로 이동합니다)
  • npm install (해당 명령어를 통해 관련 의존성 모듈들을 설치해줍니다.)
  • npm run dev (명령어를 실행하면 현재 개발되고 있는 프로젝트를 가동하며, 브라우저에 띄워줍니다)

해당 폴더로 들어가면 각 파일과 폴더들이 있는 것을 보실 수 있는데, 간단하게 설명하도록 하겠습니다.

index.html
→ Vuejs HTML 시작페이지 입니다. 개발완료 후 배포시 `index.html`도 같이 배포합니다.

package.json
→ npm 의존성 모듈목록 및 프로젝트 기본설정들이 표기되어 있습니다. 그리고 개발모드로 실행하는 것과 배포를 할 수 있는 명령어들이 정의되어 있습니다.

src
→ `Vuejs` 코드들이 있는 폴더입니다. 실제 이 곳에서 개발을 진행하게 됩니다.

webpack.config.js
→ 개발을 완료하고나면 여러파일들이 있는데, 그 것을 하나로 묶어주고 관리해주는 `webpack`의 설정파일입니다. (내용이 어려울 수 있으니 여기에서는 자세히 설명하지 않도록 하겠습니다.)

그리고 /src 폴더안을 보면

assets
→ 이미지나 css등 공통으로 `Vuejs`에서 요청하고 관리될 파일들이 있는 곳입니다.

App.vue
→ 여기는 `Vuejs` 최상위 컴포넌트라고 생각하시면 되고, 여기에서 본격적으로 `Vuejs`로 개발한다고 생각하시면 됩니다.

main.js
→ 여기가 Vue 인스턴스를 새로 만들고 시작하는 부분입니다. 전역으로 처리해야할 일이 있으면 이 곳에서 진행하시면 됩니다.

그리고 개발완료 후에 npm run build를 하게 되면 배포파일이 생성되는데 이 때 /dist라는 폴더가 생성되고 그 안에 파일들이 생깁니다. index.html과 /dist를 복사하여 실제 운영하려고 하는 공간에 복사해서 사용가능합니다 : )

webpack template

다음은 정말 자주 사용될 템플릿모드입니다. 저도 Vuejs로 개발할 때 가장 많이 이용하고 있습니다.

$ vue init webpack vue-example-project

템플릿만 webpack으로 지정하여 프로젝트를 생성합니다. webpack-simple에 비해 물어보는 것도 많고 설치되는 것도 많이 있습니다.

webpack-simple에서는 없었던 질문들만 설명해드리도록 하겠습니다.

# Vue 빌드 선택
? Vue build

# 두개 중에서 선택할 수 있으며, 기본선택은 Runtime + Compiler 입니다.

# 대부분의 사용자에게 권장하는 방식입니다.
- Runtime + Compiler: recommended for most users

# 6KB의 가벼운 min+gzip으로 이루어져 있는 런타임전용입니다. 템플릿은 .vue에서만 허용하고 있습니다.
- Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 

# vue-router사용여부 (사용하면 자동으로 설정해줍니다)
? Install vue-router? (Y/n)

# ESLint 적용여부 (사용하면 코드작성 스타일을 강제화 합니다)
? Use ESLint to lint your code? (Y/n)

# ESLint 적용하면 나오는 질문으로 어떤 스타일을 사용할 것인지 물어봅니다.
? Pick an ESLint preset

# 3개의 선택지가 나오며 기본은 Standard로 되어 있습니다.
- Standard (https://github.com/feross/standard)
- Airbnb (https://github.com/airbnb/javascript)
- none (configure it yourself)

# 유닛테스트 Karma, Mocha 적용 여부
? Setup unit tests with Karma + Mocha? (Y/n)

# Nightwatch 적용 여부 (UI테스트 툴입니다)
? Setup e2e tests with Nightwatch? (Y/n)




설치하고 나면 역시 폴더로 들어가서 npm 모듈들을 설치하고 실행해주면 됩니다.

여기에는 webpack-simple로 프로젝트를 생성했을 때보다 많은 파일들이 있습니다.
하나하나 중요하지만 실제 프로젝트 진행시 꼭 알아두면 좋은 것들만 추려서 설명드리겠습니다. 여기에서 간략하게 숙지하신 뒤, 실제 개발을 진행하면서 vue-cli 관련 자료를 찾아보시면 좋을 것 같습니다 : )

build
→ 배포시 관련 설정들이 들어있는 폴더입니다.

config
→ webpack관련 설정들이 포함되어 있는 폴더입니다.

package.json
→ npm 의존성 모듈 목록들과 개발/테스트/배포할 수 있는 명령어들이 포함되어 있습니다.

src
→ 여기에서 Vuejs로 개발을 진행할 수 있으며 vue-router까지 이미 설정되어 있는 것을 확인하실 수 있습니다.

static
→ Vuejs와 관련없이 정말 공통으로 사용해야할 정적파일들을 이 곳에 보관할 수 있습니다.

test
→ 개발하면서 유닛테스트를 진행할 수 있도록 준비되어 있는 test 폴더입니다.

# 빌드 후 생성되는 폴더
dist
→ 빌드를 완료하게 되면 dist폴더에 모든 파일과 index.html까지 포함되어 있습니다. 이 폴더 안에 있는 모든파일을 배포공간에 넣어두면 서비스를 운영할 수 있습니다.

끝!

여기까지 Vuejs로 처음에 어떻게 프로젝트를 생성하고 실행하고 배포하는지 간략하게 정리해보았습니다.
나름 짧게 설명한다고 했는데도 은근히 길이가 나오는거 보니, 진짜 엄청 쉽지만은 않은 것 같습니다 T_T
그래도 위에 순서대로 하나하나씩 진행하시면 뭔가 눈으로 볼 수 있는 결과물은 나올 것이라 생각합니다.
실제 개발하게 되면 해당 포스팅말고도 더 많은 것들을 숙지하고 사용 및 응용할 줄 알아야 할 것입니다. 다음 포스팅을 작성하게 된다면 Vuejs에서 기본적으로 자주 사용하는 조건처리들을 어떻게 하는지 정리해보도록 하겠습니다.
귀찮더라도 긴 글 읽어주셔서 감사합니다.

저작자표시

'프로그래밍 > 웹관련' 카테고리의 다른 글

[Vuejs] Nuxt가 좋다하여 사용해봤다고 한다  (4) 2018.05.13
[Vuejs] Front-end Framework Vue.js  (0) 2017.05.06
[개발] Vuejs에서 jQuery, Bootstrap 사용하기  (2) 2017.03.02
[개발] vue.js EventBus를 활용한 컴포넌트간 데이터 공유  (0) 2017.02.13
[개발] Vue.js에서 nextTick 사용하기  (0) 2017.01.19

관련글 더보기

댓글 영역

티스토리툴바