데이터베이스/Firebase

[002] 파이어베이스 (Firebase) - Realtime Database Read (데이터 불러오기)

Totally 개발자 2022. 12. 22. 17:29
반응형

안녕하세요~ totally 개발자입니다.

 

오늘은 Firebase Realtime에 저장된 데이터를 불러오는 방법에 대해 알아보겠습니다. 

 

 

저번 시간에 이렇게 students 데이터를 하나 Write(저장)했습니다. 이것을 웹사이트에 불러와서 출력해보도록 하겠습니다.

 

방법은 간단합니다. const database = firebase.database();를 먼저 선언해주고

아래처럼 database.ref를 사용하면 되며 value 값을 가져와서 snapshot에 있는 val()로 객체의 값을 가지고 올 수 있습니다. snapshot은 그 이벤트 시각에 지정된 데이터베이스의 위치에 있는 데이터를 포함하는 것으로서 val() 메소드를 사용해서 데이터를 가지고 올 수 있습니다.

database.ref("students").on("value", snapshot => {
      const object = snapshot.val();
      document.querySelector("#container").innerHTML = 
        object.full_name + ", " + object.grade + ", " + object.age;
  });

 

아래처럼 결과를 확인해볼 수 있습니다.

 

[전체 소스 코드]

<!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>
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid;
        }
    </style>
</head>
<body>
    <h1>Firebase EXAMPLE</h1><br />
    <div id="container"></div>
    <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>
      // Your web app's Firebase configuration
      const firebaseConfig = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "..."
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      
      // 데이터베이스 변수
      const database = firebase.database();
      
      // 데이터 불러오기
      database.ref("students").on("value", snapshot => {
          const object = snapshot.val();
          document.querySelector("#container").innerHTML = 
            object.full_name + ", " + object.grade + ", " + object.age;
      });
    </script>
</body>
</html>

오늘은 realtime 데이터베이스에서 데이터를 불러오는 방법에 대해 살펴보았고 다음 시간에는 이 데이터를 업데이트하는 방법에 대해 알아보겠습니다. 감사합니다.

반응형