JavaScript 로 DOM 제어하기 1탄 - 코드리뷰

출처: 위니브

 

오늘은 DOM에 대한 수업을 들었다. 

질문에 하나씩 답할 때마다 진행 과정을 프로그래스가 점점 올라가는 것으로 나타내는 기능 구현 미션이 있었는데

배운 코드들을 접목시키는 것이 어렵다고 느껴져서

나의 코드와 강사님의 코드를 비교하여 분석하고자 한다. 

 

✅ 코드리뷰: 내가 작성한 코드 break down 해보기

<script>
	const textBoxes = document.querySelectorAll('input[type="text"]');
	const progressBar = document.querySelector(".bar-progress");

	textBoxes.forEach(function (textBox) {
    	textBox.addEventListener("input", function () {
    		progressBar.value += 20;
    	});
  	});
 </script>

input창에 입력을 하면 프로그래스 바가 20퍼센트씩 올라가도록 하는 것이 목표였다 (그래서 총 5개의 input text창을 채우면 프로그래스가 100퍼센트가 되도록) 

 1️⃣ input element에 무언가를 입력할 때 20만큼 증가시키기 위해 addEventListener 를 사용했다.

 2️⃣ 같은 요소에 event를 반복하기 위해 forEach 를 사용했다.

 3️⃣ input 이벤트는 입력 요소의 값이 변경될 때(텍스트 입력 요소에 무언가를 입력할 때)마다 실행된다.

 

✅ 코드 실행 결과

우선 처음으로 시도했던 코드로는 이러한 처참한 결과가 나온다. 

어떠한 질문에 답하는 것과 상관없이 타이핑을 칠 때마다 프로그레스가 올라가는 것을 볼 수 있다 

 

✅ 문제 원인

input 이벤트를 사용했기 때문에 input element의 value가 변경될 때마다 progress의 value를 증가시키게 되었다.

 

 

DOM API를 이용한 코드가 확 와닿지 않지만 풀이된 코드가 아닌 내 코드를 이용해서 좀 더 개선을 하는 방법으로

기능을 구현해보고 싶어서 강사님께 문의를 드렸다. 

✅ 문제 해결 방법

 text 입력이 끝난 후에 progress의 value를 증가시키도록 if문을 사용하도록 한다

 물론 이 방법 말고 여러가지 방법들이 있겠지만 다른 코드를 시도해보고 문제를 해결하는 내용은 다음 글에 작성하도록 해야겠다