[바이브코딩 HTML 웹앱 20일 챌린지] 6일차 - 버튼을 누르면 할 일이 추가되게 만들기
6일차에서는 드디어 버튼 클릭으로 할 일이 실제로 추가되게 만듭니다. 5일차에 준비한 입력창, 버튼, 목록 UI에 JavaScript를 연결해서 사용자 입력이 화면에 반영되는 첫 동작을 구현하는 날입니다.
이 단계부터 "정적인 페이지"가 아니라 "반응하는 웹앱"으로 넘어갑니다. 초보자 기준에서는 모든 문법을 완벽히 이해하려고 하기보다, 클릭 이벤트가 어떤 순서로 실행되는지 흐름을 잡는 데 집중하면 훨씬 빠르게 성장할 수 있습니다.
1. 오늘 만들 기능 소개
오늘의 목표는 입력창에 작성한 할 일을 버튼 클릭 한 번으로 목록에 추가하는 것입니다. 기능 흐름은 간단합니다. 입력값 가져오기 → 빈 값 검사 → 목록 항목 생성 → 화면에 붙이기 순서로 진행합니다. 이 네 단계를 익히면 이후 완료 체크, 삭제, 저장 기능도 같은 패턴으로 확장할 수 있습니다.
특히 "입력값 검증"을 함께 넣는 것이 중요합니다. 빈 문자열이 들어오면 목록이 지저분해지고 사용자 경험이 나빠지므로, 처음부터 기본 검증을 넣어두면 앱 완성도가 확 올라갑니다.
2. AI에게 요청할 프롬프트
오늘은 AI에게 이벤트 흐름을 단계적으로 요청하는 게 핵심입니다. 단순히 "코드 짜줘"보다 현재 HTML id를 함께 전달하면 정확도가 높아집니다.
하루 관리 웹앱 6일차 작업이야.
HTML에는 todoInput, addTodoBtn, todoList가 있어.
addTodoBtn 클릭 시 입력값을 읽어 li로 todoList에 추가하는 script.js 코드를 작성해줘.
빈 입력은 추가되지 않게 처리하고, 추가 후 input을 비워줘.AI 결과를 받은 뒤에는 그대로 붙여 넣기보다, 변수 이름과 내 HTML id가 정확히 일치하는지 먼저 확인하세요. 이 한 번의 점검이 디버깅 시간을 크게 줄여줍니다.
3. 코드 작성과 실행 과정
먼저 `script.js`에서 입력창, 버튼, 목록 요소를 선택합니다. 그다음 버튼에 클릭 이벤트를 연결하고, 이벤트 함수 안에서 `input.value`를 읽어 공백 제거(`trim`) 후 검사합니다. 값이 유효하면 `li`를 생성해 텍스트를 넣고 목록(`ul`)에 `appendChild`로 추가합니다.
| 단계 | 코드 동작 | 실수 방지 포인트 |
|---|---|---|
| 요소 선택 | input/button/ul 변수 선언 | id 오타 확인 |
| 이벤트 연결 | 버튼 클릭 시 함수 실행 | 파일 연결(script src) 확인 |
| 할 일 추가 | li 생성 후 목록에 삽입 | 빈 값 차단 및 input 초기화 |
실행 확인은 간단합니다. 입력창에 "물 마시기"를 입력하고 추가 버튼을 눌렀을 때 목록에 새 항목이 보이면 성공입니다. 직접 바꿔보기 미션으로 Enter 키 입력 시에도 추가되게 확장해보세요. 같은 동작을 키보드 이벤트로 연결하는 연습이 다음 단계에 큰 도움이 됩니다.
4. 코드 이해하기
오늘 꼭 이해할 개념은 "이벤트 기반 실행"입니다. JavaScript 코드는 페이지가 열리는 순간 전부 동작하는 것이 아니라, 사용자가 버튼을 눌렀을 때 특정 함수가 실행되도록 연결됩니다.
또 `trim()`의 역할을 기억해두세요. 공백만 입력해도 글자로 인식되는 문제를 막아주기 때문에 실제 서비스에서도 거의 항상 쓰이는 기본 방어 코드입니다. 작은 검증 하나가 사용자 경험과 코드 안정성을 동시에 올려줍니다.
5. 오늘 만든 내용 정리
오늘은 버튼 클릭 이벤트를 연결해 입력한 할 일이 목록에 추가되도록 만들었습니다. 이로써 웹앱이 사용자 입력에 반응하기 시작했고, 이후 기능(완료 체크, 삭제, 저장)을 붙일 수 있는 핵심 기반이 완성되었습니다. 다음 7일차에서는 추가된 항목을 완료 처리하거나 삭제하는 기능으로 앱 사용성을 더 높여보겠습니다.
6. 자주 묻는 질문
Q1. 버튼을 눌러도 목록에 아무것도 추가되지 않아요.
가장 먼저 `script.js`가 HTML에 연결됐는지 확인해보세요. 그다음 `todoInput`, `addTodoBtn`, `todoList` id 철자가 코드와 같은지 점검하면 대부분 해결됩니다.
Q2. 공백 입력도 추가돼요. 왜 그런가요?
입력값을 검사할 때 `trim()`을 사용하지 않았을 가능성이 큽니다. `input.value.trim()`으로 공백을 제거한 뒤 빈 문자열인지 확인해보세요.
Q3. 추가 후 입력창을 자동으로 비울 수 있나요?
가능합니다. 항목 추가가 끝난 뒤 `input.value = "";`를 넣으면 됩니다. 필요하면 `input.focus()`까지 추가해 연속 입력 UX를 더 좋게 만들 수 있습니다.