배송대행 게시판을 만들어보고 싶은데, 그러려면 고객이 정보를 입력하면 내용을 저장하고,저장및 수정할 수 있어야하고,삭제도 할 수 있어야 한다.
백엔드 개발자와 협업하지 않고 CRUD를 구현할 수 있도록 도와주는 Firebase의 database를 사용하면 가능할 것 같았다.
🤿 인풋 태그 설정
실시간 데이터 베이스를 잘 연결할 수 있는지 테스트해보기 위해, 이렇게 간단한 인풋 태그를 만들었다. 각각 창의 텍스트 값을 가져올 수 있도록 useRef훅을 이용해 ref값을 설정해주었다.
<p>주문번호</p>
<input type="text" name="order_no"
className={styles.order_no_input}
ref={orderNoRef}/>
</box>
<box className={styles.brand_box}>
<p>브랜드</p>
<input type="text" name="brand_input"
className={styles.brand_input}
ref={brandRef}/>
</box>🤿 firebase 세팅하기
🧀 firebase 설치
npm install firebase를 설치하면 된다.
*여기서 사용한 버전은 firebase 7.20.0으로, 공식 문서에서 웹 버전 8에 해당하는 코드를 사용해 작성했다.
🧀 firebase 초기화 및 인스턴스 생성
firebaseApp으로 firebase를 초기화한 뒤 계정 정보를 담은 인스턴스를 생성해주었다.
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};
const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp;🧀 정보 암호화
깃허브에 커밋하면서 개인 api key등이 업로드되거나 외부에 공개되는 것을 방지하기 위해 .env파일을 별도로 생성해주었다. 변수를 지정해 정보를 담아준 뒤, process.env.으로 접근해 firebaseConfig를 정의할 때 사용할 수 있다.
REACT_APP_FIREBASE_API_KEY =
REACT_APP_FIREBASE_AUTH_DOMAIN =
REACT_APP_FIREBASE_DATABASE_URL =
REACT_APP_FIREBASE_PROJECT_ID =
REACT_APP_FIREBASE_STORAGE_BUCKET =
REACT_APP_FIREBASE_MESSAGING_SENDER_ID =
REACT_APP_FIREBASE_APP_ID =
REACT_APP_FIREBASE_MEASUREMENT_ID =gitignore에 .env를 작성해 중요 정보가 들어있는 .env는 깃허브에 업로드 되지 않도록 만들어준다.
#api keys
.env🤿 realtime database에 데이터 저장하기
🧀 공식문서 참고하기
문서에서는 데이터 검색의 기초와 함께 Firebase 데이터를 정렬 및 필터링하는 방법을 설명합니다.
Firebase 데이터를 검색하려면 firebase.database.Reference에 비동기 리스너를 연결합니다. 리스너는 데이터의 초기 상태가 확인될 때 한 번 트리거된 후 데이터가 변경될 때마다 다시 트리거됩니다.
기본 쓰기 작업
기본 쓰기 작업은 set() 코드를 사용하여 지정된 참조에 데이터를 저장하고 해당 경로의 기존 데이터를 모두 바꿉니다. 예를 들어 소셜 블로깅 애플리케이션에서는 다음과 같이 set()을 사용하여 사용자를 추가할 수 있습니다.
웹 버전 8
function writeUserData(userId, name, email, imageUrl) {
firebase.database().ref('users/' + userId).set({
username: name,
email: email,
profile_picture : imageUrl
});
}set()을 사용하면 지정된 위치에서 하위 노드를 포함한 데이터를 덮어씁니다.
해당 예제와 동일하게 작성해보자.
🧀 DB클래스, 데이터 저장 함수 정의
Database라는 클래스를 만들었다.
ref로 데이터를 저장시킬 경로를 만들어주는데, 단순하게 test라는 경로아래 저장되도록 지정했다. test 하위에 orderNo와 brand를 인자로 전달받아 저장해주도록 했다.
import firebase from 'firebase';
import firebaseApp from "./firebase";
class Database {
saveData(orderNo, brand) {
firebaseApp.database().ref(`test`).set({
orderNo : orderNo,
brand : brand,
});
}
}
export default Database;이 인자로 저장할 데이터를 전달해보자!
🧀 Database 클래스 인스턴스 생성
새로 생성한 database.js 파일에서 Database라는 클래스를 만들었다. 이 클래스는 datbase와 관련된 것들만 담아 놓은 틀이다.
import Database from './service/database';
const database = new Database();이 클래스 내부의 함수를 사용하기 위해서 index.js파일에서 인스턴스를 생성해준뒤 사용해야하는 컴포넌트로 해당 값을 prop으로 전달해준다.
<OrderStep1 database={database}/>
🧀 저장 버튼 클릭 이벤트 등록
사용할 컴포넌트에서 해당 prop을 전달받아온다.
각 인풋 창의 텍스트값을 받아온 다음, database의 saveData함수 인자로 전달해준다.
const getData =() => {
const orderNoVal = orderNoRef.current.value;
const brandVal = brandRef.current.value;
database.saveData(orderNoVal, brandVal)
}이렇게 정의한 getData함수를 제출버튼에 onClick함수로 지정해주었다.
🤿 데이터 저장여부 확인
이제 각 입력창에 작성한 텍스트 값이 버튼을 누르면 어떻게 데이터베이스에 저장되는지 확인해보자.
이렇게 글자를 입력했다.
firebase realtime database에 제대로 들어온것을 확인할 수 있다!
🤿 Realtime Datbase
실시간 데이터 베이스인만큼 실시간으로 데이터를 쓰고 지우고 업데이트할 수 있다는 장점이 있지만, 단점 또한 명확하다.
다음 포스팅에선 이 한계점에 대해 정리하고, 보완할 수 있는 Cloud Firestore database를 사용해보려한다.
Reference
