TIL - 2022.02.08 화요일

오늘 배운 것

---

1. Firebase - Firestore db 삭제 기능 구현

Firebase db 삭제 기능을 구현하기 위해 내게 필요한 것은 총 두가지였다.

- 1. 해당 문서의 id를 뽑아오는 기능
- 2. 해당 id를 매개로 문서를 삭제하는 기능

Firebase 공식 문서 정말정말 불친절하다..  그래도 여러 선지자들의 인도를 잘 짜맞춰서 기능 구현에 성공했다.

 

첫 번째, 해당 문서의 id를 뽑아온다.

useEffect(() => {
    const fetchWishBoard = async () => {
      const wishBoard = collection(getFirestore(firebaseApp), "wishBoard");
      const result = await getDocs(wishBoard);
      // const wishBoardData = result.docs.map((el) => el.data());
      // id를 제외하고 data만 뽑아서 배열로 만들어줬던 기존 코드
      const wishBoardData = result.docs.map((el) => {
        const data = el.data();
        const id = el.id;
        return { id, ...data };
        // data와 id를 각각 뽑은 뒤 병합해서 fetch해준다.
      });
      setWishBoardData(wishBoardData);
      console.log("등록된 보고 싶은 영화 정보를 읽어왔습니다.");
      console.log(wishBoardData);
    };
    fetchWishBoard();
  }, [isSubmit]);

두 번째, 해당 id를 이벤트 핸들러로 읽어올 수 있도록 버튼에 부여한다.

세 번째, 읽어온 id를 매개로 문서(document)에 deleteAt 값을 부여한다.

  const onClickDelete = async (event: MouseEvent<HTMLButtonElement>) => {
    const docsId = event.target.id;
    const wishBoard = doc(getFirestore(firebaseApp), "wishBoard", docsId);
    await updateDoc(wishBoard, {
      deletedAt: new Date(),
    });
    Modal.error({ title: "삭제 완료!" });
    setIsSubmit((prev) => !prev);
  };

네 번째, deletedAt 값이 없는 document들만 읽어오도록 presenter 코드를 수정한다.

<Wish.List className="genre">
        <Wish.ListTitle>코미디/드라마</Wish.ListTitle>
        {props.wishBoardData?.map(
          (el: any, i: number) =>
            el.genre === "코미디/드라마" &&
            !el.deletedAt && (
              <Wish.ListItem key={i}>
                <span>{el.title}</span>
                <Wish.LinkBox>
                  <a href={el.link} target="_blank" rel="noreferrer">
                    영화 정보 보기
                  </a>
                  <button onClick={props.onClickDelete} id={el.id}>
                    삭제하기
                  </button>
                </Wish.LinkBox>
              </Wish.ListItem>
            )
        )}
      </Wish.List>

구현 성공😁 뿌듯하고 상쾌하다. Id값 뽑아오는 방법을 알았으니 수정도 자유롭게 가능함!

 

2. apollo-upload-client를 이용해서 이미지 업로드 구현

위 기능을 구현하는 프로세스는 이러했다.

• file 타입 input에 입력된 값을 이벤트 핸들러로 읽어온다.
• 해당 값을 이미지 업로드 API를 이용해 storage로 보낸다. (이때 reponse로 날아온 url을 state에 저장한다)
• 스프레드 연산자를 이용해 저장된 이미지 url들을 한 배열에 모은다.
• 최대 이미지 첨부 개수에 도달하면 파일 첨부 기능을 disabled 시킨다. (나는 최대 3개 이미지까지 첨부 가능하도록 구현했다.)
• state에 저장한 이미지 url의 배열을 게시글 등록 API에 담아 기타 내용과 함께 보낸다.
• 상세페이지에서 해당 이미지 url 배열을 받아온다. 그리고 map으로 출력한다.

useRef를 이용해 input과 다른 트리거를 연결해주는 방법도 배웠다. 내일 오전에 적용시켜 볼 예정이다.

 

3. 프로젝트 폴더 타입 정리

작업 중인 넷플릭스 리뷰 페이지의 타입들을 전체적으로 정리해줬다. 현재 내가 할 수 있는 부분은 다 지정해서 빨간줄을 없앴지만, 중간중간 타입 지정을 어떻게 해줘야할지 알 수 없는 녀석들이 있다. 라이브러리를 이용해 구현했는데 해당 라이브러리에서 타입을 지원하지 않는 경우도 많고.. 전체 레이아웃을 한 번 뜯어고칠 예정인데, 그 때 마저 정리하려 한다.

이런 녀석들.. 대체 왜 빨간줄이 찍 그어지는거니?

 

앞으로 할 것

---

- Firebase로 구현한 Wish 보드

현재 Wish 보드의 장르 구분은 하드코딩으로 구현한 상태다. 그래서 presenter 부분이 상당히 긴데, 장르 정보까지 db 내에 배열로 구현해서 코드의 양을 확 줄이고 싶다.

 

- 영화 랭킹 페이지 (IMdb API)

데이터를 읽어오는데 시간이 꽤 걸린다. 틈에 이탈이 발생하지 않도록 로딩 애니메이션을 넣어줄 것.

 

- 전체 레이아웃 변경

이건 시간이 꽤 걸리는데다가, 기능 구현보다 우선순위는 떨어진다. 전체 기능 구현이 끝날때까지 계속 고민하며 레퍼런스를 모아보자.

 

- 블로그

useEffect와 클래스 컴포넌트 / 함수형 컴포넌트에 대해 포스팅 할 것.