커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
getdoc 정보가 뜨지 않아요
[왕초보] 웹개발 종합반 v0
3주차
북마크
남*빈
댓글
4
・
추천
0
・
조회수
16
조회수
16
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


firebase에 저장된 정보가 있는데 getDoc을 해도 콘솔창에 불러온 정보가 뜨지 않아요



스파르타 즉문즉답

firebase에 저장된 정보가 있어요

스파르타 즉문즉답

하지만 강의처럼 저장된 내용이 콘솔창에 내용이 뜨지 않아요

스파르타 즉문즉답

강의에서 원하던 결과


<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>나만의 추억앨범</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


	<style>
		@import url('https://fonts.googleapis.com/css2?family=Diphylleia&family=Gugi&family=Jua&display=swap');
		*{
			font-family: 'Diphylleia', serif;
		}
		.mytitle{
			height:250px;
			color:white;


			display:flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;


			background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
			background-position:center;
			background-size:cover;
		}
	.mytitle > button{
		width:150px;
		height:50px;
		background-color:transparent;
		color:white;
		border:1px solid white;
		border-radius:5px;
		margin-top:20px;
	}
	.mycards{
		width:1200px;
		margin: 30px auto 0px auto;
	}
	.mypostingbox{
		width:500px;
		margin: 30px auto 0px auto;
		padding:20px;
		box-shadow: 0px 0px 3px 0px blue;
		border-radius:5px;
	}
	.mybtn{
		display:flex;
		flex-direction: row;
		align-items:center;
		justify-content:center;
	}
	.mybtn > button{
		margin-right:5px;
	}
	</style>


</head>
<script type="module">


import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";




const firebaseConfig = {
  apiKey: "AIzaSyDRXs_l71t9Hi4Ta4LHY_3Nlsoq-W6uejo",
  authDomain: "sparta-cf3ef.firebaseapp.com",
  projectId: "sparta-cf3ef",
  storageBucket: "sparta-cf3ef.appspot.com",
  messagingSenderId: "331874953484",
  appId: "1:331874953484:web:3faf78051b4cf1f3c5c129",
  measurementId: "G-RBYNR6W9NM"
};






const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


	$("#postingbtn").click(async function () {
		let image=$('#image').val();
		let title=$('#title').val();
		let content=$('#content').val();
		let date=$('#date').val();


	    let doc = {
		'image':image, 'title':title, 'content':content, 'date':date
		};
	    await addDoc(collection(db, "albums"), doc);
	alert('저장 완료!');
	window.location.reload();
	})


	let url = "http://spartacodingclub.shop/sparta_api/seoulair";
	fetch(url).then(res => res.json()).then(data => {
   	 	let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
		$('#msg').text(mise);
	})


	$("#savebtn").click(async function () {
		$('#postingbox').toggle();
	})




	let docs = await getDocs(collection(db, "albums"));
	docs.forEach((doc) => {
	   	 let row = doc.data();
		 console.log(row);
	}); 




	function makeCard(){
		let image=$('#image').val();
		let title=$('#title').val();
		let content=$('#content').val();
		let date=$('#date').val();


		let temp_html=`<div class="col">
    <div class="card h-100">
      <img src="${image}" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">${title}</h5>
        <p class="card-text">${content}</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">${date}</small>
      </div>
    </div>
  </div> `;


		$('#card').append(temp_html);
	}
</script>


<body>
	<div class="mytitle">
		<h1>나만의 추억 앨범</h1>
		<p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p>
		<button id="savebtn">추억 저장하기</button>
	</div>


	<div class="mypostingbox" id="postingbox">
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="image" placeholder="앨범 이미지">
		<label for="floatingInput">앨범 이미지</label>
		</div>
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="title" placeholder="앨범 제목">
		<label for="floatingInput">앨범 제목</label>
		</div>
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="content" placeholder="앨범 내용">
		<label for="floatingInput">앨범 내용</label>
		</div>
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="date" placeholder="앨범 날짜">
		<label for="floatingInput">앨범 날짜</label>
		</div>
		<div class="mybtn">
			<button id = "postingbtn" type="button" class="btn btn-primary">기록하기</button>
			<button type="button" class="btn btn-outline-primary">닫기</button>
		</div>
	</div>


	<div class="mycards">
		<div id = "card" class="row row-cols-1 row-cols-md-4 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">앨범 제목</h5>
        <p class="card-text">앨범 내용</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">앨범 날짜</small>
      </div>
    </div>
  </div>
 <div class="col">
    <div class="card h-100">
      <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">앨범 제목</h5>
        <p class="card-text">앨범 내용</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">앨범 날짜</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">앨범 제목</h5>
        <p class="card-text">앨범 내용</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">앨범 날짜</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">앨범 제목</h5>
        <p class="card-text">앨범 내용</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">앨범 날짜</small>
      </div>
    </div>
  </div>
</div>
	</div>
</body>
</html>



취소
 공유
취소
댓글 0
댓글 알림
나의얼굴