Vue.js와 Firebase활용기
•Télécharger en tant que PPTX, PDF•
19 j'aime•9,305 vues
Vue.js와 Firebase를 활용해서 간단한 앱을 만들었던 경험을 나눕니다.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Vue.js와 Firebase활용기
Similaire à Vue.js와 Firebase활용기 (20)
Vue.js와 Firebase활용기
- 3. Vue.js “The Progressive JavaScript Framework” /vjuː /
- 4. Hello, Vue!
- 5. 단일 파일 컴포넌트
- 6. Vue.js를 선택한 이유 • 학습곡선이 낮음. • 유연함. • 가벼움. • 한국어 가이드 문서가 잘 되어 있음.
- 7. Vue.js 설치하기 1. 직접 <script> 에 추가 2. npm 으로 설치하기 3. Vue-cli 4. Bower
- 8. Firebase를 선택한 이유 • 웹, iOS, Android 개발에 필요한 기능을 제공하는 BaaS. • 직접 백엔드를 구성할 필요가 없어 시간 단축에 도움.
- 9. Firebase에서 제공하는 서비스 • 분석 • 개발: 클라우드 메시징, 인증, 실시간 데이터베이스, 스토리지, 호스 팅, 원격 구성, Test Lab, 오류 보고 • 성장: 알림, 앱 색인 생성, 동적 링크, 초대, 애드워즈 • 수익 창출: AdMob
- 10. 개발 프로세스 1. Firebase 셋팅 2. Vue-cli 프로젝트 셋팅 3. 프로젝트에 필요한 라이브러리 추가 4. Firebase 연결 5. 코드 수정 6. 빌드 7. 배포
- 11. Firebase 셋팅
- 12. Vue-cli $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
- 13. Vue-cli
- 14. Vue-cli
- 15. 프로젝트에 필요한 라이브러리 추가 • VueFire • Firebase cli • Vue-Blu $ npm install firebase vuefire —-save $ npm install -g firebase-tools $ npm install vue-blu —-save
- 16. firebase setting • Firebase login
- 17. firebase setting
- 18. firebase setting
- 19. • Firebase init firebase setting
- 20. firebase setting
- 21. firebase setting
- 22. firebase setting
- 25. Error 해결
- 26. 완성
- 27. 진짜 완성
- 28. build
- 29. deploy
- 30. 프로젝트 링크 • 프로젝트 Github 저장소 (https://github.com/shoo7830/vuejs- firebase) • 호스팅 링크 (https://vuejs-app-676ec.firebaseapp.com/)
- 31. References • Vue.js 공식 한국어 가이드 문서 • Vue.js 한국어 사용자 모임 • 2016년의 Vue • Tour of Vue.js • The Majesty of Vue.js 2 • Vue.js 2 & Firebase • VueFire • Vue-Blu
- 32. 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 문서
Notes de l'éditeur
- 안녕하세요 가비아 프론트엔드개발팀에서 서버/IDC/클라우드, 하이웍스 프론트엔드개발을 하고 있는 김인숙입니다. 가족은 여우같은 남편과 토끼같은 딸 하나 있구요 저는 주로 웹퍼블리싱 위주로 작업을 해서 자바스크립트는 아직 레벨이 낮습니다. 백엔드 개발에 대한 경험도 없고, 프론트엔드개발을 하고 있지만 자바스크립트도 아직 낮은 레벨의 제가 어떻게 Vue.js와 Firebase를 활용하여 웹앱을 만들었는지 그 활용기를 발표하고자 합니다 먼저 왜 Vue.js를 선택하게 되었는지 부터 이야기 해보죠. 요즘 자바스크립트 프레임워크 중 가장 많은 사람들이 쓰는 프레임워크가 무엇일까요?
- 네 위의 그림처럼, ng2, React 그리고 우리가 지금 이야기 하려고 하는 Vue.js가 있죠. 저는 이 3가지가 현재 Javascript 3대장이라고 생각합니다. 어쩌다보니 위의 3가지를 깊게는 아니고 수박 겉핥기로 경험하게 되었습니다.
- 뷰는 AngularJS와 Backbone에서 영감을 얻어 만들었다고 합니다. 진보한 자바스크립트 프레임워크라는 슬로건을 걸고 있습니다. 뷰는 MVVC 패턴에서 ViewModel 만 다루고 있습니다. 이름 자체도 View와 발음이 같습니다. 그러므로 다른 라이브러리나 기존 프로젝트와 결합이 쉽습니다.
- 사실 ng1은 양방향 데이터의 흐름이 어려웠지만 뭔가 생산성을 높여주는 프레임워크라는 생각을 했습니다. ng2로 넘어가면서 타입스크립트와 제대로 사용하기위해서는 rxjs개념까지 익혀야하니 너무 어려웠습니다. 컴포넌트, 모듈, 서비스 등의 개념을 이해하기 매우 어려웠습니다. 그래서 React로 눈을 돌렸습니다. JSX는 그래도 html과 비슷할 것이라고 생각해서 선택하였는데 이것도 쉽지는 않았습니다. 이렇게 정착하지 못하고 방황하다가 Vue의 기본 코드를 보니 쉽게 이해가 되었습니다. 완벽하게는 아니지만 이렇게 쓰면 되겠다라는 건 알겠더라구요.
- 전 뷰에서 이 부분이 가장 매력적인 부분이였습니다. 컴포넌트 안에서 HTML, CSS, JS 가 *.vue 확장자 파일로 묶여지는 부분이였습니다. 그리고 이 내부에 컴포넌트에 대한 데이터와 메서드가 존재합니다. 데이터와 메서드를 통해 컴포넌트를 제어할 수 있습니다. 각각을 블럭이라고 부르는데 template에는 html뿐만 아니라 Pug, handlebar같은 템플릿이 올수도 있습니다. style에는 css, less, sass 등을 사용할 수 있고, 스크립트에는 자바스크립트 뿐만 아니라 타입스크립트 커피스크립트를 사용할 수 있습니다. 구조, 표현, 동작의 구분이 마치 프론트엔드개발에서 마크업 작업 결과물과 비슷하다는 느낌을 받았습니다. 이 컴포넌트들이 결합해서 하나의 서비스를 구축하게 되는 것입니다.
- 그래서 뷰를 선택한 이유는 학습곡선이 낮고, 개발자 성향에 따라 다양한 방법으로 개발을 할 수 있는 유연함과, 뷰 모델, 즉 핵심코어에 집중하여 가볍다는 점과 특히 한국어 가이드 문서가 잘 되어 있다는 점입니다. 한국어 가이드가 뷰의 학습곡선을 낮춘 것에 공헌을 했다고 생각합니다.
- 개발용 버전을 다운받아서 추가하거나 npm 으로 설치합니다. 대규모 응용 프로그램을 빌드할 때 권장합니다. Vue-cli는 webpack 기반이며, 쉽고 빠르게 개발 환경을 구성해줍니다. Bower를 통해 설치하는 방법이 있으나 npm으로 의존성을 관리하는것이 더 좋습니다. bower_component라는 별도의 폴더가 생성되며, 이것을 서버에 올려야 하는 귀찮음이 있습니다. 우리는 가장 간단하고 빠르게 Vue-cli를 이용할 것입니다.
- 파이어베이스는 구글의 서비스 중 하나로 웹, iOS, Android 개발에 필요한 기능을 제공하는 BaaS, 즉 Back end as service입니다. 직접 백엔드를 구성할 필요 없이 파이어베이스를 이용하면 프론트엔드개발에 집중할 수 있습니다. 그러므로 시간 단축에 도움이 됩니다.
- Firebase에서 제공하는 서비스는 아래와 같습니다. 각 서비스에 관한 자세한 설명은 firebase 공식문서를 참고해주세요. 이 중 제가 사용할 자원은 실시간 데이터베이스와 호스팅입니다.
- 제가 보여드릴 웹앱은 간단하게 책 제목, 저자, 링크를 입력하여 책을 관리하는 앱입니다. 제가 처음부터 짠 건아니고…튜토리얼을 보고 조금 응용하였습니다. 개발 프로세스는 다음과 같습니다.
- Firebase 셋팅: 실시간 데이터베이스 부분으로 가서 규칙 탭을 누르고, rules에서 .read, .write를 true로 변경합니다.
- 전역으로 vue-cli를 설치합니다. 그 후 사용할 프로젝트의 보일러플레이트를 웹팩으로 생성합니다. 프로젝트의 디렉터리로 이동 한 후, 의존성 파일을 설치하고, npm run dev 명령어로 개발모드를 실행합니다.
- 보일러플레이트를 설정하는 화면입니다. 저는 테스팅까지 필요가 없어서 No로 답하였지만 여러분들은 필요하시면 Lint나 e2e test, unit test까지 설정할 수 있습니다.
- npm run dev를 실행시켰을 때 localhost:8080 위와 같은 페이지가 나오면 제대로 설정된 것입니다. 잠시 구조를 살펴보도록 하겠습니다.
- 이 프로젝트에는 파이어베이스의 데이터를 바인딩 해주는 라이브러리, 뷰파이어가 필요합니다. 배포를 위해서는 파이어베이스 cli도 필요하고, 좀 더 멋지게 프로젝트를 꾸미기 위해 Vue-blu를 설치합니다. 지금 설치하는 모습을 보여드리고 싶지만 그리하면 제 발표 시간이 두 배로 길어질수도 있으니 미리 설치해 왔습니다.
- 해당 디렉터리로 이동하여 firebase login을 칩니다. Google 계정으로 로그인 합니다. 이 명령은 로컬 컴퓨터를 Firebase 계정에 연결하고 프로젝트에 대한 액세스를 허용합니다. 정상적으로 인증되었는지 테스트하려면 firebase list를 실행하여 Firebase 프로젝트 목록이 표시되는지 확인합니다.
- 자동으로 웹 브라우저가 열리면서 위와 같은 페이지로 이동하게 됩니다. 허용을 누릅니다.
- 위와 같은 메시지가 나오면 성공입니다. 터미널 창에서도 인증이 성공했다는 메시지를 볼 수 있습니다.
- 구글 계정으로 로그인이 되면 firebase init 명령으로 프로젝트를 초기화 시킵니다. 언제든 init을 사용하면 기능을 추가 할 수 있습니다. 전 이전에 DB는 추가했으니 호스팅을 추가해보았습니다.
- 여러 개의 프로젝트를 생성했다면 이렇게 나오는데요. 웹페이지에서 프로젝트를 생성하고 하셔도 되고 터미널 명령 상에서 프로젝트를 만드셔도 됩니다.
- 데이터베이스 rule은 그냥 엔터를 치면 위와 같이 설정이 됩니다. 필요한 의존성 파일을 설치하고..
- 호스팅 셋업까지 하면 끝입니다~
- 위와 같이 main.js에서 Vuefire를 연결하고, Vue-blu도 연결해줍니다.
- app.vue에서 위와 같이 입력해줍니다. 이 부분은 Vuefire 문서에서 참고하셔서 넣으시면 됩니다. 자료에 소스코드 경로도 같이 공유해드리겠습니다. 그런데…오류가 나타났어요…
- “데이터 옵션은 구성 요소 정의에서 인스턴스 별 값을 반환하는 함수이어야 합니다.” “속성 또는 메서드 "books"는 인스턴스에 정의되어 있지 않지만 렌더링 중에 참조됩니다. 데이터 옵션에서 반응적인 데이터 속성을 선언해야합니다.” Vuefire README를 보니 “Vue 인스턴스에서 속성에 액세스해야하는 경우 함수 구문을 사용합니다.” 라고 쓰여 있어서 혹시…?이렇게 하면 될까 싶어서 수정하였더니 잘 되었습니다.
- 부트스트랩을 쓴 예제가 아쉬워서 Vue를 이용한 UI 컴포넌트를 찾아서 다시 수정해봤습니다.
- Vue-blu를 붙이니 한결 좋아보입니다. :D
- 이제 호스팅 하기 위해 npm run build를 실행합니다.
- 조금 번거롭지만 dist에 static폴더와 index.html을 public으로 이동하고 firebase deploy를 입력합니다.
- (페이지 열어 보여줌) 그래서 최종 완성 페이지는 이렇습니다. 보시면 SSL도 적용된 거 보이시죠? 만약 갖고 계신 도메인이 있다면 파이어베이스에 등록해도 SSL이 적용됩니다. (간단한 시연) 개발을 해야하는데 시간이 부족하다면 Vue.js와 파이어베이스를 이용해 보세요. 참 쉽고 빠르게 멋진 작업물을 만들수 있습니다. 고맙습니다.
- 제가 참고한 자료의 링크입니다.
- 혹시 제가 발표하다가 잘못전달했거나 그런 부분이 있다면 이 주소로 메일을 주세요. 왜냐하면 전 소심하니까요.