[클론코딩] Nuxt firestore 연결하기

안녕하세요. 기깔나는 사람들에서 프론테엔드를 맡고있는 재혁입니다.

Nuxt3와 firestore를 연결해보고자 합니다.

 

 

---

FireStore 만들기

Firestore 앱 만들기

firebase페이지로 가서 로그인 후 firebase 앱 만들기를 시작합니다.

프로젝트 추가하기

프로젝트 이름 정하기

 

저는 Google 애널리틱스 사용 설정은 하지 않았습니다.

완성

웹 앱 추가하기

추가할 제품으로 cloud FireStore 고르기

데이터베이스 만들기 클릭

테스트 모드

fireStore 위치 설정 서울로 해줬습니다.

데이터 베이스 생성 성공

프로젝트 개요 옆에 프로젝트 설정으로 가서 SDK 사용하기

---

 

SDK 생성 및 fireStore 초기화

Server 디렉토리 생성 및 환경 셋팅

npm i firebase

 

firebase.ts 파일 생성

 

 

 

---

form 데이터 추가

Docs를 참고하여 현재 진행중인 form 데이터를 간단하게 추가해보겠습니다.

Cloud Firestore에 데이터 추가  |  Firebase

 

import { doc, setDoc } from "firebase/firestore"; 

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
  name: "Los Angeles",
  state: "CA",
  country: "USA"
});

setDoc(doc(데이터베이스, col, document), { 넣을 데이터 객체}) 이렇게 이해하시면 됩니다.

 

form이 존재하는 vue에서 아래 db를 가져오고

import { doc, setDoc } from "firebase/firestore";
import fireStoreDb from "../server/lib/firebase";

form 데이터를 서버로 보내줍니다.

const onSubmit = async (event) => {
      event.preventDefault();
      if (form.e_personal_info) {
        try {
          await setDoc(doc(fireStoreDb, "mainPage", "estimate"), form);
        } catch (error) {
          console.log(error.message);
        }
      } else {
        alert("개인정보 취급에 동의하셔야 견적을 신청할 수 있습니다.");
      }
    };

데이터 추가 완료

 

---

 

 

참고자료

🔗 - https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ko