210710 [수튜브] - 이슈트래킹 + 커스텀 컨트롤러 리팩토링
프로젝트/수튜브 : 유튜브 클론코딩

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로 의심이 가는 부분을 체크하며 수정했습니다.

 

반응형