Vue.js와 Firebase를활용한웹서비스개발

프론트엔드개발팀김인숙

“약팔러나왔습니다.”

JavaScript Framework 3대장

Vue.js

“The Progressive JavaScript Framework”

/vjuː /

Hello, Vue!

Vue.js와다른언어와관계

• 가상 DOM

• 반응적이고조합가능한컴포넌트

• 코어라이브러리에만집중• 라우팅및전역상태를관리하는컴패니언라이브러리

Vue.js를선택한이유

• 학습곡선이낮음.

• 유연함.

• 가벼움.

• 한국어가이드문서가잘되어있음.

템플릿문법

• HTML 기반템플릿구문사용

• 데이터바인딩의기본형태는 {{ }} 을사용한텍스트보간

• 디렉티브: v- 접두사사용

단일 파일컴포넌트

Vue.js 설치하기

1. 직접 <script> 에 추가

2. npm 으로설치하기

3. Vue-cli

4. Bower

Vue-cli

$ npm install -g vue-cli

$ vue init webpack my-project

$ cd my-project

$ npm install

$ npm run dev

Vue-cli

Vue-cli

Firebase

Firebase에서사용할자원

• 실시간데이터베이스

• 배포

• SSL이적용된도메인

개발프로세스

1. Firebase 셋팅

2. Vue-cli 프로젝트셋팅

3. 프로젝트에필요한라이브러리추가

4. Firebase 연결

5. 입출력구현

6. 빌드

7. 배포

필요한라이브러리추가

• VueFire

• Firebase cli

$ npm install firebase vuefire —-save

$ npm install -g firebase-tools

$ firebase login

$ firebase init

$ firebase deploy

필요한라이브러리추가

• Bootstrap

• JQuery

• Toastr Library

build

deploy

Show me the Code

Vue.js IE8 이하지원

“Vue.js는 IE9부터지원합니다.”

멀리가기위해함께하실래요?

References

• Vue.js 공식한국어가이드문서

• Vue.js 한국어사용자모임

• 2016년의 Vue

• Tour of Vue.js

• The Majesty of Vue.js 2

• A Vue over React

• Vue.js Is Good, But Is It Better Than Angular Or React?

• Vue.js 2 & Firebase

References

• Getting started with Vue.js: AngularJS perspective

• Evan You 인터뷰

• Why Vue2 beats Angular2 and React

• React or Vue: Which Javascript UI Library Should You

Be Using?

• Why We Choose Vue.js

• Firebase 문서

Q&Akis@gabia.com