2024. 08. 05(팀 프로젝트 -3)

지난번에 localStorage를 사용해 버튼을 눌렀을 때 그 값이 저장되도록 하였다.

하지만 localStoraged의 경우 내 컴퓨터의 웹브라우저내에서 저장이 되기 때문에 다른 컴퓨터를 사용하여 클릭한 값들은 불러올 수가 없다..

결국 다른 사람들의 영화에 대한 반응을 볼 수 없는 것이다.

그래서 난 사전캠프때 들어뒀었던 firebase를 사용하여 그 수를 저장하고, 불러와야겠다 생각했다.

 

firebase에는 신기하게 숫자값을 늘리는 함수가 이미 있었는데

import { doc, updateDoc, increment } from "firebase/firestore";
const washingtonRef = doc(db, "cities", "DC");
// Atomically increment the population of the city by 50.
await updateDoc(washingtonRef, { population: increment(50)});

위사항에 채워넣기만하면 50씩 숫자를 증가시킬 수가 있다.

"cities"에는 내가 미리 만들어 둔 문서의 이름을 "DC"에는 그 안의 파일이름을 넣으면 된다.

그리고 아래에 있는

await updateDoc(washingtonRef, { population: increment(50)});

함수를 사용하여 수를 증가시키면 되는데 나의 경우

클릭을 시행하였을 때 그 수를 늘려야하기 때문에 클릭을 해야한다는 조건을 밖에 씌워야했다.

async function happyClickCounter()
{ cnt1 += 1; spanHappy.innerText = `happy Click: ${cnt1}`;
console.log(cnt1);
await updateDoc(washingtonRef, { happy: increment(50) });

-> ClickCounter로 클릭한 횟수를 도출해내어 몇번 클릭을 했는지 페이지에 나타나도록 하였고, 파이어베이스에 happy:클릭한 횟수(1회당 50씩 증가)로 저장되도록 하였다.