DOM, console, alert 등 출력 대상의 차이를 배웁니다.
textContent는 페이지 내용을 안전하게 바꾸고 console.log는 개발자 확인용 기록을 남깁니다. alert는 흐름을 막기 때문에 꼭 필요한 사용자 알림이 아니면 화면 UI를 사용하는 편이 좋습니다.
같은 message 문자열이 두 곳으로 나갑니다. output.textContent에 대입한 값은 페이지의 pre 안에 보이고, console.log로 보낸 값은 개발자 도구의 콘솔 패널에만 찍혀 방문자 화면에는 나타나지 않습니다. 문구를 message 하나에 담아 두었기 때문에 두 출력의 내용이 어긋날 일이 없습니다.
console.log는 인수를 여러 개 받으면 공백으로 이어 찍고, 객체를 넘기면 개발자 도구에서 펼쳐 볼 수 있는 형태로 보여 줍니다. 경고와 오류는 console.warn과 console.error로 남겨 두면 콘솔에서 수준별로 걸러 볼 수 있고, 객체가 담긴 배열은 console.table로 표처럼 확인할 수 있습니다.
document.write는 문서 로드 후 호출하면 기존 페이지를 지울 수 있어 현대 UI 출력에 적합하지 않습니다.
직접 바꿔보세요message를 숫자 계산 결과로 바꾸고 콘솔도 확인하세요.