커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
firestore database에 addDoc 컬렉션이 추가되지 않는 문제
[왕초보] 웹개발 종합반 v0
4주차
북마크
홍*영
댓글
7
・
추천
0
・
조회수
19
조회수
19
답변 완료

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

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


firestore database에 addDoc 컬렉션이 추가되지 않습니다.

강의 그대로 따라했고 강의대로라면 default가 뜨는 곳에 albums가 떠야하는데 뜨지 않습니다.




스파르타 즉문즉답




작성한 코드 및 에러 메세지

스파르타 즉문즉답
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<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>
*{
    
    font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;

    }
    .head{
        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;
        color: white;
        text-align: center;
        align-items: center;
        height: 250px;
        padding-top: 50px;
    }
    .head > button{
        height: 50px;
        width: 150px;
        background-color: transparent;
        color: white;
        border: 2px solid white;
        border-radius: 5px;
        margin-top: 10px;
        font-size: medium;
    }
    .mycard{
        width:1200px;
        margin: 50px auto 50px auto;
    }
    .mypostingbox{
        width: 500px;
        margin: 50px auto 0px auto;
        box-shadow: 0px 0px 3px 0px gray;
        padding: 20px;
    }
    .mybtn{
        width:200px;
        margin: 20px auto 0px auto;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
    }
</style>
<script type="module">
  // Firebase SDK 라이브러리 가져오기
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";


// Firebase 구성 정보 설정
const firebaseConfig = {
  apiKey: "AIzaSyC_efRS07MujEow50cvrI6AM_S2pz6iKCc",
  authDomain: "sparta-35722.firebaseapp.com",
  projectId: "sparta-35722",
  storageBucket: "sparta-35722.appspot.com",
  messagingSenderId: "284836500872",
  appId: "1:284836500872:web:69fc3912eb091633ad563d",
  measurementId: "G-PGRME0CMB3"
};

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

$("#postingbtn").click(async function () {
    let doc = {
      'name':'bob',
      'age':30
    };
    await addDoc(collection(db, "albums"), doc);
})

  $(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
   let mise=data['RealtimeCityAir']['row'][0]['IDEX_NM'];
    let temp_html=`
    <p>현재의 미세먼지 : ${mise}</p>
    `;
    $('#msg').text(mise);
})
})

  function openClose(){
    $('#postingbox').toggle()
  }
  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}" 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>
</head>
<body>
    <div class="head">
    <h1>나만의 추억 앨범</h1>
    <p>현재의 미세먼지 :<span id="msg"></span></p>
    <button onclick="openClose()">추억 저장하기</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 btn-sm">기록하기</button>
        <button type="button" class="btn btn-secondary btn-sm">취소</button>
      </div>
</div>
    <div class="mycard">
        <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
댓글 알림
나의얼굴