[혼프] 혼자하는 프로젝트 2. firebase store

이제 로그인을 했으니 초기 정보를 저장해야지~~

 

나에게 필요한 기본 정보는 간단하다.

유저 별 초기화 날짜와 월 식비!

 

일단 파이어베이스에 Firestore Database를 추가한다.

그 후에 작업 시작

 

일단 컬렉션은 users로 두고 문서의 ID는 유저의 uid를 사용해서 정보를 저장한다.

import React, { useState } from "react";
import { doc, getDoc, setDoc } from "firebase/firestore";
import { firestore,fireAuth } from "firebase/clientApp";

interface InputForm {//input 
  initialDate: number;
  budget: number;
}

const Register = ()=>{
    const uid = fireAuth.currentUser!.uid; //무조건 로그인 한 후에 이 코드가 실행 될 것이니
    const [form, setForm] = useState<InputForm>({
        initialDate: 0,
        budget: 0,
    });	
    
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>)=>{
        const { name, value } = e.target;
        setForm({ ...form, [name]: value });
    }
    
    const handleSubmit = async () => {
        await setDoc(doc(firestore, "users", uid), {
              initialDate, // 초기날짜
              budget, //예산
            }).then((res) => console.log("res"));
    };

    return(
    	<>
            <input name="initialDate" value={initialDate} type="number" onChange={handleChange}/>
            <input name="budget" value={budget} type="number" onChange={handleChange}/>
            <button onClick={handleSubmit}> 저장하기 </button>
        </>
    )
}

 

//firebase/clientApp.ts
//파이어베이스 초기화

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { getFirestore } from "firebase/firestore";
import "firebase/compat/auth";
import firebaseConfig from "firebaseConfig.json"; //개인정보

const app = firebase.initializeApp(firebaseConfig);

const firestore = getFirestore(app);
const fireAuth = firebase.auth();

export { firestore, fireAuth };

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

Cloud Firestore에 데이터 추가  |  Firebase

공식문서에 잘 나와있어서 쉽게 적용할 수 있었다.

 

유저 정보 뿐 아니라, 게시글 역시 firestore를 이용해서 저장 할 것이다.