🔥 자바스크립트로 firebase 사용하기

🪐 C:on·2021년 8월 25일

Firebase JavaScript

파이어베이스는 구글의 NoSQL이다.
MongoDB와 함께 문서형종류에 해당하는 데이터베이스이다.

NoSQL 종류

key-value
- 가장 기본적이지만 범위검색이 힘듬
column
- 키-값에서 확자외어 한 개의 컬럼에 여러개를 저장할 수 있음
Document
- Json, XML과 같은 형식을 사용
- Firebase, MongoDB
Graph
- 좀 더 유연한 그래프모델을 사용. 확장성 용이
- Neo4J, 알레그로그래프

파이어베이스 사이트에 예시와 함께 잘 설명되어 있어서 처음 접근하는 데에도 무리없이 사용할 수 있었다.

1. 프로젝트 만들기

1-1 파이어베이스 콘솔 집입

먼저 firebase console로 이동해서 로그인을 한다.

1-2 프로젝트 추가

이미지의 + 프로젝트 추가를 눌러서 프로젝트를 추가해준다.

프로젝트이름을 아무거나 입력 후 계속을 누른다.

나는 애널리틱스는 끄는게 더 편해서 껐다. 그리고 프로젝트 만들기를 누른다.

이렇게 프로젝트 생성이 끝나고 계속을 누르면 anything 프로젝트로 자동 이동된다.

2. RealTime Database

왼쪽 위 메뉴버튼을 누르면 왼쪽에서 네비바가 나온다.

여기서 Realtime Database에 들어가서 DB를 생성해줄 것이다.

데이터베이스만들기를 누른다.

어느나라든 상관없으니 아무거나 고르고 다음.

잠금모드로 시작하면 규칙에서 지정한대로만 읽기 쓰기 권한이 생기므로 일단은 테스트모드에서 시작한다. 테스트모드로 시작하면 30일동안은 누구든지 DB를 읽고 수정할 수 있도록 자동으로 규칙을 설정해준다.

이렇게 나오면 firebase realtime database가 완성

3. javascript에서 firebase 연동

3-1. 앱 생성해서 sdk 받기

프로젝트 설정으로 이동하고 밑으로 내려본다.

내 앱을 생성할 수 있는 곳이 나오는데 여기서 세번째 </> 모양의 버튼을 클릭한다.

역시나 앱이름은 아무거나 입력하고 생성을 눌러주면 다음과 같이 sdk가 발급된다.

이 코드는 일단 메모장에 복사해두자.

3-2. javascript에 코드 넣기

내 코드를 한번 보자. html요소나 css는 전혀없고 js로 firebase만 연동해서 데이터 하나를 업로드하는 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<!-- 
    내가 쓰고 싶은 html 작성
    ~~~
    ~~~
    ~~~ 
-->

    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-firestore.js"></script>

    <script>
        var firebaseConfig = {
              apiKey: "AIzaSyAIIZGCkttphgrE8yctlzZVTC5PSNAYlNw",
              authDomain: "anything-62931.firebaseapp.com",
              databaseURL: "https://anything-62931-default-rtdb.firebaseio.com",
              projectId: "anything-62931",
              storageBucket: "anything-62931.appspot.com",
              messagingSenderId: "617249461085",
              appId: "1:617249461085:web:db5612fe54b87eb42eceb4"
            };
       

        firebase.initializeApp(firebaseConfig);

        var database = firebase.database();
        
        function writeUserData(value) {
            firebase.database().ref('users/').set(value);
        }
        writeUserData("Hello~~")
    </script>

</body>
</html>

<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"></script> 이렇게 생긴 부분들은 firebase CDN이라서 이걸 넣어줘야만 firebase를 javascript에서 사용할 수 있다.

CDN 복사가 끝나면 var firebaseConfig 이 부분에 아까 복사해둔 SDK코드를 넣어주면 된다.

firebase.initializeApp(firebaseConfig); 이 코드는 정확한 의미는 모르지만 firebase로 코드를 짜기 시작할 때 선언해줘야 한다.

function writeUserData(value) {
            firebase.database().ref('users/').set(value);
        }

마지막으로 이 함수는 내가 만든 프로젝트에 user라는 문서를 참조해와서 그곳에 value를 집어넣겠다라는 함수이다.

따라서 writeUserData("Hello~~")이 코드가 동작되면 아까 만든 firebase realtime database에 user라는 문서가 생기고 hello~~ 라는 값이 들어가 있을 것이다.

이외에 값을 가져오거나, 쓰거나, 이벤트가 생겼을 때만 값을 가져오는 방법 등은 여기서 참고하면 된다.

팁으로 저 사이트 예제는 정말로 자기들이 만들어놓은 어떤 프로젝트의 코드를 복붙해온 것으로 보인다. 실제로는 없는 즉, 자기들이 만들어놓은 함수까지 복사해온 코드이기 때문에 무시해야 할 부분을 잘 예측해야지만 활용할 수 있다.

이 부분때문에 예시를 바로 적용해보지 못해서 팀원이 애를 좀 먹었다.

예를 들어 위 링크의 예시에 나오는 realtiem DB 이벤트 리스너 함수는 다음과 같다.

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});

근데 실제로 이벤트 리스너를 하기 위해서는 아래의 코드를 사용해야한다. 왜냐하면 postID는 내가 선언한 적도 없고 updateStarCount(postElement, data); 이것도 선언한 적이 없다.

예시를 이런 식으로 적어논건 너무 성의없어서 이 부분에선 많이 실망스러웠다.

var eventListner = firebase.database().ref('posts/');
eventListner.on('value', (snapshot) => {
  const data = snapshot.val();
  console.log(data)
});

startCountRef라는 이름도 자기들이 프로젝트를 만들면서 적절한 name을 넣은 거 같은데, 예제로 보여줄 거면 차라리 eventListner라고 쓰는게 더 적절한 이름인 거 같아서 이것도 바꿨다.

firebase의 post라는 문서를 참조하는 객체에 on함수를 사용해서 value에 변화가 생겼을 때를 캐치하라는 의미에서 'value'를 인자로 줬고, 변화는 snapshot으로 캐치를 하기 때문에 변화의 값은 snapshot.val()로 얻을 수 있게 된다.

🪐 C:on

이전 포스트

🔥 아두이노 (WemosD1) firebase 연동

다음 포스트

백엔드 중점 프로젝트

1개의 댓글

sirocube

2022년 3월 5일

좋은 글 감사합니다!

답글 달기