JavaScript에서 DOM을 예로 들은 코딩 팁

구현하기 위해 어느 정도의 코드를 작성해야 하는 충분히 복잡한 작업이 여러분 앞에 있다고 가정해 보겠습니다.

잘못된 접근 방식은 전체 솔루션 코드를 한 번에 작성하려고 시도한 다음 확인을 시작하는 것입니다. 이 경우 아무것도 작동하지 않을 가능성이 높으며, 오류를 찾기 위해 많은 양의 코드를 살펴봐야 할 것입니다.

올바른 접근 방식은 작업을 작은 기본 단계로 분할하고, 각 단계를 구현하면서 바로바로 정확성을 확인하는 것입니다. 이 경우, 실수를 하더라도 즉시 문제를 알아차리고 수정할 수 있습니다.

실제로 시도해 봅시다. 다음과 같은 단락이 있다고 가정합니다:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

숫자가 3의 배수인 단락을 찾아 해당 숫자들의 합을 구하는 작업이 주어졌다고 가정합니다.

첫 번째 작은 단계로, 단락들을 배열로 가져와 콘솔에 이 배열을 출력하여 모든 것을 올바르게 가져왔는지 확인하는 것을 제안합니다. 해봅시다:

let elems = document.querySelectorAll('p');
console.log(elems);

다음 작은 단계는 단락들을 루프로 순회하며 각각을 개별적으로 콘솔에 출력하는 것입니다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem);
}

이제 루프 안에서 단락들의 텍스트를 출력해 봅시다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem.textContent);
}

이제 숫자가 3으로 나누어 떨어지는 단락들의 텍스트를 출력해 봅시다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		console.log(text);
	}
}

올바른 단락들을 얻고 있음을 확인한 후, 해당 숫자들의 합계를 계산할 수 있습니다:

let elems = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		sum += text;
	}
}

console.log(sum);

연도 목록이 주어집니다:

<ul>
	<li>2000</li>
	<li>2004</li>
	<li>2021</li>
	<li>2022</li>
	<li>2025</li>
	<li>2031</li>
</ul>

자릿수의 합이 6인 연도들을 구하세요. 구한 연도들의 합을 찾으세요.