공유할 수 있는 검색 페이지 만들기는 HTML, CSS, JavaScript 기초를 익힌 학습자를 위한 프런트엔드 프로젝트입니다. 가상의 지역 행사 사이트 Fieldnote의 검색 페이지를 만들어, 다른 브라우저 컨텍스트에서 링크를 열어도 같은 필터, 결과 순서, 결과 페이지가 나타나도록 합니다.
두 개의 가이드 실습은 정상 작동하는 공유 화면을 사용한 뒤 URL 기반 검색 상태와 브라우저 탐색을 구현하는 순서로 진행됩니다. 독립 챌린지에서는 같은 방식을 카테고리와 페이지당 항목 수가 다른 행사 목록에 적용합니다. 각 실습은 자체 시작 파일과 데이터를 제공합니다.
학습 내용
과정을 마치면 다음을 수행할 수 있습니다.
- 준비된 행사 목록을 필터링하고 정렬하고 페이지로 나누며, 제목이 같은 행사도 각 레코드의 내용과 고유한 안정적 ID의 연결을 유지합니다.
URL과URLSearchParams로q,category,sort,page를 읽고 정규화하며 공백,&, 문자 그대로의+, 알 수 없는 값, 잘못된 페이지 번호를 처리합니다.- 제출한 필터, 화면의 컨트롤, 결과, 공유 링크를 일치시키고 결과가 없을 때와 페이지 경계를 이해하기 쉽게 표시합니다.
pushState,replaceState,popstate로 새로고침과 실제 뒤로/앞으로 탐색에서 확정한 화면을 복원하고 불필요한 방문 기록을 추가하지 않습니다.- 저장된 상태가 없는 새 브라우저 컨텍스트에서 실제 공유 링크를 열어 같은 순서의 레코드를 비교하고 현재 경로, 관련 없는 쿼리 매개변수, 프래그먼트를 보존합니다.
추천 대상
브라우저 상태, JavaScript 데이터 처리, 유용한 검색 화면을 연결하고 싶은 학습자에게 적합합니다.
선수 지식: 기본 터미널 및 경로 사용, HTML 폼, CSS 레이아웃과 보이는 포커스, JavaScript 객체·배열·함수·DOM 선택 및 조작·이벤트를 알아야 합니다. 프로젝트 파일을 편집하고 저장할 수 있어야 합니다. 가이드 실습에서 URL 인코딩, filter/sort/slice, 배열 복사, 안정적인 레코드 식별, 브라우저 기록을 배운 뒤 챌린지에 적용합니다. React나 백엔드 프로그래밍은 필요하지 않습니다.
학습 환경: LabEx는 준비된 브라우저 개발 환경, 정적 사이트, 합성 행사 데이터를 제공합니다. 학습자는 브라우저 JavaScript를 구현하고 서버는 파일만 제공합니다. 웹사이트 레이블과 실행 출력은 영어로 유지됩니다.
자주 묻는 질문
검색 백엔드나 방문자 설정 저장 기능을 만드나요?
아니요. 필터링, 정렬, 페이지 나누기는 준비된 로컬 데이터를 대상으로 브라우저에서 실행됩니다. URL이 확정한 화면 상태를 담으므로 다른 브라우저가 첫 브라우저의 저장 데이터에 의존하지 않습니다.
아직 제출하지 않은 수정 내용은 어떻게 되나요?
Search로 제출하기 전에는 컨트롤의 값이 초안 상태입니다. 새로고침하면 URL에 확정된 상태가 복원됩니다. 지나치게 제한적인 검색을 수정하고, 안내된 기본값과 페이지 번호 보정도 연습합니다. 일치하는 항목이 없는 것도 유효한 결과입니다.
이 과정에서 영구 링크를 공개할 수 있나요?
아니요. 공유는 실행 중인 허가된 실습 환경과 이용 가능한 경로 안에서만 가능합니다. 링크는 VM 수명을 연장하거나 서로 다른 실습 VM 사이의 접근을 보장하거나 페이지를 인터넷에 공개하지 않습니다. 프로덕션 배포와 완전한 접근성 인증은 과정 범위에 포함되지 않습니다.
