자바스크립트 프레임워크중에 하나인 Vue.js와 Firebase를 활용하여 백엔드 없이 웹 서비스를 개발할 수 있습니다.

1. Vue.js와 Firebase를 활용
한
웹 서비스 개발
프론트엔드개발팀 김인숙

2. “약 팔러 나왔습니다.”

3. JavaScript Framework 3대장

4. Vue.js
“The Progressive JavaScript Framework”
/vjuː /

5. Hello, Vue!

6. Vue.js와 다른 언어와 관계
• 가상 DOM
• 반응적이고 조합가능한
컴포넌트
• 코어 라이브러리에만 집중
• 라우팅 및 전역상태를 관리하는
컴패니언 라이브러리

7. Vue.js를 선택한 이유
• 학습곡선이 낮음.
• 유연함.
• 가벼움.
• 한국어 가이드 문서가 잘 되어 있음.

8. 템플릿 문법
• HTML 기반 템플릿 구문 사용
• 데이터 바인딩의 기본 형태는 {{ }} 을 사용한 텍스트
보간
• 디렉티브: v- 접두사 사용

9. 단일 파일 컴포넌트

10. Vue.js 설치하기
1. 직접 <script> 에 추가
2. npm 으로 설치하기
3. Vue-cli
4. Bower

11. Vue-cli
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

12. Vue-cli

13. Vue-cli

14. Firebase

15. Firebase에서 사용할 자원
• 실시간 데이터베이스
• 배포
• SSL이 적용 된 도메인

16. 개발 프로세스
1. Firebase 셋팅
2. Vue-cli 프로젝트 셋팅
3. 프로젝트에 필요한 라이브러리 추가
4. Firebase 연결
5. 입출력 구현
6. 빌드
7. 배포

17. 필요한 라이브러리 추가
• VueFire
• Firebase cli
$ npm install firebase vuefire —-save
$ npm install -g firebase-tools
$ firebase login
$ firebase init
$ firebase deploy

18. 필요한 라이브러리 추가
• Bootstrap
• JQuery
• Toastr Library

19. build

20. deploy

21. Show me the Code

22. Vue.js IE8 이하 지원
“Vue.js는 IE9부터 지원합니다.”

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

24. 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

25. 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 문서

26. Q&A
kis@gabia.com