최종 프로젝트 5일 차 @ 재생 바, 파티 상태 처리 기능 구현

오늘은 하루종일 기능 구현에 매달렸다. 오늘 구현한 기능은 재생 바와 파티 상태 처리 기능인데, 후자는 제대로 테스트를 할 수 없으니 당장에는 간단하게 넘어갔으나, 전자는 생각보다 까다로워서 시간을 많이 잡아먹었다. 

 

어려웠던 것

재생 바를 구현하는 데에 생각할 점은 현재시각을 불러온다고 해도 자정00:00을 넘으면 현재 시각이 초기화된다는 것이다.

 

때문에 나는 오전 8시를 기준으로 삼아서 if(현재시간이 오전 8시 이전이고 && 시작시간이 오전 8시 이전이 아닌 경우)에 현재 시각에 24시간을 더하기로 했다. 

 

아래가 현재시각을 반환하는 함수이다. 

const getPlayTime = (startPlayTime: number) => {
  // 현재 시각
  const nowTimeArr = [new Date().getHours(), new Date().getMinutes(), new Date().getSeconds()];
  let nowTime = nowTimeArr[0] * 60 * 60 + nowTimeArr[1] * 60 + nowTimeArr[2];

  // 영상을 보다가 자정00:00이 넘는 경우를 생각함
  // 8시 이전 로직
  if (nowTime < 8 * 60 * 60 && !(startPlayTime * 60 < 8 * 60 * 60)) {
    nowTime += 24 * 60 * 60;
  }

  return nowTime - startPlayTime * 60;
};

 

트러블 슈팅

재생 바를 구현하면서 생긴 가장 큰 문제는 재생 시간이 완료되었는데도 불구하고 재생 바를 리렌더링하는 setinterval이 계속해서 실행되었다는 점이다.

 

우리 프로젝트의 재생 바는 일정 시간이 되면 자동으로 진행되고 완료되면 자동으로 멈추는 기능을 가지고 있다.

이런 재생 바를 구현하기 위해서 나는

 

1. 시작시간과 duration, 현재시각을 기반으로 하여 진행시간을 구하고

2. 이를 1초마다 리렌더링하여 나아가는 것처럼 보이게 한다

는 방식을 취했다. 

 

이 중에서 2의 1초마다 리렌더링 방식을 위하여 나는 setinterval함수를 사용하였었다. 그런데 setinterval함수가 완료시간이 지나도 멈추지 않는 오류가 발생했다. clearInterval을 사용하면 멈출 수 있다고 하던데, 그럼에도 불구하고 멈추지가 않았다. 

 

나는 이러한 오류가 setinterval함수가 여러 번 실행되는 함수이기 때문이라는 추측을 했다.

 

나는 재생바가 진행되기 위해서는 함수가 자주 실행되어야 하는 특징 때문에 setTimeout함수와 setinterval함수 중에서 후자를 선택했었다. 하지만 리렌더링이라는 특성 상 리렌더링이 되면 함수가 초기화되기 때문에 굳이 여러 번 실행되는 함수를 선택할 필요는 없다. 어차피 리렌더링 이후에 또 함수가 실행될 것이기 때문이다. 그러면 굳이 여러 번 실행되는 함수가 아니라 한 번만 실행되는 함수를 사용해도 될 것이다. 

 

그래서 setinterval 대신에 setTimeout을 사용해서 로직을 구성해보니 내가 컨트롤한대로 setTimeout과 리렌더링이 멈추는 것을 확인할 수 있었다. 아래가 완성한 재생 바 리렌더링 함수이다.

  // 플레이타임
  // 초
  const [playTime, setPlayTime] = useState<number>(getPlayTime(startPlayTime));

  const timer = setTimeout(() => setPlayTime(getPlayTime(startPlayTime)), 1000);
  if (!(duration * 60 > playTime)) {
    clearTimeout(timer);
  }

 

setTimeout, setinterval 이러한 내장 함수에 대해서도 더 공부가 필요하다는 것을 알았다.