React로 페스티벌 일정 만들기는 React 기초를 이미 익힌 학습자를 위한 실습 프로젝트입니다. 준비된 페스티벌 목록으로 개인의 하루 계획을 만듭니다. 행사를 필터링하고 선택을 유지하며 새 후보가 이미 선택한 행사와 충돌하는 이유를 설명합니다.
두 개의 가이드 실습은 시간이 겹치지 않는 정상적인 두 행사를 선택한 뒤 충돌하는 후보를 살펴보는 순서로 시작합니다. 이어서 일정에서 파생되는 데이터, 시간 검사, 로컬 저장을 연결합니다. 독립 챌린지에서는 같은 방식을 행사, 무대, ID가 다른 페스티벌 하루에 적용합니다. 각 실습은 자체 시작 프로젝트와 데이터를 제공합니다.
학습 내용
과정을 마치면 다음을 수행할 수 있습니다.
- 선택한 행사 ID를 단일 상태 기준으로 유지하고 현재 목록에서 해당 레코드, 선택 개수, 총 소요 시간을 파생합니다.
- 기존 선택을 삭제하지 않고 화면의 목록을 필터링하며 제목이 같은 행사도 안정적인 ID로 구분합니다.
- 반열린 시간 구간을 검사해 정확히 이어지는 행사는 허용하고 실제로 겹치는 행사는 구체적인 충돌 대상을 알려 주며 거부하고, 선택을 제거한 뒤 다시 추가할 수 있게 합니다.
- 과정 전용
localStorage키에 ID 목록만 저장하고 아직 유효한 선택을 복원하며, 없어진 이전 ID를 알리면서 유효한 선택은 보존합니다. - 잘못된 JSON에서 복구하고 필요한 최소한의
useEffect로직으로 실습이 이용 가능한 동안 같은 브라우저와 오리진에서 새로고침 후 선택을 복원합니다.
추천 대상
서로 관련 없는 목록을 만드는 데서 나아가 유용한 개인 일정을 중심으로 React 컴포넌트를 함께 동작하게 만들고 싶은 학습자에게 적합합니다.
선수 지식: 기본 터미널 및 경로 사용, 파일 편집, HTML/CSS, JavaScript 배열·객체·함수, React 컴포넌트, JSX, props, useState를 사용한 state, 이벤트, 조건부 렌더링, map/filter, 안정적인 목록 key와 제어 폼을 알아야 합니다. 가이드 실습에서 파생 상태, ID 기반 선택, 간단한 구간 비교, 필요한 useEffect 및 localStorage 개념을 배운 뒤 챌린지에 적용합니다. React를 처음 소개하는 과정은 아닙니다.
학습 환경: LabEx는 준비된 브라우저 React 프로젝트, 의존성, 미리보기, 합성 페스티벌 데이터를 제공합니다. 학습자는 프런트엔드 기능을 구현합니다. 웹사이트 레이블과 실행 출력은 영어로 유지되며, 번역된 교재가 번역된 UI를 의미하지는 않습니다.
자주 묻는 질문
어떤 경우에 시간이 충돌하나요?
모든 행사는 같은 날짜의 현지 시간을 분 단위로 사용합니다. 한 행사가 끝나는 시각에 다른 행사가 바로 시작해도 되지만 실제로 겹치면 거부됩니다. 자정을 넘기거나 여러 시간대에 걸친 일정과 무대 사이 이동 시간 계산은 다루지 않습니다.
다른 기기나 실습에도 일정을 가져갈 수 있나요?
아니요. 복원 범위는 같은 브라우저, 같은 실제 오리진, 계속 이용 가능한 실습 환경으로 제한되며 브라우저가 저장소를 허용해야 합니다. 브라우저 정책이 저장소를 거부하면 선택은 해당 방문 중 메모리에서만 사용할 수 있고 새로고침 후 복원은 보장되지 않습니다. localStorage는 계정이나 서버 백업이 아니며 영구 저장이나 VM 간 저장을 보장하지 않습니다.
완전한 페스티벌 예약 서비스를 만드나요?
아니요. 준비된 합성 데이터로 개인 계획을 만듭니다. 백엔드, 계정, 지도, 드래그 앤 드롭, 동선 최적화, 동적 서버 동기화는 과정 범위 밖입니다.
