Next.js Firebase(Firestore)연동하기

JangGwon·2023년 4월 2일

Firebase 란?

파이어베이스는 Serverless 서비스로 서버를 직접 만들 필요없이 클라우드 기반의 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 다양한 서비스를 제공하며 Next.js에서 이러한 서비스를 쉽게 사용할 수 있다!

즉, 백엔드를 구현하지 않고 조그만한 토이프로젝트 진행할 때나, 프로토타입을 테스트해보는 경우 유용하게 사용할 수 있다.

1. FireBase 설치

npm install --save firebase

2. FireBase 앱 연결하기

Firebase 프로젝트 만든 후 웹 앱 연결하기 버튼을 누르고 앱 닉네임을 입력합니다.

앱 닉네임을 입력하고 등록하면 파이어베이스 SDK가 나오는데 firebaseConfig 변수를 복사합니다.

프로젝트 폴더 최상단에 firebase 폴더를 만들고 그안에 또 firebasedb.js 파일을 만들어 위에서 복사했던 코드를 붙여넣기 해주고 불필요한 코드를 제거 해줍니다.

하지만 이대로 깃헙이나 깃랩의 공개 원격 저장소에 푸시해버리면 api키가 그대로 노출되어 문제가 생길확률이 매우 크다

3 .env 파일 만들어서 firebaseAPi키 값 보호하기

.ENV 란 ?

개발과정에서 사용되는 포트, DB관련 정보, API_KEY 등 민감한 정보들을 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈 이다. 만약 민감한 정보들이 깃허브같이 오픈소스에 공개될 경우엔 해킹을 당할 위험이 있기 때문에 dotenv 환경변수 파일을 외부에 만들어 관리하며 소스코드 내에 하드코딩하지 않고 사용 할 수 있다.

.env 사용하기

프로젝트 루트에 .env파일을 만들고 그 안에 환경 변수들을 선언해준다.
참고로 next.js에서는 "NEXT_PUBLIC_"으로 시작하는 환경변수들만 인식하기 때문에 변수 이름 앞에 꼭 "NEXT_PUBLIC_"를 붙여줘야한다

firebasedb.js가서 파이어베이스 api 키값을 수정해야한다. nextjs에서 환경변수에 접근하려면, process.env.로 접근해야하기 때문에, 기존 키 값을 process.env.{환경변수명} 형식으로 변경해주면된다.

4. Firestore 연결하기

Firebase 콘솔페이지에서 CloudeFirestore 데이터베이스 만들기 버튼을 눌러 firestore를 등록해준다.

그 다음 Database(Firestore) 들어가면 기본적으로 모든 읽기와 쓰기 허용이 잠금되어있는데, 규칙란에 들어가 규칙을 아래와 같이 수정해주면, 모든 읽기 쓰기가 가능합니다.

	allow read, write: if false   // -> allow read, write: if true

위 규칙 수정 외에도 다른 유연한 Firebase 보안 규칙을 사용하면 전체 데이터베이스에 대한 모든 쓰기 작업부터 특정 문서에 대한 작업까지 어떠한 상황에 맞는 규칙이라도 작성할 수 있습니다.

규칙 수정 후 firestore.js를 만들고 다음과 같은 코드를 작성만해주면 끝

5. firestore 정상작동 확인해보기

firestore가 정상적으로 연결되었는지 확인해보기위해 addDoc을 이용한 데이터 추가 예시 코드를 작성해봤습니다.

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

export default function Home() {

  const [value, setValue] = useState();

  const onClickUpLoadButton = async () => {
   	//    addDoc(collection(db       , "컬렉션이름") , { 추가할 데이터 }
    await addDoc(collection(firestore, `temp`),
      {
        value,
      })
  }

  return (
    <div>
      <form onSubmit={(event) => event.preventDefault()}>
        <input onChange={(event) => setValue(event.target.value)} />
        <button onClick={onClickUpLoadButton}>전송</button>
      </form>
    </div>
  )
}