본문 바로가기
ETC

Firebase 데이터 저장하기

by Wilkyway 2021. 7. 30.
반응형
<!DOCTYPE html>
<html>
<head>
	<!-- jQuery  -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
파이어베이스 웹서버 입니다.

<div class="container mt-3">

</div>


<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-storage.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyCnowLA3wkZzoSX9kFHdq615-ZhUvdNj60",
    authDomain: "wjdb-647dc.firebaseapp.com",
    databaseURL: "https://wjdb-647dc-default-rtdb.firebaseio.com",
    projectId: "wjdb-647dc",
    storageBucket: "wjdb-647dc.appspot.com",
    messagingSenderId: "241186966612",
    appId: "1:241186966612:web:9843c62bd2c76613ae71c1",
    measurementId: "G-8HX4QXCKBQ"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

<!-- <script src="app.js"></script> -->
<script>
  const db = firebase.firestore();

  // 읽기
  db.collection('product').get().then((res)=>{
    res.forEach((doc) => {
      console.log(doc.data())
      var template = `<div class="product">
            <div class="thumbnail" style="background-image: url('https://via.placeholder.com/350')"></div>
            <div class="flex-grow-1 p-4">
              <h5 class="title">${doc.data().제목}</h5>
              <p class="date">${Date()}</p>
              <p class="price">${doc.data().가격}</p>
              <p class="float-end">🤍0</p>
            </div>
          </div>`;
      $('.container').append(template);
    })
  })
</script>
</body>
</html>
반응형

'ETC' 카테고리의 다른 글

NSSM을 이용하여 Windows 에 Node 서비스 추가하기  (0) 2021.08.10
Firebase 이미지 저장하기(storage)  (1) 2021.07.30
Firebase 구글 인증하기  (0) 2021.07.29
Firebase API 만들기  (0) 2021.07.27
Vivaldi Browser 사용기  (0) 2021.07.02

댓글