Vue.js와 Firebase를 활용한 웹 서비스 개발
-
Upload
aria-in-suk-kim -
Category
Technology
-
view
623 -
download
2
Transcript of Vue.js와 Firebase를 활용한 웹 서비스 개발
![Page 1: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/1.jpg)
Vue.js와 Firebase를활용한웹서비스개발
프론트엔드개발팀김인숙
![Page 2: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/2.jpg)
“약팔러나왔습니다.”
![Page 3: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/3.jpg)
JavaScript Framework 3대장
![Page 4: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/4.jpg)
Vue.js
“The Progressive JavaScript Framework”
/vjuː /
![Page 5: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/5.jpg)
Hello, Vue!
![Page 6: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/6.jpg)
Vue.js와다른언어와관계
• 가상 DOM
• 반응적이고조합가능한컴포넌트
• 코어라이브러리에만집중• 라우팅및전역상태를관리하는컴패니언라이브러리
![Page 7: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/7.jpg)
Vue.js를선택한이유
• 학습곡선이낮음.
• 유연함.
• 가벼움.
• 한국어가이드문서가잘되어있음.
![Page 8: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/8.jpg)
템플릿문법
• HTML 기반템플릿구문사용
• 데이터바인딩의기본형태는 {{ }} 을사용한텍스트보간
• 디렉티브: v- 접두사사용
![Page 9: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/9.jpg)
단일 파일컴포넌트
![Page 10: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/10.jpg)
Vue.js 설치하기
1. 직접 <script> 에 추가
2. npm 으로설치하기
3. Vue-cli
4. Bower
![Page 11: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/11.jpg)
Vue-cli
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
![Page 12: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/12.jpg)
Vue-cli
![Page 13: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/13.jpg)
Vue-cli
![Page 14: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/14.jpg)
Firebase
![Page 15: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/15.jpg)
Firebase에서사용할자원
• 실시간데이터베이스
• 배포
• SSL이적용된도메인
![Page 16: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/16.jpg)
개발프로세스
1. Firebase 셋팅
2. Vue-cli 프로젝트셋팅
3. 프로젝트에필요한라이브러리추가
4. Firebase 연결
5. 입출력구현
6. 빌드
7. 배포
![Page 17: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/17.jpg)
필요한라이브러리추가
• VueFire
• Firebase cli
$ npm install firebase vuefire —-save
$ npm install -g firebase-tools
$ firebase login
$ firebase init
$ firebase deploy
![Page 18: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/18.jpg)
필요한라이브러리추가
• Bootstrap
• JQuery
• Toastr Library
![Page 19: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/19.jpg)
build
![Page 20: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/20.jpg)
deploy
![Page 21: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/21.jpg)
Show me the Code
![Page 22: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/22.jpg)
Vue.js IE8 이하지원
“Vue.js는 IE9부터지원합니다.”
![Page 23: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/23.jpg)
멀리가기위해함께하실래요?
![Page 24: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/24.jpg)
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
![Page 25: Vue.js와 Firebase를 활용한 웹 서비스 개발](https://reader031.fdocuments.net/reader031/viewer/2022012404/5a654c2d7f8b9a10228b48fb/html5/thumbnails/25.jpg)
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 문서