Task 01 Task 01 기능 연결하기 실습 가이드
📥 실습 입력 (Input)
- •
day7_meeting_notes.md(회의록)
💾 실습 출력 (Output)
- •
day7_connected_feature.html
1. 스토리 및 실습 배경
한 주니어 기획자가 로그인 화면과 예약 목록 화면 프로토타입을 완성했습니다. 하지만 회의 때 대표님이 로그인 버튼을 누르자 아무 반응도 일어나지 않고 정적 화면만 덩그러니 유지되었습니다. "화면은 예쁜데, 클릭하면 다음으로 넘어가지 않네요. 실제 예약 데이터가 저장되고 회원 정보가 세션에 기록되는 흐름은 언제 연결되나요?"라는 피드백을 듣고, 화면 구성과 데이터 제어 로직을 엮는 연동 작업이 시급하다는 것을 깨달았습니다.
이번 실습에서는 Codex AI를 활용하여 정적인 로그인 폼과 예약 등록 카드 컴포넌트에 이벤트 리스너(Click, Submit Event)를 달고, 데이터 저장소(Local Storage 등) 및 가상 API 함수 호출을 유기적으로 엮어 화면이 클릭 반응 및 데이터 적재 동작을 정상적으로 수행하도록 연결하는 방법을 학습합니다.
2. 학습 목표
- HTML 엘리먼트와 JavaScript 이벤트(Event Listener)를 적절히 연결할 수 있다.
- 사용자가 입력 폼에 기재한 데이터를 수집하여 가상 API 또는 스토리지에 적재할 수 있다.
- AI의 제안을 참고하여 기능 연결 중 누락되거나 빠진 예외 이벤트 처리 단계를 자가 보완할 수 있다.
🛠️ 실제 따라 하기 실습 가이드
- 실습용 파일 생성: 아래 다운로드 버튼을 눌러
day7_meeting_notes.md파일을automation/폴더 내에 저장합니다. - Codex 기능 조립 위임: Codex Client 프롬프트 입력창에 아래 **Codex 요청 프롬프트**를 전달하여 로직 연동을 지시합니다.
- 데이터 적재 확인: 가입 완료 시 브라우저 내 경고 메시지가 정상 출력되는지 보고, 개발자 도구의 Application -> LocalStorage 탭에 입력값이 올바르게 동기화되는지 검증합니다.
실습 자료 다운로드
Codex 요청 프롬프트
Task 01 Prompt
제공된 day7_unconnected_feature.html의 회원가입 화면 코드에 JavaScript 기능을 연결하려고 합니다. 1) 가입 완료 버튼 클릭 시 입력값 유효성을 검사하고, 2) 브라우저 로컬 스토리지에 정보를 저장하며, 3) 성공 시 대시보드 화면으로 이동하는 연동 스크립트를 작성해 주세요. 누락된 취소 버튼 반응이나 중복 가입 체크 로직도 함께 제안해 주세요.
4. 결과물 예시
Codex는 회의 기록을 분석해 아래와 같이 정규화된 데이터 엔티티 매핑 및 Mermaid ERD 스크립트를 출력합니다.
| 파일명 | 역할 | 주요 컴포넌트 | 저장 형태 |
|---|---|---|---|
| day7_connected_feature.html | 가입 폼 제출 핸들링 및 검증 | signup-form, submit-btn | LocalStorage (JSON 포맷) |
5. AI 활용 포인트
- 동작 흐름 가이드: 화면 단추가 눌렸을 때 브라우저 백그라운드에서 일어나는 상태 변경 단계를 순차적 알고리즘으로 도출합니다.
- 보조 분기 감지: 가입 성공 처리뿐 아니라, 사용자가 실수로 빈 칸을 남겨둔 채 제출 버튼을 연타하는 경우 등의 '유효성 체크' 구문을 선제 제안합니다.