컴포넌트와 상태의 소유권

동작하는 앱을 ESM 컴포넌트로 분리하고 상태 흐름을 명시합니다.

진도 0%

레슨

m06 미션 solution 전체를 이미 복사한 starter에서 ESM 진입점과 컴포넌트로 전환합니다. 기존 회귀 파일은 비교용으로 보존하며 실제 results.html은 boot.mjs 한 경로로 초기화합니다.

components.mjs의 카드 제목·폼 조건 전달·상태별 재시도 표시 TODO를 완성합니다. 입력 불변과 안전한 textContent 표시를 유지합니다.
data·api·request-control·dom·results ESM 의존 방향을 STATE.md와 대조하고 카드가 부모 상태를 수정하지 않는 이유를 설명합니다.
검색 조건과 선택 id는 initApp의 route가 소유하고 결과 수·선택 객체는 응답에서 계산합니다. 폼 제출은 조건 콜백으로 전달하고 dispose에서 리스너를 정리합니다.
npm ci 후 npm test로 기존 회귀와 신규 ESM 흐름을 검사합니다. 제공된 mock만 쓰며 README-M07.md의 실제 브라우저 관찰은 별도 기록합니다.

기존 HTML·CSS·검색·DOM·API·요청 순서 검사가 유지됩니다. ESM 대상에도 상세 복귀·재시도·B→A 완료·249/250ms·이탈 정리 검사가 통과합니다.
EventCard는 입력 불변·안전 제목·링크를 지키고 SearchForm은 한 번 조건을 전달하며 dispose 후 호출하지 않습니다. StatusPanel은 오류→로딩→성공 전환에서 이전 표시를 제거합니다.
STATE.md는 q·region·id와 응답 배열·composing·요청 controller의 소유자를 명시하고 count를 중복 저장하지 않습니다.
실제 브라우저 MIME·IME·키보드·모바일·확대·캐시 복원 관찰은 자동 모델과 구분합니다.

npm test

모범 답안