AI랑 같이하는 코딩

1. 입력값이 비어 보이는 대표 상황

폼 기능을 만들 때 "분명 입력했는데 값이 안 들어온다"는 문제는 정말 자주 발생합니다. 콘솔로 찍으면 빈 문자열이 나오거나, 이전 값이 남아 있거나, 아예 undefined가 나오는 식입니다. 이때 대부분은 입력창 자체 문제가 아니라 이벤트 시점이나 요소 선택 방식에서 실수가 생긴 경우가 많습니다.

핵심은 어떤 요소에서, 어떤 시점에, 어떤 속성으로 값을 읽는지를 명확히 분리해 보는 것입니다. 입력창 값을 다룰 때는 value, textContent, innerText를 혼동하기 쉽고, submit 이벤트 기본 동작 때문에 값 확인 전에 페이지가 리로드되는 경우도 있습니다. 순서대로 점검하면 복잡해 보이는 문제도 빠르게 풀립니다.

2. 먼저 확인할 핵심 체크리스트

아래 항목은 입력값 미수집 이슈에서 실제로 가장 많이 걸리는 지점들입니다.

3. 단계별 디버깅 순서

1) 요소가 맞게 선택됐는지 먼저 확인

const input = document.querySelector('#todoInput')처럼 선택한 뒤 바로 console.log(input)을 찍어 실제 엘리먼트가 잡히는지 확인하세요. null이라면 이후 모든 value 접근이 실패합니다. 이 단계에서 id 오타, 중복 id, 렌더 전 실행 문제를 빠르게 찾을 수 있습니다.

2) value를 읽는 시점을 확인

버튼 클릭 핸들러 안에서 input.value를 읽어야 하는데, 함수 바깥에서 미리 값을 고정해두면 이후 입력이 반영되지 않습니다. 즉, "실행 시점마다 최신 value를 읽는 구조"로 바꿔야 합니다. 특히 함수 시작 시점 로그를 넣어 실제 값이 언제 어떤 상태인지 추적해 보세요.

3) submit 동작과 리로드 충돌 해결

form submit 이벤트를 쓰는 경우 preventDefault가 빠지면 페이지가 즉시 리로드되어 값 처리가 중간에 끊길 수 있습니다. 입력값 저장, 검증, 렌더링이 끝난 뒤에만 초기화되도록 순서를 고정하세요. 이 흐름을 잡으면 "값이 잠깐 보였다 사라지는" 문제도 함께 해결됩니다.

4) 공백/형식 처리까지 포함해 검증

값이 들어오긴 하지만 공백만 들어오는 경우도 많습니다. trim()으로 앞뒤 공백을 제거하고 빈 문자열이면 return 하도록 분기하면 데이터 품질이 좋아집니다. 숫자 입력이 필요한 필드는 Number 변환 결과가 NaN인지 추가 확인하면 안정성이 높아집니다.

4. 입력 처리 안정화 습관

첫째, 입력 처리 함수를 "읽기 → 검증 → 저장/렌더 → 초기화" 순서로 고정하세요. 둘째, 선택자와 스토리지 키처럼 자주 재사용되는 문자열은 상수로 관리해 오타를 줄이세요. 셋째, 문제 발생 시 요소 객체, 원본 value, trim 후 value를 모두 로그로 남겨 원인을 빠르게 좁히세요.

AI에게 코드 수정을 요청할 때는 HTML input 부분, 이벤트 핸들러, 값 처리 함수 전체를 함께 제공하면 해결 정확도가 올라갑니다. 결국 입력값 이슈의 본질은 선택 정확도, 시점 제어, 처리 순서입니다.

5. 자주 묻는 질문