서울에서는 소고기 한 근이 500g이고, 부산에서는 고기 한 근이 100g이라면 어떨까요? 다툼이 일어나겠죠. 거래를 할 수 없을 겁니다. 도량형. 도(度)는 길이, 양(量)은 부피, 형(衡)은 무게를 말합니다. 이거 중요합니다.
도량형 통일의 기본은 어디서나 소고기 한 근은 같아야 한다는 것입니다. 서울에서나 부산에서나 고기 한 근은 같아야 한다는 거지요. 이름도 마찬가지입니다. 하나의 대상을 두고 서로 다르게 부르면 혼란이 올겁니다.
프로그래밍 공부를 시작했을 때 당황스러웠던 일이 있습니다. 바로 VO와 DTO의 차이였죠. 사람들마다 하는 말이 달랐습니다. 어디에 기준을 둬야 하는지 헷갈렸습니다.
<html>, <head>, <body>, <h1>, <p> 등..
HTML에서는 이것들을 요소(element)라고 합니다. JS에서는 문서 객체(document object)라고 합니다. 서로 다르게 부릅니다.
영생을 꿈꾸며 수은을 먹었던 진시황의 위대한 업적이 하나 있습니다. 바로 도량형 통일입니다. 언젠가 기회가 되면 프로그래밍 용어를 통일시키는 프로젝트를 진행하고 싶습니다.
아무튼 문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델(Document Object Model)이라고 합니다. 이거 매우 재밌습니다.
DOMContentLoaded 이벤트
문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용합니다. 왜 사용하는 걸까요? 브라우저는 HTML 문서를 위에서부터 아래로 읽어들입니다. 그런데 만약 <body>를 읽기 전 <head>에서 무언가를 출력하려고 하면 문제가 발생합니다.
DOMContentLoaded는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트입니다. 아래와 같이 코드를 구성하면 DOMContentLoaded 상태가 되었을 때 콜백 함수(const h1~)를 호출합니다. 그래서 문제없이 코드가 실행됩니다.
<!DOCTYPE html>
<html>
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const h1 = (text) => `<h1>${text}</h1>`
document.body.innerHTML += h1(`DOMContentLoaded 이벤트 발생`)
})
</script>
</head>
<body>
</body>
</html>다음 글은 document, window 객체에 대해 다룹니다.
💁♂️reference
혼자 공부하는 자바스크립트
윤인성 지음ㅣ한빛미디어ㅣ2021ㅣ도서 정보
EOD.
