React : 프로젝트 트러블 슈팅

debounce를 활용한 무한렌더링 해결

※ 문제

※ 해결

※ 코드

  // 화면 사이즈 조절 이벤트 리스너 지정
  useEffect(() => {
    // 화면 사이즈에 따른 상태값 지정
    const handleResize = _debounce(() => {
      if (window.innerWidth <= 599) {
        setIsScreen({ isMobile: true, isTablet: false });
      } else if (window.innerWidth <= 1023) {
        setIsScreen({ isMobile: false, isTablet: true });
      } else {
        setIsScreen({ isMobile: false, isTablet: false });
      }
    }, 300);

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);​

 

AWS S3 bucket 파일 다운로드

※ 문제

※ 해결

※ 코드

  /* 파일 다운로드 */
  const handleDownload = async (fileUrl: string, fileName: string) => {
    await fetch(fileUrl, {
      method: "GET",
    })
      .then((res) => res.blob())
      .then((blob) => {
        const blobUrl = URL.createObjectURL(blob);
        const aEle = document.createElement("a");

        aEle.href = blobUrl;
        aEle.download = fileName;
        // click을 사용해 파일 다운로드
        aEle.click();
        // remove로 Element 제거
        aEle.remove();
      });
  };​

 

무한 스크롤 구현

※ 문제

※ 해결

※ 코드

/* 게시글 조회 + 무한 스크롤 */
  useEffect(() => {
    const fetchMorePosts = async () => {
      const jwt = localStorage.getItem("jwt");
      const fullUrl = `${url}?size=5&page=${skip}${searchWord ? `&title=${searchWord}` : ""}`;

      const datas = await fetch(fullUrl, {
        method: "GET",
        headers: {
          Authorization: `Bearer ${jwt}`,
        },
      }).then((res) => res.json());

      // 추가 게시글이 있는지 확인
      if (datas.length === 0) {
        setHasMore(false);
      } else {
        setPosts((prevPosts) => [...prevPosts, ...datas]);
        setSkip((prevSkip) => prevSkip + 1);
      }
    };

    // 관찰자 지정
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && hasMore) fetchMorePosts();
    });

    if (observer && lastItemRef.current) observer.observe(lastItemRef.current);

    // 관찰자 해제
    return () => {
      if (observer) observer.disconnect();
    };
  }, [skip, hasMore, isTablet, isMobile, searchWord, url]);
  
  
  	// Components
	<Posts>
	  {posts &&
	    posts.map((post) => (
	      <PostCard
	        key={post.post.id}
	        post={post}
	        isManageClick={false}
	        isAllPosts={false}
	        handleCommentRegist={handleCommentRegist}
	        handleCommentDelete={handleCommentDelete}
	        handlePostModify={handlePostModify}
	        handleAllPostDelete={handlePostDelete}
	        handlePostRegist={handlePostRegist}
	      />
	    ))}
	  {hasMore && <Loading ref={lastItemRef} />}
	</Posts>​