implementation-javascriptlisted

# UI JavaScript 구현 ## 적용 조건과 경계 dddjango-web의 승인된 화면 명세 안 `UI 동작 계약`에 따라 UI JS를 구현·감수한다. 이 스킬은 coder-web과 discipline-reviewer-web에 직접 주입된다. 파일·호스트 로딩은 houserules와 Coordinator가 확정한 경계를 소비하며, 계약 누락·충돌은 보고한다. 규칙·백스톱을 직접 바꿔 통과시키지 않는다. 화면의 임시 상호작용과 브라우저 API 사용법이 소관이다. Python/VM의 서버 표시 판정, 업무 검증·권한·금액 계산, HTMX 요청·응답 계약, HTML 구조·CSS 시각 값은 각 소유자에게 맡긴다. 시안에 없는 기능을 예제로부터 만들어내지 않는다. | 필요한 판단 | 소유 | |---|---| | 서버/브라우저 책임·view/section/widget 분해·swap 계약 | `architecture-web` | | 파일 트리·이름·벤더 배치·참조 격리 | `discipline-web-houserules` | | Django 템플릿·HTMX 속성·CSS·에셋·서버 코드 표기 | `implementation-ui` | | UI JS 이벤트·DOM·브라우저 API·수명 처리 | 이 스킬 | | 일반 명명·함수·중복 규율 | `discipline-cleancode` | | 호스트 설정·벤더 설치·로드 배선 | Coordinator의 승인 범위 | ## 구현·감수 순서 1. 명세의 동작이 native HTML/CSS 또는 기존 HTMX 표현만으로 충족되는지 확인한다. 충족되면 JS 파일을 만들지 않는다. 2. JS가 필요한 동작은 **기능·root·변경할 DOM/임시 상태·교체 경계·소유 자원**을 기존 명세의 UI 동작 계약 행과 구현 보고에 연결한다. 새 명세 문서를 요구하지 않는다. 같은 기능의 초기화·이벤트·정리는 한 파일에 모은다. 3. 최소 연결 방식을 고른다. 단순 동작은 한 번 설치한 이벤트 위임으로 충분하다. 인스턴스별 초기화가 필요하면 root를 포함해 발견하고, 반복 초기화에도 중복 효과가 없게 한다. 4. 교체되는 노드와 유지되는 노드를 구분한다. **자식 정리 이벤트가 왔다고 부모 기능 전체를 파괴하지 않는다.** 자원을 소유하는 root나 실제 종속 노드가 제거될 때만 해당 수명을 끝낸다. 살아 있는 root의 자식이 바뀌면 이전 참조를 계속 쓰지 않는다. 5. 늦은 비동기 완료는 현재 작업·동일 UI가 유효할 때만 반영한다. 문자열은 텍스트로 소비하고, 성공·실패·초점 상태를 실제 결과에 맞춘다. 6. 요구에 있는 초기 진입·여러 인스턴스·실제 HTMX 교체를 확인한다. 자원이 있으면 정리, 비동기가 있으면 지연·실패, 키보드 UI면 키보드 경로를 추가한다. 검수는 코드 형태가 아니라 이 동작과 소유 경계를 근거로 판정한다. ## 필요한 상세만 읽기 | 상황 | [references/final.md](references/final.md)의 절 | |---|---| | JS 필요성·기술 책임·