2023.12.22 기록 (firebase 관련)

미니프로젝트를 진행하면서 firebase를 통해 데이터를 연동하는 작업을 맡게 되었다.

    let docs = await getDocs(collection(db, "Profile"));
      docs.forEach((doc) => {
        let row = doc.data();
        
        let image = row['image'];
        let name = row['name'];
        let MBTI = row['MBTI'];

        let temp_html = `
        <div class="col" id="storyCard1">
            <div class="card">
              <a href="storyCard1.html">
                <img src="${image}" class="card-img-top" alt="이미지를 누르면 연결됩니다.">
              </a>
              <div class="card-body">
                <h5 class="card-title">${name}</h5>
                <p class="card-text">${MBTI}</p>
              </div>
            </div>
          </div> `;
        $('#card').append(temp_html);
      
      });

 

첫 번째 구현한 페이지의 코드는 다음과 같았고, DB에는 사진을 직접 넣지 않고  storage에서 요청하는 링크를 삽입하는 방식으로 진행할 예정이다.

 

총 5개 현재 하드코딩이 되어있는데 그 부분을 DB에서 받아오는 형식으로 짧게 줄이려고한다.

 

문제는 여기서부터 시작됐다.

 

$('#makeComment').click(async function () {
	let title = $('#title').val();
	let Password = $('#Password').val();
	// let comment = $('#comment').val();
	let comments =  [{name: "kim", pw: "1234", content: "안녕하세요"}, {name: "park", pw: "2222", content: "반갑습니다"}]

	//map / keyword: html for 문 


let temp_html = `
    <div class="col">
       <div class="card border-info mb-3" style="max-width: 18rem">
           <div class="card-body">
             <h5 class="card-title">${title}</h5>
             <p class="card-text">${comment}</p>
             <button type="button" class="btn btn-outline-warning">수정</button>
             <button type="button" class="btn btn-outline-danger delete-btn">삭제</button>
           </div>
       </div>
    </div>`;
$('#card').append(temp_html);

await addDoc(collection(db, "profile"), doc);
  alert('저장 완료!');
  window.location.reload();

 

DB를 불러오기 위해, map과  for문을 조금 더 자세히 다뤄보기로 하였다. 

firebase를 이틀 째 잡고 있는데 궁금한게 점점 더 늘어가는 느낌이다.