웹 프로젝트 기초집LESSON 13

필터와 정렬: 프로젝트 종류별로 목록 좁히기

난이도초급

예상 시간45분

선수지식12강 프로젝트 상세 모달

13강. 필터와 정렬: 프로젝트 종류별로 목록 좁히기

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

프로젝트가 늘어나면 방문자가 Unity와 Unreal 결과물을 빠르게 찾기 어렵습니다. 원본 배열은 보존하면서 선택된 종류에 맞는 목록만 계산합니다.

2. 학습 목표

3. 핵심 개념

필터는 조건에 맞는 새 배열을 만들고 정렬은 순서를 정합니다. 원본을 직접 변경하지 않도록 복사본에서 정렬합니다. 현재 필터는 하나의 상태 변수로 두고 렌더 함수에 전달합니다.

4. 단계별 실습

HTML · 프로젝트 제목 아래

game-dev-portfolio/index.html
<div id="projectFilters" aria-label="프로젝트 필터">
  <button type="button" data-filter="all" aria-pressed="true">전체</button>
  <button type="button" data-filter="unity" aria-pressed="false">Unity</button>
  <button type="button" data-filter="unreal" aria-pressed="false">Unreal</button>
</div>
<p id="projectStatus" aria-live="polite"></p>

JavaScript · 파일 경로: js/app.js

game-dev-portfolio/js/app.js
const projectFilters = document.querySelector('#projectFilters');
const projectStatus = document.querySelector('#projectStatus');
let activeFilter = 'all';

function updateProjectList() {
  const visible = projects
    .filter((project) => activeFilter === 'all' || project.type === activeFilter)
    .slice()
    .sort((a, b) => a.title.localeCompare(b.title, 'ko'));
  renderProjects(visible);
  projectStatus.textContent = visible.length ? `${visible.length}개 프로젝트 표시 중` : '조건에 맞는 프로젝트가 없습니다.';
}

projectFilters.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-filter]');
  if (!button) return;
  activeFilter = button.dataset.filter;
  projectFilters.querySelectorAll('button').forEach((item) => {
    item.setAttribute('aria-pressed', String(item === button));
  });
  updateProjectList();
});

updateProjectList();

slice()가 필터 결과의 복사본을 만들고 sort()가 그 복사본만 정렬합니다. 개발자 도구 확인: Console에서 activeFilter, 카드 수와 상태 문구를 비교하고 버튼 속성 중 하나만 true인지 봅니다.

5. 코드가 동작하는 이유

원본 projects는 그대로 있고 현재 상태에서 표시 배열을 매번 계산합니다. 한 갱신 함수가 카드와 결과 문구를 함께 바꾸므로 UI가 서로 어긋나지 않습니다.

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

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ