Express를 사용해보겠습니다. 근데 이제 Firebase를 곁들인...
시작하기 전에 간단히 Firebase에 대한 설명을 하겠습니다. Firebase는 서버리스 앱을 만들 수 있도록 하는 플랫폼 같은 겁니다. 기존에 웹 앱이나 홈페이지를 만드려면 서버가 필요했습니다. 백엔드 서버가 존재함으로써 홈페이지가 회원가입, 데이터 저장 / 불러오기 등의 기능을 수행할 수 있었습니다. 그런데 이렇게 되면 작은 규모의 프로젝트도 모두 서버를 관리해야 한다는 불편함이 따라옵니다. Firebase는 DB, 인증 등 백엔드 서버가 했던 일들을 모두 구글 서버에서 처리할 수 있도록 이 모든 기능을 api 형태로 제공해버립니다. 이에 따라, React같은 프레임워크로 프론트엔드만 깔끔하게 잘 짜도 쓸만한 웹 앱을 만들 수 있게 됩니다.
Firebase Database은 당신의 서비스에 큰 도움이 됩니다.
이 프로젝트에서는 Firebase에서 제공하는 다양한 백엔드 기능 중 NoSQL기반의 Realtime Database를 사용합니다. Firebase Realtime Database를 선택한데는 몇 가지 이유가 있습니다.
1. 초기 서비스에서 DB에 많은 신경을 쓰지 않아도 되게 해 줍니다. 서비스가 궤도에 오르기 전에는 우선 DB가 적당히 잘 작동만 하게 하고 빠른 런칭에 더 신경써야 합니다. 결국 유저가 없으면 다 무용지물이기 때문입니다.
2. 간편하게 보안에 신경쓸 수 있습니다. 개인이 DB서버를 운영하기에는 리스크가 큽니다. Firebase 역시 완벽하지는 않겠지만, 일단 Firebase는 기업이 운영하는 서비스이다보니 개인이 운영하는 것 보다는 더 안정적입니다.
3. 웹에서 바로 모든 내용에 대해 CRUD가 가능합니다.
일단 Firebase를 설치해보겠습니다.
굳이 이 포스팅이 아니더라도, Firebase 홈페이지에 Documentation이 굉장히 잘 되어 있으니 다음 페이지를 한 번 참조해보시길 바랍니다. 앞으로 이어질 내용과 크게 다르지는 않습니다. 다만 여기서는 처음 시작하는 데 있어 좋은 길잡이가 되는 내용을 포함합니다.
자바스크립트 프로젝트에 Firebase 추가
이 가이드에서는 웹 앱에서 또는 최종 사용자의 액세스를 위한 클라이언트(예: Node.js 데스크톱 또는 IoT 애플리케이션에서)로 Firebase 자바스크립트 SDK를 사용하는 방법을 설명합니다. 권한이 있
firebase.google.com
일단 개발환경에 Firebase를 설치하겠습니다. 패키지 루트 폴더에서 터미널을 열고 npm i firebase를 입력해 설치합니다.
프로젝트 생성 후 , 프로젝트 설정에 들어가시면 위와 같이 방금 만든 firebase 웹 앱에 접근하기 위한 고유 키들을 확인할 수 있습니다. 이 값들을 어딘가에 잘 보관해 두세요. 이제 왼쪽 메뉴에서 Realtime Database에 들어갑니다.
DB의 기본은 CRUD(Create, Remove, Update, Delete).
Firebase 공식 문서에 보시면 DB를 어떻게 다뤄야 할지 친절히 알려줍니다만, 그걸 그대로 가져오면 이 포스팅이 그리 큰 가치를 가지지 못하기 때문에, 간단하게 정리해 드리겠습니다. Firebase Realtime Database의 특성을 몇 가지 요약하자면 다음과 같습니다. (NoSQL 과 공유되는 특성이 일부 있습니다. 이 점 유념하신다면 다음 내용 숙지에 도움이 됩니다.)
1. DB가 json형식을 따른다. key:data쌍으로 이루어져 있다. 또한, json이 그렇듯 data가 {key:{key:data}} 쌍으로 구성되기도 한다.
2. 고유 키라는 개념이 존재한다. 데이터를 추가할 때 하위 값으로 추가하거나 고유 키에 값을 추가할 수도 있다.
3. DB를 불러올 경우, SELECT처럼 한 번 데이터를 조회할 수도 있고, 백그라운드에서 대기하다 DB 데이터에 변화가 생기면 그 때 또 받아올 수도 있다. 이게 Realtime Database의 주요 특징이다. 예를 들어, 인스타그램에서 좋아요가 실시간으로 올라가는 걸 확인할 수 있는데, Realtime Database는 이런 용도로 사용하는데 제격이다.
4. 데이터 쿼리 방식이 =, > ,< 등의 방식과 느낌이 조금 다르다. 원하는 데이터 하나만 찾기가 조금 어렵다.
이 정도만 숙지하시고 Realtime Database에 접근하면 한결 가벼운 마음으로 접근할 수 있을 것 같습니다.
Express에서 Firebase Realtime Database 사용하기
기본적인 설치 절차는 위에서 다 진행했으니 이제 Node.js Express 상에서 Firebase Realtime Database를 사용해보겠습니다. Firebase를 사용하기 위해 Node.js 코드에 다음의 내용을 추가해줍니다.
//app.js
var firebase = require("firebase");
require("dotenv").config();
var firebaseConfig = {
ßapiKey: process.env.FB_APIKEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DB_URL,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
};
////////firebase Initialization
firebase.initializeApp(firebaseConfig);firebaseConfig 배열 내부에 주어지는 값들이 모두 process.env.***형태로 되어 있는 것을 확인할 수 있습니다. 이는 require("dotenv").config(); 를 통해 config값을 불러오는 형태로 사용하기 위함입니다. npm i dotenv를 통해 dotenv를 설치하시고, 각자 만든 프로젝트에서 발급받은 ApiKey를 *부분에 입력후 다음의 내용을 .env라는 이름으로 프로젝트 루트에 저장하세요.
//.env *** 이 파일을 복붙해서 사용하되, 주석을 모두 제거해야 합니다!!
FB_APIKEY = *
AUTH_DOMAIN = *
DB_URL = * //DB_URL은 Realtime Database 메뉴 들어갔을 때 화면에 나오는 db 주소를 입력합니다.
// https://***.firebaseio.com 형태입니다.
PROJECT_ID = *
STORAGE_BUCKET = *
MESSAGING_SENDER_ID = *
APP_ID = *이렇게 되면 Firebase를 사용할 준비가 모두 끝납니다. 이제 데이터를 추가하는 법을 확인해보겠습니다. Firebase Realtime Database에서는 Update와 Push로 데이터를 추가합니다. 두 가지는 성격이 약간 다릅니다.
Update : 값을 추가하고자 하는 위치에서 데이터를 추가합니다. 데이터를 추가하고자 하는 위치에 이미 있다면, 새로운 데이터로 교체합니다.
Push : 원하는 위치에서 값을 추가합니다. 추가할 값에 대해 키가 랜덤하게 생성됩니다. 이게 push의 핵심입니다.
Realtime Database 데이터 추가하기
firebase.database().ref("approved_users/").update({key:"data"});firebase.database().ref("approved_users/").push({
key: "data",
});Update는 추가+ 교체의 역할을 한다면, Push는 무조건 추가만 합니다. 위의 내용을 실행하면 다음과 같이 데이터가 추가됩니다.
Realtime Database 데이터 읽기
firebase.database().ref("approved_users")
.orderByChild("key")// key이라는 key 중에서 원하는 조건에 있는 data를 찾으려 합니다.
.equalTo("data") // data라는 값을 가지고 있는지 확인합니다
.once("value", (snapshot) => { // once, 한 번 수행하고 끝납니다. on인 경우 계속 대기하면서 데이터가 추가 될 때마다 아래 내용을 반복합니다.
if (snapshot.val() !== null) {
// add something to do.
console.log(snapshot.val());
} else{
console.log("we've found nothing!");
}});
데이터를 추가 했으면 읽을수도 있어야 합니다. 앞 내용보다 조금은 복잡하지만 구문이 충분히 알아볼 수 있을 정도니 주석에 간단히 설명 남겨 놓았습니다.
Done!
이정도만 사용하신다면, 기본적인 사용은 끝났습니다. 심도깊은 내용을 알고 싶으시다면 링크되어 있는 Firebase Documentation을 참조하시면 됩니다. 이 포스팅의 내용과는 크게 다르지 않으며, 지속적으로 유지보수가 된다는 장점이 있으니 Firebase를 잘 사용하기 위해 한 번쯤은 들러 볼 가치가 있습니다. 다음 포스팅에서는 Firebase와 연동해서 실제로 로그인하는 방법에 대해 다루겠습니다.
긴 글 읽어주셔서 감사합니다. ❤️ 와 광고클릭은 큰 힘이 됩니다.
