Vue.js Firestore 예 - Firebase Cloud Firestore를 사용한 Vue.js CRUD 서버리스

https://grokonez.com/frontend/vue-js/vue-js-firestore-example-vue-js-crud-serverless-with-firebase-cloud-firestore

Cloud Firestore는 클라우드에 데이터를 저장하는 데 도움이 됩니다. 오프라인 모드를 지원하므로 기기가 인터넷에 연결되어 있는지 여부에 관계없이 앱이 제대로 작동(데이터 쓰기, 읽기, 듣기 및 쿼리)하고 자동으로 데이터베이스에서 Firebase 서버로 변경 사항을 가져옵니다. 쿼리 및 가져오기 기능을 개선하는 방식으로 데이터를 구조화할 수 있습니다. 이 튜토리얼은 Firebase Firestore CRUD 작업을 수행할 수 있는 Vue.js 앱을 보여줍니다.

관련 게시물: Vue.js CRUD example – a simple Note App

Vue.js Firestore 예제 개요

목표

Vue 앱은 새 메모를 작성하는 데 도움이 되며 메모 목록을 표시하고 각 메모 페이지(제목 및 내용 포함)를 쉽게 수정할 수 있습니다. 이 앱은 오프라인 모드도 지원합니다. 인터넷 연결 없이 노트를 생성/업데이트/삭제할 수 있습니다.



물론 이 앱은 백엔드 인프라로 Firebase Firestore와 상호 작용합니다.

데모

프로젝트 구조

3가지 구성 요소가 있습니다.

App.vue에는 다른 모든 구성 요소가 들어 있습니다.

NotesList.vue에는 + 메모 버튼이 있는 목록의 모든 메모가 포함되어 있습니다.

Note.vue 새 메모를 만들거나 현재 메모를 편집할 수 있는 단일 메모를 목록에 표시합니다.

기술

Vue CLI 3.0.1

뷰 2.5.17

자바스크립트용 Firebase SDK 5.4.2

관행

Vue 프로젝트 설정

vue-cli 설치

어디서나 Vue CLI를 사용하려면 다음 명령을 실행하십시오.npm install -g vue-cli

프로젝트 초기화

프로젝트 폴더를 저장하려는 폴더를 cmd로 지정하고 다음 명령을 실행합니다.npm create vue-note-app

2가지 옵션이 표시되며 기본값을 선택합니다.

Firebase SDK 설치

실행 명령: npm install firebase프로세스가 완료되면 package.json에서 firebase를 볼 수 있습니다.

"dependencies": {
  "firebase": "^5.4.2",
  "vue": "^2.5.17"
},

Firebase 프로젝트 설정

프로젝트 만들기

Firebase Console 로 이동하여 Google 계정으로 로그인한 다음 프로젝트 추가를 클릭합니다.

프로젝트 이름을 입력하고 위치를 선택합니다.



그런 다음 CREATE PROJECT를 누릅니다.

Firebase Cloud Firestore에 대한 구성 규칙

왼쪽 탭에서 데이터베이스를 클릭합니다.
Cloud Firestore를 선택합니다. Create Database를 클릭하면 창이 표시되고 테스트 모드에서 시작을 선택합니다.



더 보기: https://grokonez.com/frontend/vue-js/vue-js-firestore-example-vue-js-crud-serverless-with-firebase-cloud-firestore