2023.05.03 TIL

토깽이연구소 수석연구원·2023년 5월 3일

TIL 기타

TIL

목록 보기

23/37

오늘의 나는 무엇을 잘했을까?

투두리스트 UI을 거의 전부 완성하였다. 시간이 오래 걸리긴 했지만 공부했던 개념들을 실전에 적용시키면서 실용적인 공부를 한것 같다.

오늘의 나는 무엇을 배웠을까?

Firebase로 빠르게 데이터베이스 구축하기

Firebase 시작

Firebase에 회원가입, 로그인 후 프로젝트 생성
firebase sdk 추가(내 앱과 연동하는 과정)
1. npm install firebase
2. 적당한 폴더에 firebase.js(추천작명)파일을 만든다.
3. 다음 내용을 따라 파일에 추가 한다.

데이터베이스 사용하기 (firestore)

firebase 콘솔에서 firestore 데이터베이스 생성

firebase.js에서 다음과 같이 getFireStore를 import하고 getFireStore함수에 app을 넘겨 리턴값을 적당한 변수(firestore)에 저장하여 리턴한다.

import { initializeApp } from "firebase/app";
import { getFireStore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxxxx",
  projectId: "xxxxxxxxx",
  storageBucket: "xxxxxxxx",
  messagingSenderId: "xxxxxxxx",
  appId: "xxxxxxxx",
};

const app = initializeApp(firebaseConfig);
export const firestore = getFireStore(app);

입력폼으로 submit하여 firestore에 데이터 전송해보기

적당한 페이지에(리액트라면 app.js등) 입력 폼을 만든다.

function App() {
  const messageRef = useRef();

  const handleSave = async (e) => {
    e.preventDefault();
    console.log(messageRef.current.value);
  };

  return (
    <form onSubmit={handleSave}>
      <label for="data">Enter message</label>
      <input id="data" type="text" ref={messageRef} />
      <button type="submit">Save</button>
    </form>
  );
}

export default App;

firestore관련 메서드들을 import해온다.

import { firestore } from "./service/firebase";
import { addDoc, collection } from "firebase/firestore";

function App() {
  const messageRef = useRef();

  const handleSave = async (e) => {
    e.preventDefault();
    console.log(messageRef.current.value);
  };

  return (
    <form onSubmit={handleSave}>
      <label for="data">Enter message</label>
      <input id="data" type="text" ref={messageRef} />
      <button type="submit">Save</button>
    </form>
  );
}

export default App;

collection 메서드를 통해 firestore에 대한 특정 collection 레퍼런스를 가져온다.

collection은 firestore의 db 테이블과 같은것이라고 이해했다. 예를 들어 todo item 테이블에 아이템을 추가하고 싶으면 collection이름이 todo-item처럼 넣으면 된다. collection메서드는 이 테이블에 대한 레퍼런스를 가져오는 메서드인듯하다. collection을 추가한다.

import { firestore } from "./service/firebase";
import { addDoc, collection } from "@firebase/firestore";

function App() {
  const messageRef = useRef();
	***const ref = collection(firestore, "messages");***

  const handleSave = async (e) => {
    e.preventDefault();
    console.log(messageRef.current.value);
  };

  return (
    <form onSubmit={handleSave}>
      <label for="data">Enter message</label>
      <input id="data" type="text" ref={messageRef} />
      <button type="submit">Save</button>
    </form>
  );
}

export default App;

addDoc메서드를 사용하여 우리가 만든 collection에 대한 레퍼런스(ref)와 보낼 데이터를 인자로 각각 넘겨 호출한다.

addDoc(콜렉션에 대한 레퍼런스, 보낼 데이터);

const handleSave = async (e) => {
  e.preventDefault();
  console.log(messageRef.current.value);
  try {
    let data = {
      message: messageRef.current.value,
    };
    addDoc(ref, data);
  } catch (e) {
    console.error(e);
  }
};

데이터 조회하기
```
const handleGetData = async (e) => {
    const querySnapshot = await getDocs(ref);
    querySnapshot.forEach((doc) => {
      console.log(`${doc.id} => ${doc.data().message}`);
    });
  };
```
위와 같이 getDocs를 통해 해당 컬렉션의 모든 데이터를 가져올 수 있다.

collection안에 추가된 데이터들을 documents(문서)라고 부른다. 위 사진에서 document의 id가 두 번째 컬럼에 보이는 랜덤 제네레이션된 값이고, doc.id로 접근가능하다. 우리가 테스트한 message는 doc.data().message로 접근 가능하다.

Firebase로 인증(로그인, 회원가입) 구현하기

Firebase 콘솔에서 Authentication으로 들어가서 시작하기를 누른다.

firebase sdk를 추가한 곳에서 firebase 인증을 담당하는 auth객체를 getAuth메서드로 받아서 export해준다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
**import { getAuth } from "firebase/auth";**

const firebaseConfig = {
  apiKey: "xxxxxcxxxxxxxxxx",
  authDomain: "xxxxxxxxxx",
  projectId: "xxxxxxxx",
  storageBucket: "txxxxxxxx",
  messagingSenderId: "4xxxxxxx",
  appId: "xxxxxxxxx",
};

const app = initializeApp(firebaseConfig);
**export const firebaseAuth = getAuth(app);**
export const firestore = getFirestore(app);

인증 로직을 사용할 곳에 firebaseAuth객체를 불러와 사용한다. 아래 코드는 App.js(앱의 최상단)에서 onAuthStateChanged 라는 Auth관련 변경사항을 항상 감시하는 역할인 firebase에서 제공하는 함수를 useEffect에 등록해둔 예시와 로그인에 사용하는 예시이다.

**import { onAuthStateChanged } from "firebase/auth";**

useEffect(() => {
  **onAuthStateChanged**(firebaseAuth, async (user) => {
    if (user) {
      const q = query(
        collection(firestore, "users"),
        where("uid", "==", user.uid)
      );
      const querySnapshot = await getDocs(q);
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        setUserInfo({
          uid: data.uid,
          email: data.email,
          displayName: data.displayName,
          date_created: data.date_created,
        });
      });
      setIsLoggedIn(true);
    }
  });
}, []);

const handleSignin = async (e) => {
  e.preventDefault();
  await **signInWithEmailAndPassword**(firebaseAuth, input.email, input.password)
    .then(() => {
      navigate("/");
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.warn(`${errorCode} = ${errorMessage}`);
    });
};