초보자를 위한 자바스크립트 #4: 입력값 다루기와 To-Do 리스트

안녕하세요, 김코딩입니다!

지난번에 반복문으로 리스트를 뿌리고 DOM으로 페이지를 바꿔봤죠? 오늘은 사용자가 입력한 값을 받아서 다루는 법과, 그걸로 간단한 To-Do 리스트를 만들어볼게요. 자바스크립트로 뭔가 실용적인 걸 만들어보는 첫걸음이에요. 같이 시작해봅시다!

1. 입력값 다루기: 사용자가 쓴 글 가져오기

웹에서 사용자가 입력한 값을 가져오려면 <input> 태그와 자바스크립트를 연결해야 해요. 간단한 예제를 볼까요?

<input id="myInput" placeholder="여기에 입력하세요">
<button id="myButton">출력</button>
<p id="result">결과가 여기 나와요</p>
<script>
    let input = document.getElementById("myInput");
    let button = document.getElementById("myButton");
    let result = document.getElementById("result");

    button.addEventListener("click", function() {
        let value = input.value; // 입력값 가져오기
        result.textContent = "입력한 값: " + value;
    });
</script>

동작: <input>에 뭔가를 입력하고 버튼을 누르면 그 내용이 <p>에 나타나요.
설명: input.value로 입력값을 가져오고, textContent로 결과를 보여줬어요.
꿀팁: placeholder는 입력창에 힌트를 보여줘서 초보자가 이해하기 쉬워요!
해보기: 위 코드를 test.html로 저장해서 브라우저에서 열고 입력해보세요.

---

2. To-Do 리스트: 할 일 추가하기

이제 입력값을 활용해서 To-Do 리스트를 만들어봅시다. 사용자가 입력한 할 일을 리스트에 추가하는 기능이에요:

<input id="taskInput" placeholder="할 일을 입력하세요">
<button id="addButton">추가</button>
<ul id="taskList"></ul>
<script>
    let input = document.getElementById("taskInput");
    let button = document.getElementById("addButton");
    let list = document.getElementById("taskList");

    button.addEventListener("click", function() {
        let task = input.value; // 입력값 가져오기
        if (task !== "") { // 빈 입력 막기
            let item = document.createElement("li"); // 새 리스트 항목
            item.textContent = task; // 할 일 추가
            list.appendChild(item); // 리스트에 붙이기
            input.value = ""; // 입력창 비우기
        }
    });
</script>

동작: 입력창에 “공부하기”를 쓰고 버튼을 누르면 리스트에 “공부하기”가 추가돼요. 입력 후 창은 깨끗해집니다.
설명: if (task !== "")는 빈 값을 추가하지 않게 막아줘요. input.value = ""로 입력창을 초기화했어요.
꿀팁: <ul>과 <li>는 리스트를 예쁘게 보여줘요. 점으로 표시되는 걸 확인해보세요!
해보기: 이 코드를 HTML 파일로 만들어서 할 일을 몇 개 추가해보세요.

---

3. 보너스: 할 일 삭제하기

리스트에 삭제 기능도 추가해볼까요? 각 할 일 옆에 “삭제” 버튼을 넣어봅시다:

<input id="taskInput" placeholder="할 일을 입력하세요">
<button id="addButton">추가</button>
<ul id="taskList"></ul>
<script>
    let input = document.getElementById("taskInput");
    let button = document.getElementById("addButton");
    let list = document.getElementById("taskList");

    button.addEventListener("click", function() {
        let task = input.value;
        if (task !== "") {
            let item = document.createElement("li");
            item.textContent = task + " ";

            let deleteButton = document.createElement("button");
            deleteButton.textContent = "삭제";
            deleteButton.addEventListener("click", function() {
                list.removeChild(item); // 항목 삭제
            });

            item.appendChild(deleteButton); // 항목에 삭제 버튼 추가
            list.appendChild(item); // 리스트에 항목 추가
            input.value = "";
        }
    });
</script>

동작: 할 일을 추가하면 옆에 “삭제” 버튼이 생기고, 누르면 그 항목이 사라져요.
설명: removeChild로 리스트에서 항목을 지웠어요. 각 항목마다 버튼을 추가했죠.
해보기: 위 코드를 실행해서 할 일을 추가하고 삭제해보세요. 진짜 To-Do 리스트 같죠?

---

4. 마무리: 이제 어디까지 갈까요?

오늘은 입력값을 받아서 To-Do 리스트를 만들고 삭제까지 해봤어요. 자바스크립트로 뭔가 쓸모 있는 걸 만들어본 기분이 들지 않나요? 이제 여러분은 사용자 입력을 다룰 수 있고, 리스트를 만들고 관리할 수 있어요! 다음 글에서는 **스타일 추가하기(CSS 연동)**나 **데이터 저장하기(localStorage)**를 배워서 이 리스트를 더 멋지게 업그레이드해볼까요? 여러분의 의견을 댓글로 기다릴게요!