[Node.js_4기] Today_I_Learn : Project_2 (23/12/22)

목차

 

1. 문제

2. 시도

3. 결과

4. 배운점

 

1. 문제

 

firebase에서 버튼을 하나 누르면 그 번호를 id로 가지는 document를 받아오고 싶었다.
그러나, 버튼을 누르면 모든 데이터가 한번에 표시되었다.

 

2. 시도

 

튜터님께 질문해 보았다.

-> getDocs를 모든 document를 받아 순회했기 떄문에 발생한 문제로 보셨다.

let docs = await getDocs(collection(db, "team"));

        docs.forEach((doc) => {

            let row = doc.data();

            let image = row['image']

공식 문서를 참고하여 getDoc() 함수를 사용해야 함을 알게 되었고, 

자세한 사용법은 gpt에 질문해 보았다.

Certainly! If you want to fetch a document from Firestore based on its document ID, you can use the doc function to create a reference to that specific document. Here's how you can modify the code to achieve this:

javascriptCopy code

// ... // Async function to fetch and display data by document ID async function fetchDataById(documentId) { //가져오기 const docRef = doc(db, "team", documentId); const docSnap = await getDoc(docRef); if (docSnap.exists()) { let row = docSnap.data(); let image = row['image']; let name = row['name']; let content = row['content']; let homepage = row['homepage']; 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-name">${name}</h5> <p class="card-text">${content}</p> </div> <div class="card-footer"> <small class="text-body-secondary">${homepage}</small> </div> </div> </div>`; $(".desc-container").html(temp_html); } else { console.log("Document not found"); } } // ... //탭에 해당하는 paragraph를 출력시켜줌 for (let i = 0; i < button.length; i++) { button.eq(i).on('click', function () { tabDesc.removeClass('show'); tabDesc.eq(i).addClass('show'); // Assuming you have a unique document ID for each button, replace "your_document_id_here" with the actual document ID fetchDataById("your_document_id_here"); }); }

In this modification, the fetchDataById function now takes a documentId

(굉장히 불편하게 긁혀왔다.)

db에서 doc을 가져와서, 나타내는 부분을 함수로 만들고, 해당 함수를 for문 안에 넣어 버튼을 눌렀을 때 동작하게 하였습니다. 만, 해당 코드를 적용하였을 때 버튼을 눌러도 작동하지 않아 무엇이 문제인지는 모른체로 해당 방법을 폐기하였습니다.(이때 튜터님께 질문했으면 좋았겠다 생각된다.)

이후, 어짜피 인원이 4명으로 고정되어 있고, for를 1~4이하일 때 돌리는 방법으로 4가지 경우만 만들면 되니 for문에 달린 이런 저런 조건들을 싹 무시해버리고,  function 자체를 for문 안으로 돌려 db에서 id가 String(i)인 document를 찾아 data를 뽑아 표현해내는 코드를 작성하게 되었습니다.(결과에서 계속)

 

3. 결과

 

// Loop through ids 1 to 4

for (let i = 1; i <= 4; i++) {

  const dbdoc = doc(db, "team", String(i));

  const docSnap = await getDoc(dbdoc);

  if (docSnap.exists()) {

    let row = docSnap.data();

    let image = row['image'];

    let name = row['name'];

    let content = row['content'];

    let mbti = row['mbti'];

    let url = row['url'];

    let tmi = row['tmi'];

    let role = row['role'];

    let temp_html = `

      <div class="col">

        <div class="card h-100">

            <img src="${image}" class="card-img-top" alt="image">

          <div class="card-body">

            <h5 class="card-name">이름 : ${name}</h5>

            <p class="card-text">역할 : ${role}</p>

            <p class="card-text">mbti : ${mbti}</p>

            <p class="card-text">comment : ${content}</p>

            <p class="card-text">tmi : ${tmi}</p>

          </div>

          <div class="card-footer">

            <a href="${url}" target='_blank'><small class="text-body-secondary">${url}</small>

          </div>

        </div>

      </div>`;

    // Use the specific id to append to the corresponding element

    $(`#${i}`).append(temp_html);

  } else {

    console.log(`No such document for id ${i}!`);

  }

}

해당 코드를 구동한 결과, 버튼 하나에 하나의 document가 출력되는 것을 확인할 수 있었고, 

조장님이 적용한 css까지 추가한 결과 다음과 같은 형태로 구현되었습니다. 

버튼을 누르면, 박스가 생기고, 다시 누르면 박스 사라지며, 다른 버튼을 눌렀을때, 열려있던 박스 사라지며 박스가 생긴다.

 

4. 배운점

 

공식문서를 보고, 구글에 영어로 검색(튜터님이 알려준 구글링 꿀팁)하면서 몇가지 예시를 보며 gpt를 사용해 코드를 짰습니다.

먼저, db를 다룰때 initialization과 프런트와 백 사이의 단어 일치, 명명 규칙의 중요함을 느낄 수 있는 순간이 있었습니다.
id와 class명을 설정할 때 _가 아닌 -로 구분된 명칭들을 복사하거나 검색할 때 하나의 단어로 포함되는지, 안되는지에 따라 오류가 나기도 했으며 백에서 설정한 이름이 의미를 제대로 전달하지 못해 추가로 설명을 해야 하기도 했습니다.
또한 git을 사용한 협업 도중 문제가 발생해 한번 진행을 되돌리고 해결도 해보았습니다. git을 사용한 시행착오를 겪으며 좀 더 git의 사용에 익숙해졌다 느낄 수 있었습니다.

 

끝으로, 기능적인 구현은 얼추 마무리 되었지만 사진과 글의 위치, 크기를 조절할 필요가 있어 보이고,

빈 공간을 채우기 위해, db내부의 데이터를 클라이언트에서 수정하는 것을 구현해볼 계획입니다.

 

 

 

 

 

 

 

+++ 사족 +++

시간은 느리게 가는데 하루는 정말 짧다.

git은 여전히 익숙하지 못하다. 계속해서 배워나가는 과정...