[TIL] 221022-23

Beanxx·2022년 10월 23일

TIL

목록 보기

81/120

🔥 주말동안 한 일

프로그래머스 Lv.0 8문제 완료(토4,일4)
[JS Deep Dive] Chapter8-9(제어문, 타입변환&단축평가)
[Udemy JS 알고리즘&자료구조] Section5(문제해결패턴)
[Udemy-React] Section10(Reducer & Context API) - useEffect() part
StudyHaza 플젝
- 커뮤니티 상세페이지 추가 & 커뮤카드에 상세페이지 연결
- 스터디모집 글 삭제 기능 구현

🚨 Error Handling

커뮤니티 상세 페이지 구현

스터디모집 상세페이지 구현한대로 커뮤니티 상세페이지도 구현 시작!
기존 코드에선 커뮤니티 목록에 대한 각각의 카드가 별도의 컴포넌트로 구성된 것이 아닌 그냥 map 안에 태그들로 간단히 구현되어 있었는데 이러니까 id가 계속 undefined가 출력되었다.🥲
그래서 아예 각 카드 컴포넌트(CommunityCard)로 빼서 구현하니까 id도 잘 받아와지고, 상세페이지도 잘 나왔다!
스터디모집 글 삭제 기능 구현

firebase 내 문법으로 문서 삭제 기능을 구현하려니까 기존 axios를 사용하여 구현하는게 아니라 문법을 따로 찾아보고 적용해야해서 생각보다는 수월하게 구현은 안됐다..

firebase 공식 문서에 나와있는 방법은 문서 id를 가지고 문서를 삭제하는 방법인데 플젝 상세페이지를 구현할 때 문서id가 아닌 필드 내에 선언한 id를 가지고 구현을 했기 때문에 이 방법으로는 삭제가 안된다,, 😵‍💫
```
// firebase 공식문서 내 나와있는 문서 삭제 방법
import { doc, deleteDoc } from "firebase/firestore";
await deleteDoc(doc(db, "cities", "DC"));
```
🔗 [Firebase 공식 문서] Cloud Firestore에서 데이터 삭제 | Firebase

그래서 상세페이지 구현할 때 사용했던 방법인 쿼리를 이용해서 원하는 데이터를 가져오고, 이 데이터를 삭제하는 방법을 이용해서 구현할 수 있었다.
아래 블로그 글과 전에 구현했던 코드를 참고해서 구현함!
```
// 내가 구현한 쿼리를 이용한 문서 삭제 방법!
const deletePost = async () => {
    const q = query(collection(db, "posts"), where("id", "==", id));
    const data = await getDocs(q);
    try {
      if (data.docs.length !== 0) {
        await deleteDoc(data.docs[0].ref);
      }
      navigate("/");
      window.location.reload();
    } catch {
      console.log("Not delete");
    }
  };
```
🔗 React/Cloud Firestore - delete document using where clause (query문으로 조건에 부합하는 문서 delete하는 법)

🧚 MEMO

side Effect

Render UI & React to User Input 작업을 제외한 애플리케이션에서 일어나는 다른 모든 것

ex. http request, 브라우저 저장소(localStorage)에 무언가를 저장하는 것

버그나 무한 루프 발생 가능성이 높기 때문에 Side Effect은 직접적으로 컴포넌트 함수에 들어가선 ❌

👉 Side Effect 처리 방법: useEffect() Hook

useEffect()

useEffect(() ⇒ {…}, [dependencies]);

의존성이 변경될 때마다 앞의 함수가 다시 실행됨

✋ useEffect()에서 사용하는 모든것을 종속성(dependency)으로 추가해야 하지만 몇가지 예외가 존재한다!
1. 상태 업데이트 기능 추가 ❌ (ex. setState())
2. 내장 API 함수 추가 ❌ (ex. fetch(), localSotrage, setTimeout …)
3. 변수나 함수 추가 ❌ (함수 외부에서 정의했을것임)