[React] Firebase 활용하여 타이머 시간 저장(Create), 불러오기(Read)

결과

Firebase를 이용하여 타이머의 현재시간과 메모를 저장하고, 불러와서 타이머 밑에 출력해주고 있다.

---

Firebase

Firebase에 시간, 메모를 저장해서 불러와주었다.

우선은 타이머 시간과, 적은 내용, 작성된 시간을 저장해주고 있다.

Firebase (파이어베이스)란 무엇인가?

[용어 정리] Firebase (파이어베이스)란 무엇인가?

 

[ Create ] - 코드 길이가 길어서 해당 부분만 작성하였습니다.

// 생략

    const onSubmit = async (e) => {
        e.preventDefault();
        setHidden(true) // Modal창 숨김
        await dbService.collection('currentTime').add({
            saveTime,
            text: title,
            createdAt: Date.now(),
        })
        
// 생략

 

 

[ Read ]

// 생략

	const getDbTimes = async () => {
        const getDbTime = await dbService.collection("currentTime").get();
        getDbTime.forEach(document => {
            const timeObj = {
                ...document.data(),
                id: document.id,
            }
            setDbTime(prev => [timeObj, ...prev]);
        });
    };
    useEffect(() => {
        getDbTimes();
    }, []);

// 생략

  <div>
      {dbTime.map(time => <div key={time.id}>
          <h4>{`${time.saveTime}  ${time.text}`}</h4>
      </div>)}
  </div>
  
// 생략

 

[ DB ]

Firebase / Firestore에 들어가 보면 자동으로 저장되어 있는 것이 확인된다.

또한 실시간으로 저장이되므로 바로 확인이 가능하다.