빈 입력을 막고 안내하기

이번 단계에서 만들 동작

할 일 입력창에 아무것도 입력하지 않거나 공백만 입력한 뒤 추가 버튼을 누르면 안내 문구가 나타납니다. 글자를 입력하면 앞뒤 공백을 제거하고 안내 문구를 지운 뒤, 정리한 값을 콘솔에 표시합니다. 실제 목록 추가는 다음 강의에서 만듭니다.

아래 캡처는 버튼을 누르기 전의 초기 화면입니다. 유효한 입력은 화면의 목록이 아니라 브라우저 개발자 도구의 콘솔에 표시됩니다.

앞 강의를 보지 않았어도 실습할 수 있도록 필요한 파일을 모두 담았습니다. 같은 폴더에 index.html, style.css, script.js를 만들고 각각의 코드를 저장하세요.

시작 화면 준비하기

index.html에는 입력창, 버튼, 안내 문구를 넣을 자리와 빈 목록을 준비합니다. script 태그는 문서 끝에 두어 화면 요소를 먼저 읽은 뒤 JavaScript가 실행되도록 합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>나의 할 일</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="todo-app">
    <h1>나의 할 일</h1>
    <label for="todo-input">할 일</label>
    <div class="input-row">
      <input id="todo-input" type="text" placeholder="할 일을 입력하세요">
      <button id="add-button" type="button">추가</button>
    </div>
    <p id="message" role="status"></p>
    <ul id="todo-list"></ul>
  </main>
  <script src="script.js"></script>
</body>
</html>

안내 문구를 넣을 p 요소는 처음에는 비어 있습니다. role="status"는 내용이 바뀌었을 때 보조 기술이 그 변화를 알리는 데 도움이 됩니다. ul은 다음 강의에서 항목을 추가할 자리입니다.

style.css에는 화면을 읽기 쉽게 꾸미는 스타일을 넣습니다.

body {
  margin: 0;
  padding: 32px 16px;
  background: #f1f5f9;
  color: #1e293b;
  font-family: sans-serif;
}

.todo-app {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
  background: white;
  border-radius: 12px;
}

label {
  display: block;
  margin-bottom: 8px;
}

.input-row {
  display: flex;
  gap: 8px;
}

input {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  font: inherit;
}

button {
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: white;
  font: inherit;
  cursor: pointer;
}

#message {
  min-height: 1.5em;
  color: #b91c1c;
}

입력값을 검사하기

script.js에 다음 코드를 저장하세요. 앞 단계에서 배운 요소 선택과 클릭 이벤트에 입력 검사와 안내 문구 처리를 더한 전체 코드입니다.

const todoInput = document.querySelector('#todo-input');
const addButton = document.querySelector('#add-button');
const message = document.querySelector('#message');

addButton.addEventListener('click', function () {
  const todoText = todoInput.value.trim();

  if (todoText === '') {
    message.textContent = '할 일을 입력해 주세요.';
    return;
  }

  message.textContent = '';
  console.log('검증한 할 일:', todoText);
});

todoInput.value는 클릭한 순간 입력창에 들어 있는 문자열입니다. 여기에 trim()을 붙이면 문자열 앞뒤의 공백을 제거한 새 문자열을 얻습니다. 예를 들어 " 책 읽기 "는 "책 읽기"가 됩니다. 글자 사이의 공백은 그대로 남습니다. trim()은 입력창에 보이는 값을 직접 바꾸지는 않습니다.

공백만 입력했다면 trim()의 결과는 빈 문자열 ''입니다. if (todoText === '')는 이 빈 문자열인지 확인합니다. 조건이 참이면 안내 문구를 넣고 return으로 클릭 처리 함수를 끝냅니다. 따라서 그 아래의 콘솔 출력은 실행되지 않습니다.

값이 비어 있지 않으면 조건문을 지나 message.textContent = ''가 실행됩니다. 이전에 표시한 안내 문구를 지우기 위한 코드입니다. 이어서 정리한 todoText를 콘솔에 표시합니다. 이 변수는 다음 강의에서 목록 항목을 만들 때 사용할 값입니다.

직접 확인하기

세 파일을 저장한 뒤 index.html을 브라우저에서 열고 개발자 도구의 콘솔을 확인하세요.

1. 입력창을 비운 채 추가를 누릅니다. 할 일을 입력해 주세요.라는 안내가 나타나는지 확인합니다.
2. 스페이스만 몇 번 입력하고 다시 누릅니다. 같은 안내가 나타나고 검증한 할 일이 콘솔에 출력되지 않는지 확인합니다.
3. 책 읽기 처럼 앞뒤에 공백을 넣고 누릅니다. 안내가 사라지고 콘솔에 검증한 할 일: 책 읽기가 표시되는지 확인합니다. 입력창에는 원래 입력한 내용이 남습니다.
4. 다시 입력을 지우고 버튼을 눌러 안내가 돌아오는지 확인합니다.

목록이 아직 비어 있는 것은 이번 단계의 정상적인 동작입니다. 콘솔에 아무 반응이 없다면 파일 이름과 script 경로, HTML의 id가 JavaScript 선택자와 일치하는지 확인하세요.

연습

안내 문구를 자신이 이해하기 쉬운 말로 바꿔 보세요. 빈 입력에서는 바꾼 문구가 나타나고, 유효한 입력에서는 사라지는지 확인합니다. 이어서 물 마시기 를 입력해 콘솔에 앞뒤 공백이 제거된 값이 표시되는지도 살펴보세요.