바로 표시되지 않는 재사용 DOM 구조를 template에 보관합니다.
template 안의 콘텐츠는 페이지 로드 때 렌더링되거나 실행되지 않습니다. JavaScript에서 template.content를 복제한 뒤 필요한 값을 넣어 문서에 추가합니다. 같은 카드 구조를 문자열로 반복 조립하는 것보다 요소를 안전하게 선택하고 수정하기 쉽습니다.
카드 추가를 누를 때마다 template.content를 cloneNode(true)로 깊은 복사한 뒤, 복사본 안의 h2와 p에 강좌 제목과 설명을 넣어 cardList에 붙입니다. index % courses.length 때문에 세 번째 클릭에서는 다시 HTML 카드가 만들어져 HTML과 CSS가 번갈아 쌓입니다. 원본 template은 한 번도 수정되지 않으므로 몇 번을 눌러도 빈 틀에서 시작합니다.
template.content는 DocumentFragment라서 append하는 순간 안의 자식들이 cardList로 옮겨지고 조각 자체는 비게 됩니다. 그래서 복제 없이 content를 바로 쓰면 두 번째 클릭부터는 조각 안에 h2가 없어 querySelector가 null을 돌려주고 오류가 납니다. template 안의 img도 복제본이 문서에 들어가기 전까지는 내려받지 않습니다.
사용자 입력을 innerHTML 문자열에 바로 합치면 HTML 삽입 위험이 있습니다. template을 복제하고 textContent로 값을 넣으세요.
직접 바꿔보세요강좌 배열에 JavaScript를 추가하고 버튼을 눌러 세 번째 카드를 만드세요.