live-video-gallery 프로젝트 문제점 및 해결방법 / 후기

Jeong seulho·2022년 10월 4일

목록 보기

2/4

문제점 및 해결방법

문제 1 : 비디오 렌더링 시간 문제

처음에는 별 생각없이 유튜브 api로 부터 모든 비디오를 가져왔는데 몇십개가 넘는 비디오를 가져오다보니 사용하기 불편할정도로 로딩시간이 길어졌다

해결 1

      const myPlayListInfo = playListInfo.items.map((videoInfo, index) => {
        return tag === "space" && (index === 0 || index === 1)
          ? {
              id: videoInfo.snippet.resourceId.videoId,
              title: videoInfo.snippet.title,
              thumbnail_url: videoInfo.snippet.thumbnails.medium.url,
              isFocused: true,
              isFavorite: false,
              tag,
            }
          : {
              id: videoInfo.snippet.resourceId.videoId,
              title: videoInfo.snippet.title,
              thumbnail_url: videoInfo.snippet.thumbnails.medium.url,
              isFocused: false,
              isFavorite: false,
              tag,
            };

가져오는 비디오 정보에 isFocused를 추가하고

  const onChangeFocus = () => {
    setVideosInfoArray((videosInfoArray) =>
      videosInfoArray.map((videosInfo, index) =>
        currentImgIndex === index
          ? { ...videosInfo, isFocused: true }
          : { ...videosInfo, isFocused: false }
      )
    );
  };

현재 사용자가 보고 있는 동영상에대해서만 isFocused : true를 설정
isFocused가 true일때만 비디오를 렌더링 하도록 하였다

문제 2 : 슬라이동 이동시 현재 위치에 비디오가 렌더링 되지 않음

  const onNextSlide = () => {
    if (!(videosInfoArray.length - 1 <= currentImgIndex)) {
      setCurrentImgIndex((prev) => prev + 1);
    }
    onChangeFocus();
  };

  const onPrevSlide = () => {
    if (!(currentImgIndex === 0)) {
      setCurrentImgIndex((prev) => prev - 1);
    }
    onChangeFocus();
  };

  const onChangeFocus = () => {
    setVideosInfoArray((videosInfoArray) =>
      videosInfoArray.map((videosInfo, index) =>
        currentImgIndex === index
          ? { ...videosInfo, isFocused: true }
          : { ...videosInfo, isFocused: false }
      )
    );
  };

다음과 같은 코드로 현재 index의 영상만 렌더링하도록 하려했는데 오른쪽 슬라이드 버튼을 누르면 오른쪽의 비디오가 렌더되는게 아닌 버튼 누르기전의 위치의 영상이 렌더된다

기대 결과 : 좌우 슬라이드 버튼 클릭 => currentImgIndex가 변하고 => 변화된 currentImgIndex에 따라 해당 위치의 영상 렌더링
실제 결과 : 좌우 슬라이드 버튼 클릭 => 변화전 currentImgIndex에 해당 위치의 영상 렌더링 => currentImgIndex 변화

해결 2

다음과 같은 결과가 나오는 이유는 useState는 성능 향상을 위해 비동기적으로 실행 되기 때문이다 강의를 들으며 알고 있었던 내용이지만 실제 useState의 비동기때문에 오류가 난적이 처음이었다
내 해결 방법은 useEffect의 의존성을 사용해서 동기적으로 처리되도록 변경하였다

  const onNextSlide = () => {
    if (!(videosInfoArray.length - 1 <= currentImgIndex)) {
      setCurrentImgIndex((prev) => prev + 1);
    }
  };

  const onPrevSlide = () => {
    if (!(currentImgIndex === 0)) {
      setCurrentImgIndex((prev) => prev - 1);
    }
  };

  useEffect(() => {
    onChangeFocus();
  }, [currentImgIndex]);

  const onChangeFocus = () => {
    setVideosInfoArray((videosInfoArray) =>
      videosInfoArray.map((videosInfo, index) =>
        currentImgIndex === index
          ? { ...videosInfo, isFocused: true }
          : { ...videosInfo, isFocused: false }
      )
    );
  };

useEffect에 currentImgIndex가 바뀔때마다, onChangeFocus()를 실행하도록 하여 코드 순서를 보장받도록 하였다

문제 3 : 슬라이드 효과가 제대로 표현이 안되는 문제

const AllVideosWrapp = styled.div`
  display: flex;
  justify-content: center;
  position: absolute;
  transform: ${(props) => `translateX(-${640 * props.currentImgIndex}px)`};
  transition: all 2s ease-in-out;
  height: 384px;
`;

다음과 같이 슬라이드효과를 주었는데 문제1에서 봤듯이 1개의 영상만 렌더링 되게 하였다
이렇게 하면 다른 영상들이 움직이면서 슬라이드 효과가 나타나야 하는데 나는 1개의 영상만 렌더되어 있기 때문에 슬라이드 효과가 의미가 없어지게 된다

해결 3

return (
    <>
      {isFocused ? (
        <PlayerWrapp>
          {isFavorite ? (
            <FavoriteIcon
              sx={{ color: "red" }}
              onClick={() => {
                onToggleFavorite(isFavorite, id);
              }}
            />
          ) : (
            <FavoriteBorderIcon
              sx={{ color: "red" }}
              onClick={() => {
                onToggleFavorite(isFavorite, id);
              }}
            />
          )}
          <ReactPlayer
            url={`https://www.youtube.com/watch?v=${id}`}
            controls={true}
          />
        </PlayerWrapp>
      ) : (
        <PlayerWrapp>
          <img src={thumbnail_url} alt="loading" />
        </PlayerWrapp>
      )}
    </>
  );

Focused가 false인 영상들에 대해서는 렌더링을 하지않는게 아닌 썸네일만 보여주어 마치 영상을 렌더링 한것처럼 보이도록 하였다 물론 실제 영상과 썸네일이 차이가 나서 티가 나긴하지만 슬라이드 효과를 보여주기에는 충분했다

문제 4 : 배경 영상파일 lfs로 배포시 제대로 배경 영상이 동작안함

깃허브를 이용하여 웹사이트를 배포하였는데 로컬에서는 잘 동작하던 웹사이트가 배포하여서 확인하였더니 정해준 배경동영상을 제대로 찾지를 못했다

해결 4

처음에는 경로의 문제인줄 알고 배경 이미지, 배경 영상이 담긴 assets폴더를 public하위, src하위 등으로 옮기면서 경로도 여러가지 방법의 경로 설정을 사용해봤는데 모두 실패하였다
그러다 결국 큰 용량의 영상을 github에 푸쉬하기 위해 lfs를 사용했었는데 이것이 문제라는 것을 확인했다

처음에 lfs를 사용할때는 그저 용량큰 파일을 올려주도록 설정해주는줄로만 알았는데 Git LFS를 사용하면, Git repository에 대용량 파일이 그대로 올라가는 것이 아니라, pointer가 올라간다. 그리고 pointer는 별도의 LFS 서버에 저장된 대용량 파일을 가리킨다. 파일 자체는 LFS 서버에 올라가고, 원래 레포에는 파일을 가리키는 '바로 가기'만 올라가는 셈이다

결국 다운한 영상자체를 사용하지 않고 영상의 다운로드 경로를 사용했다