ݺߣ

ݺߣShare a Scribd company logo

Vue.js와 Firebase를 활용한 웹 서비스 개발

•Download as PPTX, PDF•
•
Aria (In Suk) Kim
Aria (In Suk) Kim

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

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

More Related Content

Vue.js와 Firebase를 활용한 웹 서비스 개발

Editor's Notes

  • #2: 안녕하세요 프론트엔드개발팀 김인숙입니다. 저는 오늘 Vue.js와 Firebase를 활용하여 웹 서비스를 개발했던 경험을 공유하고자 합니다. 맛보기 정도라고 생각해주세요.
  • #3: 오늘의 약은 Vue.js와 Firebase입니다. 저는 백엔드를 잘 알지 못합니다. 물론 자바스크립트 레벨도 게임으로 치면 이제 막 튜토리얼 단계를 시작하고 있는 Lv.1 입니다. 쪼렙이죠. 이런 쪼렙인 저도 Vue.js와 Firebase만 있으면 제대로 된 웹 서비스를 하나 만들 수 있습니다. 일단 오늘은 뷰에 대한 안면 익히기 정도로…시작하겠습니다.
  • #4: 최근 자바스크립트 프레임워크는 앵귤러, 리액트, 뷰 이렇게 3가지가 많이 쓰이고 있습니다. 3대장이죠. 깊게는 아니지만 위의 3가지를 조금씩 접해보았습니다. 뷰는 2016년을 기점으로 급격히 성장합니다. 그래서 뷰가 2016년에 새로 나왔다고 생각할 수 있는데요. 
  • #5: 뷰는 2013년에 Evan you에 의해 만들어졌습니다. AngularJS와 Backbone에서 영감을 얻어 만들었다고 합니다. 진보한 자바스크립트 프레임워크라는 슬로건을 걸고 있습니다.  뷰는 MVVC 패턴에서 ViewModel 만 다루고 있습니다. 이름 자체도 View와 발음이 같습니다. 그러므로 다른 라이브러리나 기존 프로젝트와 결합이 쉽습니다.
  • #7: 만약 앵귤러나 리액트를 접해보셨다면 뷰는 매우 쉽게 사용하실 수 있습니다. 뷰는 다른 두 언어의 영향을 많이 받았기 때문에 유사한 부분이 많습니다. 리액트와의 관계를 보면 가상 DOM을 활용합니다. 반응적이고 조합가능한 컴포넌트를 제공하며, 뷰만 있기에 코어라이브러리에만 집중합니다. 그래서 다른 라우팅이나 전역상태를 관리하는 부분은 컴패니언 라이브러리가 존재합니다.
  • #8: 제가 뷰를 선택한 이유는 다음과 같습니다. 특히 한국어 가이드 문서가 잘 되어 있어 학습곡선이 낮다는 점입니다. 물론 앵귤러도 앵귤러 사용자 그룹에서 번역이 진행중입니다. 유연함은 템플릿 상에서 JSX도 사용가능하고 타입스크립트도 사용이 가능하다는 점입니다. 뷰모델만 있으므로 당연히 가벼울 수 밖에 없습니다.
  • #9: 템플릿 부분을 보면 앵귤러와 상당히 유사하다는 느낌을 받으실 수 있습니다. 바로 이중 중괄호와 디렉티브가 있다는 점이죠.
  • #10: 전 뷰에서 이 부분이 가장 매력적인 부분이였습니다. 컴포넌트 안에서 HTML, CSS, JS 가 *.vue 확장자 파일로 묶여지는 부분이였습니다. 그리고 이 내부에 컴포넌트에 대한 데이터와 메서드가 존재합니다. 데이터와 메서드를 통해 컴포넌트를 제어할 수 있습니다. 각각을 블럭이라고 부르는데 template에는 html뿐만 아니라 Pug, handlebar같은 템플릿이 올수도 있습니다. style에는 css, less, sass 등을 사용할 수 있고, 스크립트에는 자바스크립트 뿐만 아니라 타입스크립트 커피스크립트를 사용할 수 있습니다. 구조, 표현, 동작의 구분이 마치 프론트엔드개발에서 마크업 작업 결과물과 비슷하다는 느낌을 받았습니다. 이 컴포넌트들이 결합해서
  • #11: 개발용 버전을 다운받아서 추가하거나(Vue는 전역변수가 됨), npm 으로 설치합니다. 대규모 응용 프로그램을 빌드할 때 권장합니다. Vue-cli는 webpack 기반이며, 쉽고 빠르게 개발 환경을 구성해줍니다. Bower를 통해 설치하는 방법이 있으나 npm으로 의존성을 관리하는것이 더 좋습니다. bower_component라는 별도의 폴더가 생성되며, 이것을 서버에 올려야 하는 귀찮음이 있습니다.
  • #14: cli 방식의 설치는 블라블라… (여기까지 7분 이내)
  • #15: 지난 주에 이미 발표가 있었으므로 상세한 설명은 생락하겠습니다.
  • #16: 제가 이 시간에 Firebase를 활용하는 부분은 실시간 데이터베이스와 배포, 도메인 3가지 입니다. (여기까지 3분)
  • #18: firebase serve public…
  • #22: …그리고 도메인 셋팅까지.
  • #23: 바이두에서 만든 echart는 낮은 IE버전을 지원하지만 뷰는 그렇지 않습니다. ES5 사실 IE8 지원을 하면 참~ 좋겠지만 지원을 하기 위해 드는 노력대비 효과가 그리 좋지 않은 느낌입니다…떱.
  • #24: (여기까지 나머지 전부) 아프리카 속담에 이런 말이 있습니다. 가까이 가려면 혼자가고 멀리 가려면 함께 가라. 전 Vue.js 를 깊게 파고 싶은데 혹시 관심이 있으시다면 함께 스터디하면 좋을듯합니다.