210710 [수튜브] - 이슈트래킹 + 커스텀 컨트롤러 리팩토링

학습 시간

 

약 7시간

 

---

To Do

• 이슈트래커 설정 및 Issue와 PR 템플릿 작성
• 아래 이슈를 해결

 

---

학습 내용

제가 개발하고 있는 커스텀 컨트롤러는 전체 controls영역(보라색)과 그 내부에 위치한 버튼 영역(연두색)의 클릭 이벤트를 구분해야 합니다.

 

• 전체 영역(보라색) : video 화면 위에 controls를 보여주거나 숨김
• 각 버튼 영역(연두색) : 해당 버튼의 기능 수행

보라색 영역과 연두색 영역의 동작이 다르다

각 클릭 이벤트를 구분해야 하지만, 모든 버튼이 전체 controls 영역 내부에 위치하기 때문에 코드가 복잡하고, 조금만 수정해도 동작이 꼬이는 문제가 있었습니다.

 

 

이벤트 위임을 적용한 코드

controls.addEventListener('click', function(e) {
	// ...생략
	let target = e.target;	// 이벤트 타겟
	while (!target.classList.contains('controls-btn'))	// 타겟이 특정 버튼 영역에 해당하지 않음
	{
		target = target.parentNode;
		if (target.className == 'video-section')
		{
			target = null;	// !! 무한루프 탈출
			showControlsEvent();	// 컨트롤 영역 보여주기
			return;
		}
	}
	setControllsState('hidden');
	switch (target.id) {
		case 'backward':
			backwardEvent();	// 이전 영상
			return;
		case 'forward':
			forwardeEvent();	// 다음 영상
			return;
		case 'playpause':
			playpauseEvent(target);	// 재생/정지
			return;
		case 'fs':
			fullscreenEvent(target);	// 전체화면
			return;
	}
	return;
});

위와 같이 이벤트 위임을 적용하여, 각각 따로 적용되어 있던 버튼 클릭이벤트들을 모아, controls클릭이벤트 내부에 정리하였습니다.

 

 

발견한 문제

• 문제
  위 코드에서 다음 target = null;을 작성하지 않아 무한루프에 걸리는 문제가 있었습니다.

while (!target.classList.contains('controls-btn'))
{
  target = target.parentNode;
  if (target.className == 'video-section')
  {
    target = null;	// !! 무한 루프 탈출
    showControlsEvent();
    return;
  }
}

• 해결
  따로 console에 오류가 나타나지 않아, 직접 console.log로 의심이 가는 부분을 체크하며 수정했습니다.