JavaScript로 행사 데이터 다루기

문법을 처음 익히며 행사 목록의 검색·필터·정렬 함수를 만듭니다.

진도 0%

레슨

앞 모듈 미션 solution의 반응형 문서와 폼을 보존하고 로컬 예시 행사 검색 함수를 결과 페이지에 연결합니다.

starter에 앞 모듈 m02 미션 solution이 포함되어 있습니다. 기존 index.html·event.html·assets/site.css와 검사·관찰 기록을 유지합니다.
assets/data.js의 normalizeQuery·filterEvents·sortUniqueEvents를 구현하고 searchEvents로 연결합니다. 표준 입력 코드와 DOM 코드를 계산 함수에 넣지 않습니다.
검색어와 이름은 공백 축소·소문자 규칙을 공유하고 지역 all 또는 정확한 코드 조건을 함께 적용합니다.
필터에 일치하는 객체 중 같은 id의 첫 객체를 보존하고 YYYY-MM-DD 날짜·숫자 id 오름차순으로 정렬합니다. 입력 배열과 객체를 수정하지 않습니다.
제공 results.html·assets/results.js가 GET q/region으로 함수를 호출해 textContent로 결과와 빈 안내를 표시합니다. 실제 네트워크·자격증명·외부 패키지는 사용하지 않습니다.

npm ci 후 npm test: 앞 모듈 HTML·CSS 계약 통과 및 데이터 검사 15개, 실패 0개. starter는 기존 계약과 일부 데이터 검사가 통과하며 검색 관련 검사가 실패합니다.
공백·비문자열·한글·영문·빈 검색·없는 지역·빈 목록·중복 첫 값·동률 숫자 id·원본 보존·동결 입력·반복 호출 검사가 통과합니다.
브라우저에서 책/부산은 마을 책 모임, BOOK/전체는 Book Fair, 없는 이름/전체는 빈 안내와 돌아가기 링크를 확인해 LAYOUT.md에 환경과 결과를 기록합니다.
기존 required 빈 제출 정책과 데이터 함수의 빈 검색 전체 정책을 구분합니다. 기존 상세/돌아가기·320px·200%·키보드 관찰을 이어 기록합니다. 자동 검사는 실제 렌더링 통과를 뜻하지 않습니다.

npm test

모범 답안