jQuery todo 리스트 페이지 동적 화면 적용

JSON

• Javascript Object Notation 의 약자

• 자바스크립트 객체를 자바스크립트 외부로 전송하기 위해 문자열 형태로 표현

• 데이터가 간결하고 사람이 이해하기 쉬움

• JSON.parse 를 이용해 JSON 을 자바스크립트 객체로 변환

• JSON.stringify 를 이용해 자바스크립트 객체를 JSON 으로 변환

Data 어트리뷰트

• HTML 엘리먼트에 데이터를 저장
• $().data(‘key’, ‘value’) 로 값 저장
• $().data(‘key’) 로 값 접근

---

1. Todo 리스트가 갖춰야 할 기능

1. 할 일을 입력할 수 있어야 한다.

2. 입력된 할 일을 목록에 표시해야 한다.

3. 삭제 버튼으로 항목을 제거할 수 있어야 한다.

4.체크박스를 이용해 완료 상태를 표시할 수 있어야 한다.

Todo 앱은 이 네 가지 기능을 중심으로 설계된다.

2. Todo 리스트 기본 HTML 구조

PDF의 HTML 예시는 아래와 같은 형태다.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="./todo.css" />

<div class="container">
    <div class="title"><h1>Todo list</h1></div>
    <div class="contents">
        <div class="input-div">
            <input type="text" id="inputBox" />
            <button id="addButton">추가하기</button>
        </div>

        <ul>
            <li>
                <input type="checkbox" id="checkBox" />
                예시 할 일
                <button id="deleteButton">X</button>
            </li>
        </ul>
    </div>
</div>

<script src="./todo.js"></script>

여기서 핵심 요소는 다음과 같다.

• 입력창 (inputBox): 할 일 텍스트 입력

• 추가 버튼 (addButton): 새 항목을 목록에 추가

• 리스트 (ul): 여러 개의 할 일 항목을 담는 컨테이너

• 항목 (li): 체크박스 + 텍스트 + 삭제 버튼

이 구조를 기준으로 실제 기능을 jQuery로 붙이게 된다.

3. JSON 기본 개념 — 왜 필요한가?

Todo 데이터를 저장하려면 객체 형태로 다루는 것이 가장 편하다.
이를 위해 수업에서는 JSON을 먼저 다룬다.

• JSON.stringify

객체 → JSON 문자열
(localStorage에 저장할 때 자주 사용)

• JSON.parse

JSON 문자열 → 객체
(저장된 데이터를 다시 가져올 때 사용)

예시 코드:

var obj = { a: "JSON", b: "NOSJ", arr: [1, 2, "test"] };

var json = JSON.stringify(obj);
var newObj = JSON.parse(json);

➡ Todo 데이터를 구조적으로 다루기 위한 기본 준비 단계다.

---

4. Todo 데이터를 저장할 객체 만들기

Todo 항목은 다음과 같은 객체에 저장된다.

var todos = {};

Todo를 추가하면 다음과 같이 저장된다.

todos["자바스크립트 공부하기"] = false; // false = 완료 안됨

이 기능을 구현한 코드(강의 중 단계 화면):

$("#addButton").click(function () {
    var text = $("#inputBox").val();
    todos[text] = false;
    $("#inputBox").val("");    // 입력창 비우기
    console.log(todos);        // 현재 todos 출력
});

➡ 이 코드는 “데이터 저장”만 구현한 초기 단계이다.
화면에는 아직 항목이 나타나지 않는다.

---

5. data() 속성 — HTML 요소에 데이터 저장하기

Todo 항목을 클릭했을 때 어떤 항목인지 알아야 삭제/수정이 가능하다.
이를 위해 jQuery의 .data() 기능을 사용한다.

예시:

li.data('id', student.id);
alert( el.data('id') );

➡ Data attribute는 “HTML 요소와 자바스크립트 데이터를 연결하는 기능”이다.
Todo에서도 각 li에 텍스트나 key 값을 저장하는 데 사용된다.

---

6. Todo 항목을 화면에 추가하기

이제 입력된 텍스트를 실제

요소로 만들어 리스트에 붙인다.

$("#addButton").click(function () {
    var text = $("#inputBox").val();
    todos[text] = false;

    $(".contents ul").append(liTemplate(text));
});

여기서 liTemplate(text)는 새로운 li를 HTML 형태로 만들어 반환하는 함수다.

예시:

function liTemplate(text) {
    return `
        <li data-value="${text}">
            <input type="checkbox" />
            ${text}
            <button class="deleteButton">X</button>
        </li>
    `;
}

➡ “데이터 → 화면 표시” 로직이 완성되는 단계이다.

---

7. 클릭 이벤트 상세 처리 (삭제 / 체크)

Todo 항목 하나 안에는

• 체크박스

• 삭제 버튼

• 텍스트

3가지 요소가 들어 있다.
클릭한 요소에 따라 동작이 달라져야 한다.

PDF의 주요 코드:

li.click(function(event) {
    var el = $(event.target);   // 클릭한 실제 요소

    if (el.is("button")) {
        // 삭제 버튼
        delete todos[text];
        $(`li[data-value='${text}']`).remove();
    } 
    else if (el.is("input[type='checkbox']")) {
        var isChecked = el.is(":checked");

        if (isChecked) {
            $(`li[data-value='${text}']`).addClass("checked");
            todos[text] = true;
        } else {
            $(`li[data-value='${text}']`).removeClass("checked");
            todos[text] = false;
        }
    }
});

이 코드가 하는 일:

• 삭제 버튼 클릭

  • 객체에서도 삭제

  • HTML에서도 제거

• 체크박스 클릭

  • 체크되면 .checked 클래스 추가

  • 체크 해제하면 .checked 제거

  • todos[text] 값 true/false로 업데이트

➡ 이 부분이 Todo 기능 핵심 중의 핵심이다

---

8. 완료(checked) 스타일 적용

체크된 항목을 시각적으로 구분하기 위해 CSS를 적용한다.

.checked {
    color: #aaa;
    text-decoration: line-through;
}

➡ 체크 O → 회색 + 취소선
➡ 체크 X → 원래 상태