뜨거운 기반... Firebase 🔥

Firebase란 무엇인가?

모바일 앱 또는 웹 앱, 게임에 대한 개발 플랫폼입니다. 쉽게 말해서 앱을 만들기 위한 도구인 셈이죠.

웹 앱 개발을 예를 들면, 보통 클라이언트와 서버, 데이터베이스(3-tier architecture)로 앱을 개발하는데 특히 서버에서 개발하는 인증이나 데이터베이스, API 등을 파이어베이스를 이용해서 손쉽게 만들 수 있습니다.(사실 이미 만들어져 있는데 가져다 쓰는거죠!)

전통적으로는 클라이언트에서 서버에 요청을 보내 서버에서 그에 맞는 데이터를 데이터베이스에서 찾아 보내주는 방식이지만, Firebase를 사용하면 클라이언트에서 요구한 데이터를 백엔드의 작업을 건너뛰고 바로 클라이언트로 받아올 수 있는 것이죠.

그래서 보통 Firebase를 서버리스(serverless)라고 부릅니다.

 

그리고 Firebase는 클라우드, 인증, 데이터베이스, 호스팅, 분석 등 다양한 기능을 제공합니다. 또한 앞서 말씀드렸듯이 웹 뿐만 아니라 모바일, 게임 등 다양한 기반에서 구축할 수 있습니다.

 

그러면 왜 Firebase를 만들었을까?

원래는 Firebase를 만들기 전, Envolve라는 스타트업에서 온라인 채팅 기능을 웹사이트에 연동하는 API를 제공하였다고 합니다.

하지만 API를 사용하는 개발자들이 채팅 기능이 아닌 앱 데이터(사용자 정보 등)를 전달하는데 사용하고 있음을 알아채고, 채팅 시스템과 실시간 아키텍처(데이터를 실시간으로 다루는 시스템 구조)를 분리하여 Firebase를 만듭니다.

https://ko.wikipedia.org/wiki/%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4

파이어베이스 - 위키백과, 우리 모두의 백과사전

 

왜 사용할까?

가장 큰 이유는 아무래도 획기적으로 단축된 개발 시간이 아닐까 싶습니다. 0부터 100까지 만들어야 하는 것보다 99에서 100을 만드는 것이 훨씬 쉽고 시간도 훨씬 적게 드니까요.(너무나 당연한 소리를 해서 죄송합니다.)

또한 Firebase의 모든 기능을 다 사용하는 것이 필요한 기능만 골라 사용할 수 있다는 장점 때문도 있는 것 같습니다. 저 같은 경우는 DB만 필요해서 Firestore를 사용하고 있으니까요.

또 Firebase의 콘솔을 이용해서 DB를 보는데 해당 콘솔을 배우는 러닝커브가 적고, 사용성이 좋아서 사용합니다.

 

Firebase의 Firestore는 어떻게 동작하는가?

왜 수많은 Firebase의 기능 중 Firestore의 동작원리를 선택했느냐고 물어보신다면 슬쩍 앞에서 얘기했지만 현재 진행하고 있는 프로젝트에서 Firestore를 사용하고 있기 때문입니다.

 

먼저 Firestore는 크게 세 가지로 분류할 수 있습니다.

1. 컬렉션(collection)
2. 문서(document)
3. 필드(field)

 

Firestore는 NoSQL 데이터 모델에 따라 값에 매핑되는 필드를 포함하는 문서에 데이터가 저장됩니다.(저는 JSON 형태의 데이터 모델을 사용하고 있습니다만 더 복잡한 데이터 구조도 지원한다고 합니다!)

이러한 문서는 데이터 정리와 쿼리에 사용할 수 있는 문서 컨테이너인 컬렉션에 저장되고요. 필요 시 문서에 하위 컬렉션을 만들어서 확장할 수도 있습니다.

 

또 유연한 표현형 쿼리를 지원하기 때문에 정렬, 필터링 등 제한을 추가해서 결과를 페이지화할 수 있고, 실시간 리스너를 추가하여 앱 데이터를 최신 상태로 유지할 수도 있습니다.

 

Firestore와 Express 서버를 연동해보자!

먼저 연동하기 전, Firebase 사이트에 들어가 가입 또는 로그인을 하고 시작하기를 누른 다음 프로젝트 추가 눌러 프로젝트를 만들어줍니다.

https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

 

프로젝트를 만들었으면 빌드에서 Firestore Database를 찾아 데이터베이스를 만들어 줍니다.

그 다음 테스트 모드와 프로덕션 모드를 고를 수 있는데 저는 빠른 설정을 위해서 일단은 테스트 모드로 시작했습니다.

모드는 추후 변경이 가능합니다!

 

보안 규칙 설정 중 테스트 모드로 선택하면 빠른 설정으로 시작할 수 있습니다.

 

Firebase Admin SDK(소프트웨어 개발 키트)를 사용하기 위해선 비공개 키를 생성해야 하는데 프로젝트 설정에 들어가서 서비스 계정으로 들어가면 만들 수 있습니다.

톱니 바퀴 아이콘을 선택하면 프로젝트 설정에 들어갈 수 있습니다.

 

이제 프로젝트에 진행하고 있는 프로젝트에 Firebase를 설치해줍니다.

npm install firebase-admin --save

 

그리고 생성한 비공개 키(JSON 파일)를 프로젝트 폴더에 넣어주고 파일의 경로를 이용해서 설정을 해주어야 합니다.

파일 경로를 .env 파일에 아래와 같은 이름으로 저장하고 applicationDefault()를 호출하면 자동으로 환경 변수를 불러온다고 합니다...

GOOGLE_APPLICATION_CREDENTIALS

 

왜 합니다로 끝나냐면 위의 방법을 시도해 봤지만 무슨 이유에서인지 .env 파일에 저장한 환경 변수 값들을 못 읽는 이슈가 있어서 현재는 경로를 적어놓고, gitignore에 파일 이름을 올려두어 리포지토리에 올리는 건 방지하는 플랜으로 갔기 때문입니다...

추후 문제를 해결하고 어떤 점이 문제였는지, 또 어떻게 해결하였는지 작성하도록 하겠습니다. 🥲

 

이제 비공개 키까지 잘 넣고, gitignore에도 잘 올려두었다면 소스 코드를 작성해야 합니다.

// ...

import { cert, initializeApp, ServiceAccount } from 'firebase-admin/app';
import { getFirestore } from 'firebase-admin/firestore';
import serviceAccout from '../server/비공개_키_경로';

//! firebase 설정이 express 서버 보다 먼저 와야한다.
initializeApp({ credential: cert(serviceAccout as ServiceAccount) });

export const db = getFirestore();

// 테스트 코드
async function test() {
	db.collection("user").doc("dokite").set({
		name: 'dokite',
		age: 10000,
	})
}

test();

 

위와 같이 소스 코드를 작성하고 서버를 킨 다음 Firebase 콘솔에 가보면 데이터가 잘 들어가있는 걸 확인할 수 있습니다.

 

끝으로

Firebase에 대해 알아보았는데 탄생 배경부터 제가 사용하는 Firestore의 간단한 동작 원리까지 공부할 수 있어 유익한 시간이였습니다.

그리고 나중에는 웹 게임도 만드는 것 까지 도전해보고 싶네요!

추가로 현재는 간단하게 로그인 했을때 사용자 정보를 받아오고, 새로운 사용자 정보를 저장하는 회원가입까지 구현해봤는데 구현하면서 사용했던 메서드들과 규칙들도 흥미로워서 잘 정리해서 다음에 올리도록 하겠습니다!

긴 글 읽어주셔서 감사합니다. :)

 

참고

제가 위에 적어놓은 방법은 공식문서와 잘 정리 해주신 블로그 글을 참조했습니다. 아래 링크를 걸어두겠습니다 :)

 

https://firebase.google.com/docs/firestore/quickstart?hl=ko

Cloud Firestore 시작하기  |  Firebase

 

https://mangveloper.com/entry/Nodejs-Nodejs-%EB%A1%9C-Firestore%EC%97%90-%EC%A0%95%EB%B3%B4-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0Firebase-%EC%97%B0%EB%8F%99#google_vignette

[Nodejs] Nodejs 로 Firestore에 정보 저장하기(Firebase 연동)

 

https://velog.io/@tlsakch510/Next.js-FirebaseFirestore%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

Next.js Firebase(Firestore)연동하기

 

Firebase에 대해 더 자세히 알고싶으신 분은 아래 아티클을 참고하시면 좋을 것 같습니다!

https://blog.wishket.com/%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4firebase%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%8B%AC%EC%B8%B5-%ED%83%90/

파이어베이스(Firebase)란 무엇인가? 파이어베이스 심층 탐구 : 상편