JavaScript 기초와 비동기

1npm create vite@latest lion-javascript -- --template vanilla2cd lion-javascript3npm install

1<main>2<h1>회원 명단</h1>3<form id="search-form">4  <label for="query">이름 검색</label>5  <input id="query" name="query" type="search">6  <button type="submit">검색</button>7</form>8<p id="status" role="status"></p>9<button id="retry" type="button" hidden>다시 불러오기</button>10<ul id="members" class="member-grid"></ul>11</main>

1import './style.css';2const form = document.querySelector('#search-form');3const input = document.querySelector('#query');4const list = document.querySelector('#members');5const status = document.querySelector('#status');6const retry = document.querySelector('#retry');7let members = [8  { id: 1, name: '가람', track: 'frontend' },9  { id: 2, name: '나래', track: 'design' },10];11
12function render() {13  const keyword = input.value.trim().toLocaleLowerCase();14  const filtered = members.filter(member =>15    member.name.toLocaleLowerCase().includes(keyword)16  );17  list.replaceChildren();18  for (const member of filtered) {19    const item = document.createElement('li');20    item.className = 'member-card';21    item.textContent = member.name + ' · ' + member.track;22    list.append(item);23  }24  status.textContent = filtered.length === 025    ? '검색 결과가 없습니다.'26    : filtered.length + '명이 있습니다.';27}28
29form.addEventListener('submit', event => {30  event.preventDefault();31  render();32});33render();

1npm run dev -- --port 4173 --strictPort

1[2  { "id": 1, "name": "가람", "track": "frontend" },3  { "id": 2, "name": "나래", "track": "design" }4]

1function parseMembers(value) {2  const tracks = new Set(['frontend', 'design', 'backend']);3  if (!Array.isArray(value) || !value.every(member =>4    member !== null && typeof member === 'object' &&5    Number.isSafeInteger(member.id) && member.id > 0 &&6    typeof member.name === 'string' && member.name.trim().length > 0 &&7    tracks.has(member.track)8  )) {9    throw new Error('명단 데이터 형식이 올바르지 않습니다.');10  }11  if (new Set(value.map(member => member.id)).size !== value.length) {12    throw new Error('명단 ID가 중복되었습니다.');13  }14  return value;15}16
17async function loadMembers() {18  retry.hidden = true;19  list.replaceChildren();20  status.textContent = '명단을 불러오는 중입니다.';21  for (const element of form.elements) element.disabled = true;22  try {23    const response = await fetch('./members.json');24    if (!response.ok) throw new Error('명단 요청 실패: ' + response.status);25    members = parseMembers(await response.json());26    render();27  } catch (error) {28    members = [];29    status.textContent = error instanceof Error ? error.message : '명단을 불러오지 못했습니다.';30    retry.hidden = false;31  } finally {32    for (const element of form.elements) element.disabled = false;33  }34}35
36retry.addEventListener('click', loadMembers);37loadMembers();