[TIL] #22. 231005

어제 목표 & 오늘 완료한 한 일 

• 알고리즘 문제
• 웹개발 A to Z 응용
  • 리뷰 삭제 기능 구현
• 내배캠 Chap1 팀프로젝트
  • 검색 기능 코드 수정
  • 목표 & 달성도 기능 구현
• 뉴스레터 읽기

 
내일 목표

• 알고리즘 문제
• 웹개발 A to Z 응용
  • 리뷰 수정 기능 구현
• 내배캠 Chap1 팀프로젝트
• 뉴스레터 읽기

 

구현 내용

리뷰 삭제

 

발생한 문제와 해결

let querySnapshot = await getDocs(q);
querySnapshot.forEach(async (data) => {
    await deleteDoc(doc(db, "reviews", data));
})

코드를 이와 같이 작성하여

Uncaught (in promise) TypeError: n.indexOf is not a function

이러한 오류가 발생했었는데 data 뒤에 .id를 붙여주니 해결되었다. 

// doc.data() is never undefined for query doc snapshots

주석이 이처럼 적혀있는 것을 보고 콘솔창에 data.data()를 찍어봤는데 콘솔창에 데이터 결과가 잘 나타난 것을 확인한 뒤, 해당 데이터의 id를 가져오기 위해 data.id를 하여 해당 id를 가지고 있는 데이터를 삭제한 것이다.

 

느낀점

'공배수' 알고리즘 문제를 보고 처음에는 n이 m의 배수일 때를 생각하지 못하고 풀었다. 다른 사람의 풀이를 봤는데 number를 n과 m의 곱으로 나누었을 때 나머지가 0인 경우만 생각하였지 각각의 나머지가 모두 0일 때는 생각하지 못하였다. 그래서 처음에 틀렸던 것이다.. 문제 풀 때 생각을 더 깊이 해볼 필요가 있을 것 같다는 생각이 다시 한 번 들었다.

 

어제는 검색 기능을 구현할 때 수정에 용이한 코드를 작성하기 위해 DB와 데이터를 주고 받게끔 코드를 작성하였다. 그런에 어제 작성한 코드를 다시 보며 해당 부분에 대해서는 코드를 수정할 필요가 없을 것 같다는 생각이 들었다. 그래서 코드 유지보수성은 떨어지지만 DB와 데이터를 주고 받을 필요가 없는 방법을 선택하여 코드를 수정했다.

그리고 목표 & 달성도 부분이 생각보다 복잡하여 다른 팀원분과 같이 진행하게 되었다. DB 데이터 수정하는 부분이 어려울 것이라고 생각했는데 지브리 영화 사이트에서 구현했던 삭제기능과 크게 다른 점이 없어 수월하게 할 수 있었다. 오히려 예상치 못한 부분에서 막혔었다. 그건 바로 데이터의 결과에 따라 체크박스를 체크, 해제하는 것이었다. 열심히 서치를 하여 해당 블로그(https://ohhand.tistory.com/36)를 보고 문제를 해결할 수 있었다.

reload() 메서드의 위치에 따라 결과가 다르게 나왔던 이유가 반복문 밖에 있을 때는 비동기 호출로 인해 코드 순서 상관없이 완료되지만, 반복문 안에 있으면 코드를 순차적으로 실행하기 때문이라는 것을 이번 기회에 확실하게 알게 된 것 같아 좋다.

그리고 중복되는 코드를 새 파일로 옮겨 코드 수정에 용이하게끔 하고자 했지만 .load()를 하니 cors error가 발생해서 아직 코드를 분리하지 못한 상태이다.

 

지브리 영화 사이트를 구현에 관련해서 어제 해결되지 않았던 리뷰 삭제 부분은 코드를 다시 처음부터 작성하는 것이 나을 것 같다고 판단이 되어 어제 자기 전, 파이어베이스 사이트의 데이터 삭제 부분(https://firebase.google.com/docs/firestore/query-data/get-data?hl=ko)을 꼼꼼하게 다시 읽어보고 잤다. 이를 토대로 코드를 다시 작성하니 문제가 해결되었다.