[002] 파이어베이스 (Firebase) - Realtime Database Read (데이터 불러오기)
2022. 12. 22. 17:29ㆍ데이터베이스/Firebase
반응형
안녕하세요~ 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 데이터베이스에서 데이터를 불러오는 방법에 대해 살펴보았고 다음 시간에는 이 데이터를 업데이트하는 방법에 대해 알아보겠습니다. 감사합니다.
반응형
'데이터베이스 > Firebase' 카테고리의 다른 글
| [004] 파이어베이스 (Firebase) - Realtime Database delete (데이터 삭제) (0) | 2023.01.08 |
|---|---|
| [003] 파이어베이스 (Firebase) - Realtime Database update (데이터 업데이트) (0) | 2022.12.23 |
| [001] 파이어베이스 (Firebase) - Realtime Database 개요 및 연동, 데이터 삽입(insert) (0) | 2022.12.21 |