Vue.js 와 Google Firebase 서비스(auth, hosting, functions, firestore)를 이용해서 웹사이트를 손쉽게 만들 수 있습니다.

복잡한 서버 구성 없이(serverless) 혼자서 빠르게 무료로 웹을 제작하는 것이 목적입니다.

소개

Vue & Firebase에 대해 간단히 소개합니다.

바로가기

소스코드 사용 방법

소스위치: https://github.com/fkkmemi/vf

바로가기

1 개발환경 구축하기

개발에 필요한 요소들을 설치합니다.

바로가기

2 에디터 설정하기

뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.

바로가기

3 사이트 배포하기

firebase hosting을 이용해서 사이트를 배포해봅니다.

바로가기

4 git 사용하기

git에 대해 알아보고 필요한 만큼만 사용해봅니다.

바로가기

5 SPA 알아보기

SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.

바로가기

6 git 다운로드 받기

강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.

바로가기

7 vue 맛보기

vue가 무엇인지 이해하고 넘어갑니다.

바로가기

8 vuetify로 툴바 만들기

vuetify를 이용해서 상단 툴바를 만들어봅니다.

바로가기

9 vuetify로 리스트 만들기

vuetify/vList를 사용해봅니다.

바로가기

10 vuetify로 네비게이션 드라워만들기

툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.

바로가기

11 vuetify로 하위 메뉴 구성하기

vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.

바로가기

12 vuetify로 카드 만들기

화면 구성의 기본인 v-card를 사용해봅니다.

바로가기

13 vuetify 반응형웹 구현하기

v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.

바로가기

14 promise 알아보기

데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.

바로가기

15 vuetify로 노트 만들기

데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.

바로가기

16 firestore 설정하기

프론트에서 firestore 사용할 수 있도록 설정해봅니다.

바로가기

17 firestore crud 해보기

firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.

바로가기

18 firebase 인증(auth) 로그인 해보기

파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.

바로가기

19 firebase functions 알아보기

파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.

바로가기

20 firebase functions RESTful api 만들기

파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.

바로가기

21 firebase functions vue에서 axios로 접근하기

파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.

바로가기

22 vue 공용 error 처리하기

추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.

바로가기

23 firebase functions 공용 에러 처리

백엔드(firebase functions)에서 에러처리를 해봅니다.

바로가기

24 인증을 위한 미들웨어와 액시오스 설정하기

파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.

바로가기

25 뷰(vue) 컴포넌트(component) 알아보기

vue component 사용법을 간단히 알아봅니다.

바로가기

26 뷰엑스(vuex)로 전역 제어하기

vuex를 사용해서 전역 변수를 제어해봅니다.

바로가기

27 firebase 인증(auth)정보를 vuex 로 저장

인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.

바로가기

28 로그인 화면 모양 내보기

뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..

바로가기

29 뷰라우터 네비게이션 가드 사용하기

뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.

바로가기

30 로딩 상태 표시하기

vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.

바로가기

31 로그인 상태 만들어보기

vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.

바로가기

32 회원가입 모양 내보기

vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.

바로가기

33 v-form으로 유효성 검사하기

vuetify의 v-form으로 유효성 판단을 해봅니다.

바로가기

34 이메일로 가입과 로그인해보기

파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.

바로가기

35 vuetify2로 업그레이드하기

vuetify V1 to V2로 업그레이드 해봅니다.

바로가기

36 firebase functions 환경변수 사용하기

관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.

바로가기

37 firebase functions 맞춤 사용자 설정하기

firebase auth 정보에 사용자 레벨을 추가합니다.

바로가기

38 firebase token 풀어보기

사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~

바로가기

39 권한으로 페이지 강제 이동시키기

vue-router로 권한에 따라 페이지를 이동시킵니다.

바로가기

40 firestore에 사용자 정보 추가 삭제하기

firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.

바로가기

41 파이어베이스 인증 라우터 지연시키기

firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.

바로가기

42 뷰라우터로 권한별 페이지 접근하기

firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.

바로가기

43 파이어베이스 함수에서 권한 확인하기

파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.

바로가기

44 파이어베이스 함수에서 파이어스토어 사용하기

파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.

바로가기

45 파이어스토어 컬렉션의 전체 개수 구하기

firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.

바로가기

46 파이어스토어 페이징해보기

firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.

바로가기

47 파이어스토어 정렬해보기

firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.

바로가기

48 파이어스토어 검색해보기

firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.

바로가기

49 검색어 필터 만들어보기

vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.

바로가기

50 회원관리 모양 내보기

vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.

바로가기

51 사용자 권한 변경하기

사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~

바로가기

52 firebase storage 사용해보기

firebase storage 기능을 사용해봅니다.

바로가기