22강. DOM으로 HTML 변경하기

이번 강의의 결과물은 JavaScript 객체 배열을 읽어 프로젝트 카드 요소를 만들고 페이지에 표시하는 동적 목록입니다.

?1. 이번 강의에서 해결할 문제

프로젝트 데이터를 JavaScript 객체로 관리해도 HTML 카드를 별도로 반복 작성하면 데이터와 화면이 쉽게 달라집니다. 객체 배열을 기준으로 DOM 요소를 생성해 한 곳의 데이터가 화면을 결정하도록 만듭니다.

✓학습 목표

• 프로젝트 데이터를 JavaScript 객체로 관리해도 HTML 카드를 별도로 반복 작성하면 데이터와 화면이 쉽게 달라집니다. 객체 배열을 기준으로 DOM 요소를 생성해 한 곳의 데이터가 화면을 결정하도록 만듭니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

DOM은 브라우저가 HTML 문서를 객체 트리로 표현한 모델입니다.

• document.querySelector(): CSS 선택자와 일치하는 첫 요소 조회
• document.createElement(): 새 요소 객체 생성
• textContent: 요소의 텍스트 설정
• className: 요소의 class 속성 설정
• append(): 부모의 마지막 자식으로 노드 추가

JavaScript 객체 → DOM 요소 생성 → 부모에 추가 → 화면 갱신

DOM 표준은 문서를 부모와 자식이 있는 노드 트리로 정의하고 요소 조회·생성·추가 API를 제공합니다. WHATWG DOM 표준

</>3. 코드 예시

파일명: web-basics/portfolio/index.html

<section id="projects">
  <h2>프로젝트</h2>
  <p id="project-count"></p>
  <div class="project-grid" id="project-list"></div>
</section>

파일명: web-basics/portfolio/js/main.js

const projects = [
  {
    title: "게임플레이 기능 프로젝트",
    category: "game",
    description: "Unreal C++로 상호작용 기능을 구현합니다.",
  },
  {
    title: "반응형 포트폴리오",
    category: "web",
    description: "HTML과 CSS로 여러 화면 크기에 대응합니다.",
  },
];

function createProjectCard(project) {
  const article = document.createElement("article");
  const title = document.createElement("h3");
  const description = document.createElement("p");

  article.className = "project-card";
  title.textContent = project.title;
  description.textContent = project.description;

  article.append(title, description);
  return article;
}

const projectList = document.querySelector("#project-list");
const projectCount = document.querySelector("#project-count");

if (projectList && projectCount) {
  projectCount.textContent = `총 ${projects.length}개의 프로젝트`;

  for (const project of projects) {
    const card = createProjectCard(project);
    projectList.append(card);
  }
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. querySelector가 기존 HTML의 출력 위치를 찾습니다.
2. 카드 함수는 메모리에 article, h3, p 요소를 만듭니다.
3. textContent가 객체 값을 텍스트 노드로 설정합니다.
4. 제목과 설명을 article에 추가한 뒤 완성된 article을 반환합니다.
5. 반복문이 프로젝트 수만큼 함수를 호출하고 출력 영역에 카드를 추가합니다.
6. 데이터 배열에 객체를 추가하면 같은 렌더링 과정으로 카드가 하나 더 생성됩니다.

데이터를 단순 텍스트로 표시할 때 innerHTML 문자열보다 textContent와 createElement를 사용하면 구조를 단계별로 확인하기 쉽고 입력값이 HTML로 해석되는 위험도 줄어듭니다.

!5. 자주 하는 실수

• HTML에 없는 선택자를 조회해 null을 얻음
• #project-list에서 #을 빠뜨림
• 요소를 만들기만 하고 부모에 append하지 않음
• 같은 함수를 여러 번 실행해 카드가 중복 추가됨
• 데이터 문자열을 검토 없이 innerHTML에 넣음
• 스크립트가 HTML보다 먼저 실행되어 요소를 찾지 못함

✎6. 짧은 실습 과제

1. 프로젝트 출력용 #project-list를 HTML에 추가합니다.
2. 객체 배열에서 카드 두 개 이상을 생성합니다.
3. 프로젝트 개수를 #project-count에 표시합니다.
4. 데이터 배열에 새 객체를 하나 추가하고 HTML 수정 없이 카드가 늘어나는지 확인합니다.
5. 선택자 철자를 일부러 틀려 Console 결과를 확인한 뒤 복구합니다.
6. Elements 탭에서 JavaScript가 추가한 article 구조를 확인합니다.

완료 기준은 프로젝트 내용을 HTML에 중복 작성하지 않고 JavaScript 데이터만 변경해 카드 목록을 갱신하는 것입니다.

?7. 이해 점검 질문 3개

1. DOM은 HTML 원문과 어떤 관계에 있나요?
2. createElement만 호출하면 요소가 화면에 나타나지 않는 이유는 무엇인가요?
3. 단순 데이터 출력에 textContent를 사용하면 어떤 장점이 있나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.