Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript Framework 3대장
Vue.js
“The Progressive JavaScript Framework”
/vjuː /
Hello, Vue!
단일 파일 컴포넌트
Vue.js를 선택한 이유
• 학습곡선이 낮음.
• 유연함.
• 가벼움.
• 한국어 가이드 문서가 잘 되어 있음.
Vue.js 설치하기
1. 직접 <script> 에 추가
2. npm 으로 설치하기
3. Vue-cli
4. Bower
Firebase를 선택한 이유
• 웹, iOS, Android 개발에 필요한 기능을 제공하는
BaaS.
• 직접 백엔드를 구성할 필요가 없어 시간 단축에 도움.
Firebase에서 제공하는 서비스
• 분석
• 개발: 클라우드 메시징, 인증, 실시간 데이터베이스, 스토리지, 호스
팅, 원격 구성, Test Lab, 오류 보고
• 성장: 알림, 앱 색인 생성, 동적 링크, 초대, ...
개발 프로세스
1. Firebase 셋팅
2. Vue-cli 프로젝트 셋팅
3. 프로젝트에 필요한 라이브러리 추가
4. Firebase 연결
5. 코드 수정
6. 빌드
7. 배포
Firebase 셋팅
Vue-cli
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
Vue-cli
Vue-cli
프로젝트에 필요한 라이브러리
추가
• VueFire
• Firebase cli
• Vue-Blu
$ npm install firebase vuefire —-save
$ npm install -g firebase-tool...
firebase setting
• Firebase login
firebase setting
firebase setting
• Firebase init
firebase setting
firebase setting
firebase setting
firebase setting
코드 수정(/src/main.js)
코드 수정(/src/App.vue)
Error 해결
완성
진짜 완성
build
deploy
프로젝트 링크
• 프로젝트 Github 저장소 (https://github.com/shoo7830/vuejs-
firebase)
• 호스팅 링크 (https://vuejs-app-676ec.firebaseapp.com/)
References
• Vue.js 공식 한국어 가이드 문서
• Vue.js 한국어 사용자 모임
• 2016년의 Vue
• Tour of Vue.js
• The Majesty of Vue.js 2
• Vue.js 2 &...
References
• Getting started with Vue.js: AngularJS perspective
• Why Vue2 beats Angular2 and React
• React or Vue: Which ...
Q&A
shoo7830@gmail.com
webholic.net
Vue.js와 Firebase활용기
Upcoming SlideShare
Loading in …5
×

Vue.js와 Firebase활용기

5,440 views

Published on

Vue.js와 Firebase를 활용해서 간단한 앱을 만들었던 경험을 나눕니다.

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Vue.js와 Firebase활용기

  1. 1. JavaScript Framework 3대장
  2. 2. Vue.js “The Progressive JavaScript Framework” /vjuː /
  3. 3. Hello, Vue!
  4. 4. 단일 파일 컴포넌트
  5. 5. Vue.js를 선택한 이유 • 학습곡선이 낮음. • 유연함. • 가벼움. • 한국어 가이드 문서가 잘 되어 있음.
  6. 6. Vue.js 설치하기 1. 직접 <script> 에 추가 2. npm 으로 설치하기 3. Vue-cli 4. Bower
  7. 7. Firebase를 선택한 이유 • 웹, iOS, Android 개발에 필요한 기능을 제공하는 BaaS. • 직접 백엔드를 구성할 필요가 없어 시간 단축에 도움.
  8. 8. Firebase에서 제공하는 서비스 • 분석 • 개발: 클라우드 메시징, 인증, 실시간 데이터베이스, 스토리지, 호스 팅, 원격 구성, Test Lab, 오류 보고 • 성장: 알림, 앱 색인 생성, 동적 링크, 초대, 애드워즈 • 수익 창출: AdMob
  9. 9. 개발 프로세스 1. Firebase 셋팅 2. Vue-cli 프로젝트 셋팅 3. 프로젝트에 필요한 라이브러리 추가 4. Firebase 연결 5. 코드 수정 6. 빌드 7. 배포
  10. 10. Firebase 셋팅
  11. 11. Vue-cli $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
  12. 12. Vue-cli
  13. 13. Vue-cli
  14. 14. 프로젝트에 필요한 라이브러리 추가 • VueFire • Firebase cli • Vue-Blu $ npm install firebase vuefire —-save $ npm install -g firebase-tools $ npm install vue-blu —-save
  15. 15. firebase setting • Firebase login
  16. 16. firebase setting
  17. 17. firebase setting
  18. 18. • Firebase init firebase setting
  19. 19. firebase setting
  20. 20. firebase setting
  21. 21. firebase setting
  22. 22. 코드 수정(/src/main.js)
  23. 23. 코드 수정(/src/App.vue)
  24. 24. Error 해결
  25. 25. 완성
  26. 26. 진짜 완성
  27. 27. build
  28. 28. deploy
  29. 29. 프로젝트 링크 • 프로젝트 Github 저장소 (https://github.com/shoo7830/vuejs- firebase) • 호스팅 링크 (https://vuejs-app-676ec.firebaseapp.com/)
  30. 30. References • Vue.js 공식 한국어 가이드 문서 • Vue.js 한국어 사용자 모임 • 2016년의 Vue • Tour of Vue.js • The Majesty of Vue.js 2 • Vue.js 2 & Firebase • VueFire • Vue-Blu
  31. 31. References • Getting started with Vue.js: AngularJS perspective • Why Vue2 beats Angular2 and React • React or Vue: Which Javascript UI Library Should You Be Using? • Why We Choose Vue.js • Firebase 문서
  32. 32. Q&A shoo7830@gmail.com webholic.net

×