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
×

of

Vue.js와 Firebase활용기 Slide 1 Vue.js와 Firebase활용기 Slide 2 Vue.js와 Firebase활용기 Slide 3 Vue.js와 Firebase활용기 Slide 4 Vue.js와 Firebase활용기 Slide 5 Vue.js와 Firebase활용기 Slide 6 Vue.js와 Firebase활용기 Slide 7 Vue.js와 Firebase활용기 Slide 8 Vue.js와 Firebase활용기 Slide 9 Vue.js와 Firebase활용기 Slide 10 Vue.js와 Firebase활용기 Slide 11 Vue.js와 Firebase활용기 Slide 12 Vue.js와 Firebase활용기 Slide 13 Vue.js와 Firebase활용기 Slide 14 Vue.js와 Firebase활용기 Slide 15 Vue.js와 Firebase활용기 Slide 16 Vue.js와 Firebase활용기 Slide 17 Vue.js와 Firebase활용기 Slide 18 Vue.js와 Firebase활용기 Slide 19 Vue.js와 Firebase활용기 Slide 20 Vue.js와 Firebase활용기 Slide 21 Vue.js와 Firebase활용기 Slide 22 Vue.js와 Firebase활용기 Slide 23 Vue.js와 Firebase활용기 Slide 24 Vue.js와 Firebase활용기 Slide 25 Vue.js와 Firebase활용기 Slide 26 Vue.js와 Firebase활용기 Slide 27 Vue.js와 Firebase활용기 Slide 28 Vue.js와 Firebase활용기 Slide 29 Vue.js와 Firebase활용기 Slide 30 Vue.js와 Firebase활용기 Slide 31 Vue.js와 Firebase활용기 Slide 32 Vue.js와 Firebase활용기 Slide 33
Upcoming SlideShare
Vue.js와 Firebase를 활용한 웹 서비스 개발
Next
Download to read offline and view in fullscreen.

18 Likes

Share

Download to read offline

Vue.js와 Firebase활용기

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • innurman

    Feb. 2, 2021
  • HyejoonGang

    May. 9, 2019
  • ssuser228838

    Apr. 3, 2019
  • KJKorea

    Jan. 4, 2019
  • restart916

    Dec. 7, 2018
  • kabjinkwon

    Nov. 25, 2018
  • ssuser00d6e4

    Sep. 1, 2018
  • ssuser9fb865

    Jun. 19, 2018
  • skyjich

    Apr. 17, 2018
  • citrusalice

    Apr. 9, 2018
  • ssuseraa19d0

    Dec. 11, 2017
  • twiny

    Sep. 12, 2017
  • putyourhandsup

    Sep. 1, 2017
  • JunyoungJung8

    Aug. 2, 2017
  • jeeyongro

    Apr. 26, 2017
  • JinHoKim1

    Apr. 22, 2017
  • ssuser804f4b

    Apr. 21, 2017
  • lqez

    Apr. 21, 2017

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

Views

Total views

9,001

On Slideshare

0

From embeds

0

Number of embeds

2,737

Actions

Downloads

47

Shares

0

Comments

0

Likes

18

×