📚 Reference

• 참고 자료 1

템플릿 언어

• 엘리먼트를 생성할 때 document.createElement() 함수를 사용한다.
• 트리 형태의 DOM에 맞게 엘리먼트를 구성하려면 엘리먼트 간의 부모-자식 관계를 만들어야 한다.
• 예시로 아래 두 엘리먼트는 부모-자식 관계이다.

const h1 = document.createElement("h1") // (1)
const header = document.createElement("header") // (2)
header.appendChild(h1) // (3)

npx lite-server --baseDir ./

• (1): 엘리먼트 h1을 만든다.
• (2): h1을 자식으로 가질 header 엘리먼트도 만든다.
• (3): 그리고 나서 appendChild() 함수를 이용해 h1을 header의 자식 엘리먼트로 만들었다.
• 트리 형태의 웹 문서 구조상 이런 코드는 늘어나기 마련이다.
• 문제는 UI를 나타내는 코드가 읽기 어렵다는 것이다.
• 코드를 유심히 들여다 봐야만 UI를 가늠할 수 있다.
• 그래서 대안으로 나오는 것이 템플릿 언어이다.