firebase real-time database v9

 

이전에 만들었던 허접한 deeplink 테스트 페이지가 너무 오래 되었고, 여러가지 기능을 개편하고자 다시 만들어보려고 한다.

기능은 정말 없다.

firebase realtime database에 deeplink 관련된 아래의 정보를 저장해서 꺼내와 사용한다.

웹에서는 신규 링크를 저장 또는 삭제하며, 딥링크 가기 버튼을 누르면 딥링크를 url로 이동시킨다. 

 

단순히 deeplink 테스트 용으로 종류를 모아둔 사이트.

 

시작은 create-react-app으로 project를 생성한다.

npx create-react-app my-app

바로 npm run start를 하면 localhost:3000으로 아래와 같은 창이 출력된다.

이제 firebase 를 추가하는 작업을 진행한다.

 

https://firebase.google.com/ 에서 프로젝트를 생성한다.

Firebase

안내 가이드에 따라 프로젝트를 생성 완료한다.

 

프로젝트 개요 옆 설정을 선택하고, 프로젝트 설정으로 진입한다. 

그렇다면 위와 같은 페이지의 정보로 이동하면 project에서 사용할 config 값이 있다.

이 값들은 어디에 노출하지 않고 조심히 사용하도록 하자!

 

이제 다시 project 로 다시 돌아와 firebase 를 설치한다.

npm install firebase

 

 

그리고 firebase config를 저장할 firebase.js를 생성한다.

import firebase from 'firebase/compat/app';
import { getDatabase } from 'firebase/database';

const firebaseConfig = {
    apiKey: "blah",
    authDomain: "blah",
    databaseURL: "blah",
    projectId: "blah",
    storageBucket: "blah",
    messagingSenderId: "blah",
    appId: "blah",
    measurementId: "blah"
};

const app = firebase.initializeApp(firebaseConfig);
export const database = getDatabase(app);

firebaseConfig 값은 firebase 페이지에 있는 본인의 프로젝트 값을 사용하면 된다.

 

App.js로 이동해서 가져올 값을 설정한다.

import logo from './logo.svg';
import './App.css';
import {useEffect} from 'react';
import {ref, onValue} from 'firebase/database';
import {database} from './firebase';

function App() {

    useEffect(() => {
        const query = ref(database, 'realtime 에 만들어 사용한 상위 이름');
        console.log(query, 'query')
        onValue(query, (snapshot) => {
            console.log(snapshot.val(), 'val')
        })
    });

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>``
            </header>
        </div>
    );
}

export default App;

firebase 버전이 9가 되면서 import 관련이 수정된거 같다.

 

자세한 내용은 아래를 참고

https://firebase.google.com/docs/database/web/start

자바스크립트에서 설치 및 설정  |  Firebase Documentation

앞으로 추가 제거 삭제를 해볼 예정