[ WIL ] 내일배움캠프 4주차

이번 주 깨달음

---

문제점

---

•  자바스크립트의 강의만 보고 Firebase에서 데이터를 가져오기, 올리기, 필터링 구현을 시작했는데 코드의 세부적인 부분을 이해하지 못해서 에러가 나도 해결하는 데까지 시간이 오래 걸렸다.

해결 방안

• 코드의 한 줄 한 줄 출력을 해보고 addDoc, getDoc 등 그저 이런 기능을 구현하는구나라고 생각하고 넘기지 말고 정확한 구현 기능을 조금 더 검색을 해보고 사용을 해야겠다.

 

 

 

문제점

---

• 메인 페이지 → 특정 신발 페이지 이동시 해당 정보를 가져오는 과정에서 모든 신발들을 가져왔다.

해결 방안

• 각 신발마다 이름이 달라서 신발의 이름을 기준으로 정보를 가져오기로 했다.
• 넘겨받은 신발 이름으로 dbService에서 같은 신발의 이름을 가진 정보를 출력하게 했다.

// 현재 넘겨 받은 신발의 이름
const currentTarget = !event ? shoesName : event.target.parentNode.children[0].alt;
// where절을 사용하여 DB에서 currentTarget이 가진 값과 같은 신발 찾기
const q = query(collection(dbService, 'shoesList'), where('shoesName', '==', currentTarget));
const querySnapShot = await getDocs(q);
querySnapShot.forEach((doc) => {
    const reviewsObj = {
      id: doc.id,
      ...doc.data(),
    };
    reviewObjList.push(reviewsObj);
  });

 

 

문제점

---

• 사진 업로드 시 버튼이 제대로 동작하지 않아 DB에 사진이 저장되지 않았다.
  • <label>의 for =””와 <input>의 id값이 달랐다.

해결 방안

• <label> 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있다.
• <input>의 id값을 <label>의 for과 같게 수정

<form method="post">
    <div class="button">
				<!-- label의 for과 input의 id를 같게 해주었다. -->
        <label for="imgInput">
           + 사진 올리기
        </label>
    </div>
    <input type="file" id="imgInput" name="imgInput" accept="image/*" onchange="imgFileUpload(event)">
</form>

 

 

문제점

---

• 에러 메시지: Cannot set properties of null (setting 'innerHTML')
• 모든 신발 리뷰 → 한 개의 리뷰 상세페이지로 이동 시 에러 발생하며 위의 메시지가 출력되고 빈 화면이 된다.

해결 방법

• HTML이 렌더링이 되지 않았는데 자바스크립트가 먼저 동작해서 에러가 뜬것이다.
• window.location.hash = '#review'로 먼저 리뷰 페이지로 이동한 뒤 HTML 태그를 렌더링 하는 receiveDataFromBoard() 함수를 실행했다. 

<a id="boardData" onclick="window.location.hash = '#review'; handleLocation();receiveDataFromBoard(event, '${encodeURI(JSON.stringify(cmtObj))}')">

 

 

회고

---

이번 한 주간 진행되었던 두 번째 프로젝트를 하면서 몸은 많이 피곤했지만 정말 많이 성장할 수 있었던 시간이 되었던 것 같다. 좋은 팀원들을 만나서 어려워도 같이 힘을 북돋아주면서 일주일을 달린 것 같다. 

이번 프로젝트가 끝나면 팀이 또 바뀌는데 너무 아쉽다... 하지만 이번 계기로 좋은 사람들을 알게 되어서 좋다. 각자 다른 팀이 되어도 열심히 임할 분들이고 나중에 우리가 더 많이 성장해서 또 함께 할 수 있는 기회가 있으면 좋겠다.