코드캠프 부트캠프 18일차

api만들기

그동안 graphql에서 query와 mutation을 사용하였다. 오늘은 각자 부여받은 포트번호를 활용하여 database에 연결하고 데이터를 직접 조회, 생성하는 법을 알아보자.

우선 apollo-server를 설치하여 요청에 24시간 대기하는 backend서버를 생성한다.

yarn add apollo-server

이후 server라는 변수를 만들고 Apolloserver를 새로 만들어준다.

연결이 성공되면 실행되는 부분 .then(() => {})에 server.listn({sever.listen({ port:ㅇㅇㅇㅇ})})를 입력하여 연결 성공시 서버를 실행시킨다. 통상적으로 backend서버는 4000번 혹은 8000번을 사용한다.

resolvers 안에 자신이 원하는 api를 작성한다.

작성 혹은 조회가 완료된 후에 실행하게끔 async await를 사용한다.

타입을 우리가 만들어 적용시켜서 사용하면 해당 값에 예상치 못한 값이 들어오는걸 방지할 수 있기 때문에 타입을 정해준다.

이후 주소창에 연결한 서버주소 localhost:4000 을 실행하여 apollo-server에 들어간 후에 양식에 맞추어 작성을 한다.

DBeaver를 통해 값이 잘 들어갔는지 확인한다.

Firebase

firebase는 backend개발자 없이 frontend개발자가 혼자서 backend서버를 구축하고 database를 관리하할 수 있게끔 도와주는 google에서 지원해주는 BAAS(Backend As A Service)이다. backend개발자가 하는 일 중 하나가 들어오는 데이터들이 안전한지 검증하는 역할이 있는데, firebase 홈페이지에 소스코드를 적어주어 검증을 할 수 있다.
작은사이즈의 프로젝트라면 firebase로도 충분하지만 사이즈가 커지고 무거워질수록 유지보수가 어려워지는 단점이 있다.

firebase 설치

yarn add firebase

파이어베이스를 설치한 이후에 파이어베이스의 프로젝트 설정 부분에 들어가면,

부분을 _app.tsx에 넣어준다.

이후 firebase를 사용하고자 하는 페이지에 import한다.

import {
  getFirestore,
  collection,
  addDoc,
  getDocs,
} from "firebase/firestore/lite";
import { firebaseApp } from "../_app";



export default function FirebasePage() {
  const onClickSubmit = async () => {
    // firebase에 한 줄 등록하기

    const board = collection(getFirestore(firebaseApp), "board");
    await addDoc(board, {
      writer: "철수",
      title: "제목이라구요",
      contents: "파이어베이스 너무 어렵당",
    });
  };
  const onClickFetch = async () => {
    // firebase에서 데이터 꺼내오기

    const board = collection(getFirestore(firebaseApp), "board");
    const result = await getDocs(board);
    const docs = result.docs.map((el) => el.data);
    console.log(docs);
  };
  return (
    <div>
      <h1>파이어베이스 연습 페이지입니다.</h1>
      <button onClick={onClickSubmit}>등록하기</button>
      <button onClick={onClickFetch}>조회하기</button>
    </div>
  );
}

getFirestore, collection, addDoc, getDocs를 firestore/lite에서 import 한다.

onClickSubmit 함수를 버튼에 등록하여 입력해 놓은 값을 버튼을 누르면 firebase의 Firestore Database에 board라는 collection이 생성되고 그 안에 입력한 값들이 들어가있는걸 확인할 수 있다.