Final project - Dev18

Jaemin Jung·2021년 9월 29일

Final Project

목록 보기

18/27

1분 미리듣기

비로그인시, 음원을 1분만 재생하도록 하는 로직을 만들어보자

호출 스케줄링(scheduling a call)

1분 미리듣기 구현을 어떻게 할지 고민하였는데,
음악 재생을 시작한지 1분이 지나면 음원을 멈추도록 해보기로했다.
이 과정에서 예전에 코스 진행하면서 배운 setTimout이 떠올랐다.
이에 대해서 좀더 찾아봤는데, setTimeout과 비슷한 맥락의 setInterval도 있다는것을 알게되었다.
이 두 함수의 공통점은 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는것이며,
이것을 호출 스케줄링(scheduling a call)이라고 한다.

setTimeout

일정한 시간 후에 작업을 한번 실행한다.
보통 재귀적 호출을 사용하여 작업을 반복하는데,
기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고,
다시 일정한 시간을 기다린후 작업을 수행하는 방식이다.
clearTimeout() 을 사용해서 작업을 중지한다.

setInterval

일정한 시간 간격으로 작업을 수행하기 위해서 사용한다.
clearInterval 함수를 사용하여 중지할 수 있고,
주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우
문제가 발생할 수 있다.

1분 미리듣기 구현

처음에는 setTimeout을 이용해서 구현하기로 하였으나,
내용을 더 찾아보니 setInterval이 웹에서 현재 시각을 구현할때 많이 사용한다고 해서 이 함수가 더 적절하다고 생각이 들었다.

test를 하기위해 audio태그에 임의의 음원 파일을 src값으로 할당시키고,
useRef를 이용해 audio태그를 참조하였다.
그다음, setInterval을 1초에 한번씩 실행시키도록 하고, 초를 의미하는 tic이라는 변수에 1씩 더해주는 tickTok함수를 실행시키도록 하였다.

마지막으로 tickTok함수 내부에서는 tic변수가 60인지 확인하는 유효성 검사 함수를 실행시킨다.
만약 변수 tic이 60이상이라면, clearInterval을 이용해 setInterval을 중지시키고,
audio객체 내부 속성인 currentTime을 0으로 설정시켜준다.

중요한점

setTimeout이나 setInterval을 중지할때에는 함수를 실행시켰을때
꼭 변수에 담아 정보를 저장시켜야한다.
그리고 clear함수에 인자로 그 변수를 전달시켜야한다.
이것 때문에 꽤나 고생했다.
변수가 어디에서 선언되었느냐에 따라 그 변수가 undefind였을때가 있었다.
이 부분은 let을 이용해서 전역 위치에 선언해주기로 했는데 아직 문제가 많다.


function App() {

  const audioRef = useRef()
  const audio3 = new Audio()
  const audio2Ref = useRef(audio3)
  const [num,setNum] = useState(0)

  ...
  
  let time;
  let tic = 0;
  
  function tictok(){
    console.log(tic)
    tic+=1
    check()
  }    
  function check () {
    if(60 < tic){
      audioRef.current.pause()
      audioRef.current.currentTime=0;
      clearInterval(time);
      tic = 0
    }
  }

  function click() {
    if(audioRef.current.paused){
      audioRef.current.play()
      time = setInterval(tictok,1000)
    }else {
      console.log('>',time)
      clearInterval(time);
      audioRef.current.pause()
    }
  }

  return (
    <div className="App">
    <button onClick={()=>{click()}}>클릭</button>
    <audio
    src={test}
    ref={audioRef}
    />
    </div>
  );
}

export default App;