[Error-Handling] 강범규 - 2022.02.23

### 어떤 에러인가요?
- 메인 페이지에서 다른 페이지로 이동할 때 메인페이지에서 설정한 settimeout 이 실행되는 에러
- 메인 페이지에 다시 접근 시 onYouTubeIframeAPIReady 가 실행되지 않아 player 객체가 초기화 되지 않는 에러
-
### 에러 메시지
```shell
$ 터미널의 에러 코드를 여기 넣어주세요.
```

### 에러 핸들링 방법
* 핸들링 방법에 대해서 간단하게 기록해보세요.

```
useEffect(() => {

// 코드 생략...

return () => {
clearInterval(interval);
clearTimeout(timer);
window.onYouTubeIframeAPIReady = null;
window.YT = null;
player.current.getIframe().remove();
player.current.destroy();
player.current = null;
};
}, []);
```

#### 히스토리
첫번째 이슈:
1. 테스트를 진행할 땐 settimeout이 호출되는 시간을 짧게 잡아서 항상 작동되는 걸 확인함
2. 실제 시간으로 맞추고 다른 일 하다가 1시간 뒤에 settimeout에 넣은 callback함수가 실행되는 이슈 발견
3. settimeout에 들어간 callback함수는 스택 프레임에 있는게 아니기 때문에 메인 페이지를 나가도 사라지지 않을거라 추측.
4. remove settimeout 키워드로 검색해 clearTimeout이라는게 있다는 거 확인하고 적용

두번째 이슈:
1. 메인 페이지에 갔다가 다른 페이지 가고 다시 메인페이지로 오면 노래가 재생이 안되는 문제 발견
2. player객체 초기화도 해봤는데 해결안됨
3. 콘솔에서 window 객체 입력해보니 YT 관련 프로퍼티가 존재
4. 메인 페이지가 아닌 다른 페이지에서 window 객체 입력해보니 계속해서 YT 관련 프로퍼티가 존재
5. 따라서 컴포넌트가 unmount되는 시점에 YT 관련 객체 null로 초기화

### 에러 핸들링을 위해 참고한 레퍼런스 링크
- 검색 키워드: remove settimeout
- 링크:
- https://www.w3schools.com/jsref/met_win_cleartimeout.asp
- https://developers.google.com/youtube/iframe_api_reference#Accessing_and_Modifying_DOM_Nodes