[TIL] 221020

🔥 오늘 한 일

• StudyHaza 플젝
  • Main page의 StudyCard 클릭시 Detail page로 연결
  • Detail page - layout css 수정
• 프로그래머스 Lv.0 4문제 완료
• Udemy React Section7-8(리액트 앱 디버깅, 연습 플젝) 학습
• Udemy JS 알고리즘&자료구조 Section4(문제 해결 패턴) 학습
• JS Deep Dive Chapter7(연산자) 읽고 정리

🚨 Error Handling

상세페이지로 이동하도록 구현하는 과정에서 어제처럼 doc.id가 말썽..🥲
상세페이지에선 doc.id로 어제 다 구현해놨는데 메인페이지에서 받아오는 데이터엔 doc.id가 따로 존재 하지 않고 필드 내의 id만 있어서 상세페이지를 불러오지를 못했다,,
App.js에서 모든 posts data를 불러오는 곳에서 doc.id도 함께 불러오게 하려고 몇시간동안 삽질했는데 이게 doc.id랑 필드 내용 data랑 어떻게 엮어서 처리할지 감이 안 잡혀서 포기하구 아래 방식으로 해결..

파이어베이스 문법은 생소해서 사용 방법 찾아보고 적용하는데 생각보다 시간을 많이 써버렸다,,

1. 글 등록시 필드 내 id를 전역으로 설정

2. 상세페이지로 navigate할 때 이 id로 params 넘겨주기!
   ⇒ 이러면 상세페이지 라우터 url은 /studyjoin/detail/${필드 내 id}

3. 상세페이지에서 firebase query, where 사용해서 해당 id와 같은 데이터 불러오기

   const getPosts = async () => {
       const q = query(collection(db, "posts"), where("id", "==", id));
   
       const querySnapshot = await getDocs(q);
       querySnapshot.forEach((doc) => {
         setData(doc.data());
       });
   };

[Firebase 공식문서] Cloud Firestore에서 단순 쿼리 및 복합 쿼리 실행 | Firebase

✍️ Diary

부트캠프 끝나고 이젠 하루종일 온전히 내 공부 시간 ⏰
계획 안하고 생활하면 뭣도 안하고 시간 호다닥 지나갈듯 하다,,
10월 내로 최대한 강의 듣는거 끝내고 학습할거 마무리 지을 수 있도록 노오력 💪

🚀 내일 할 일

• StudyHaza 플젝
  • Detail page 기술스택 아이콘 적용 및 디자인 수정
  • Detail page 글 삭제
  • Detail page 글 수정
• 프로그래머스 Lv.0 4문제 풀기
• Udemy React Section9(Portals & Refs)-10(Reducer & Context API) 학습
• Udemy JS 알고리즘&자료구조 Section5-6(문제해결패턴)
• JS Deep Dive Chapter8-10(제어문, 타입변환&단축평가, 객체리터럴)