웹 프로젝트 기초집LESSON 10

DOM 조작: 프로젝트 카드를 데이터로 생성하고 갱신하기

난이도초급

예상 시간45분

선수지식9강 JavaScript와 이벤트

10강. DOM 조작: 프로젝트 카드를 데이터로 생성하고 갱신하기

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

HTML 카드를 복사해 늘리면 같은 정보가 모달과 필터에도 중복됩니다. 프로젝트 데이터를 한곳에 두고 카드 UI를 생성합니다.

2. 학습 목표

3. 핵심 개념

데이터는 제목, 종류, 기술, 설명, 이미지, 링크를 보관하고 렌더 함수는 이를 DOM 요소로 바꿉니다. textContent는 문자열을 HTML로 해석하지 않아 안전합니다. 카드가 바뀔 때 문서 전체를 다시 검색하지 않고 전용 컨테이너만 교체합니다.

4. 단계별 실습

HTML · 프로젝트 섹션 내부 카드들을 교체

game-dev-portfolio/index.html
<div id="projectGrid" class="project-grid" aria-live="polite"></div>

JavaScript · 파일 경로: js/app.js에 추가

game-dev-portfolio/js/app.js
const projects = [
  {id: 'parcel-rush', type: 'unity', title: 'Parcel Rush', tech: ['Unity', 'C#'], description: '2D 택배 분류 게임', image: './assets/images/parcel-rush.webp', url: 'https://example.com/parcel-rush'},
  {id: 'last-arena', type: 'unreal', title: 'Last Arena', tech: ['Unreal', 'C++'], description: '탑다운 생존 게임', image: './assets/images/last-arena.webp', url: 'https://example.com/last-arena'},
  {id: 'ai-patrol', type: 'unreal', title: 'AI Patrol Lab', tech: ['Unreal', 'AI'], description: '행동 트리 실험', image: './assets/images/ai-patrol.webp', url: 'https://example.com/ai-patrol'},
];

const projectGrid = document.querySelector('#projectGrid');

function createProjectCard(project) {
  const article = document.createElement('article');
  article.className = 'project-card';
  article.dataset.projectId = project.id;

  const title = document.createElement('h3');
  title.textContent = project.title;
  const description = document.createElement('p');
  description.textContent = project.description;
  const tech = document.createElement('p');
  tech.textContent = project.tech.join(' · ');
  const button = document.createElement('button');
  button.type = 'button';
  button.dataset.action = 'open-project';
  button.textContent = `${project.title} 상세 보기`;
  article.append(title, description, tech, button);
  return article;
}

function renderProjects(items) {
  const fragment = document.createDocumentFragment();
  items.forEach((project) => fragment.append(createProjectCard(project)));
  projectGrid.replaceChildren(fragment);
}

renderProjects(projects);

개발자 도구 확인: Elements에서 카드가 세 개 생성되고 각 data-project-id가 다른지 확인합니다. Console에서 projects.length와 카드 수가 모두 3인지 비교합니다.

5. 코드가 동작하는 이유

배열은 프로젝트의 단일 원본이고 map 대신 이 예제의 forEach가 각 DOM 카드를 Fragment에 넣습니다. replaceChildren은 프로젝트 그리드만 교체하므로 문서 전체를 다시 만들지 않습니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ