250313 to-do 리스트 만들기 (1)

챌린지에서 심화과제 (로컬 스토리지, 체크박스)를 추가한 글이다.

필수 조건

index.html에 있는 input 요소에 입력된 값(value)과 button 요소를 변수에 할당합니다.
새로운 li 요소를 만들고 input 요소에 입력된 값을 textContent로 갖도록 합니다.
li 요소는 클릭하면 해당 li 요소가 지워지는 delete 버튼을 가지고 있어야 합니다.
입력창은 초기화되어야 합니다.
만약 입력창에 아무것도 입력하지 않은 경우 alert로 유저에게 입력을 요청해야 합니다.
3.의 삭제버튼 만들기 🔽

const deleteBtn = document.createElement('button'); 
deleteBtn.onclick = function () {
	this.parentElement.remove(); 
};

심화 도전 과제

입력한 TO-DO가 Local Storage에 저장되어 새로 고침 후에도 유지되도록 해보세요.
할 일 항목에 완료 표시를 할 수 있는 체크박스를 추가해 보세요.
TO-DO 리스트를 드래그앤드롭으로 정렬할 수 있는 방법을 검색하고 적용해 보세요.

https://stackblitz.com/edit/vitejs-vite-cqztxjtt?embed=1&file=script.js&theme=dark

JavaScript 5일차 (67%) (forked) - StackBlitz

기본 조건 + 체크박스 기능

stackblitz.com

일단 기존 틀을 거의 건드리지 않고 기본 조건 + 심화 2번 (체크박스)까지는 해결할 수 있었다.

코드 🔽

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>할 일 목록</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="todo-container">
      <div id="inputbox">
        <input type="text" id="todo-input" placeholder="할 일을 입력하세요" />
        <button id="add-btn">추가</button>
      </div>
      <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

style.css

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0;
}

.todo-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#inputbox {
  display: flex;
  justify-content: space-between;
}

#todo-input {
  width: 70%;
  padding: 10px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#add-btn {
  width: 30%;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  white-space: nowrap;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#add-btn:hover {
  background-color: #0056b3;
}

#todo-list {
  margin-top: 20px;
}

#todo-list li {
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
}

#todo-list li > span {
  width: 100%;
  margin-left: 5px;
}

#todo-list li:last-child {
  border-bottom: none;
}

.delete-btn {
  margin-left: auto;
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

script.js

// 1. index.html에 있는 input 요소에 입력된 값(value)과 button 요소를 변수에 할당합니다.
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');
const addBtn = document.getElementById('add-btn');

// 0. 버튼을 클릭했을 때 실행되는 이벤트 함수입니다.
addBtn.addEventListener('click', function () {
  // trim() : 공백을 지워주는 함수로 value의 값으로 "     "이 들어왔을 때 등의 공백으로만 구성된 할일 추가를 방지한다. 
  if (todoInput.value.trim() !== '') {
  
    // 2. 새로운 li요소를 만들고 
    const li = document.createElement('li');
    
    // 심화2) 할 일 항목에 완료 표시를 할 수 있는 체크박스를 추가해 보세요.
    // 체크박스 추가
    const checkBtn = document.createElement('input');
    checkBtn.type = 'checkbox';
    li.append(checkBtn);
    
    // change 이벤트 : 체크박스일 때는 체크하거나 해제할 때 값이 변경된다. 
    checkBtn.addEventListener('change', function () {
      // checked : 해당 체크버튼의 속성으로 checked가 붙었을 때 
      if (checkBtn.checked) {
      	// nextElementSibling : 부모의 자식 목록에서 지정된 요소(체크버튼) 바로 뒤에 있는 요소를 반환
        this.nextElementSibling.style.textDecoration = 'line-through';
      } else {
        this.nextElementSibling.style.textDecoration = '';
      }
    });

	// 2. input 요소에 입력된 값을 textContent로 갖도록 합니다.
    // 할일 내용 추가
    const todoContent = document.createElement('span');
    todoContent.textContent = todoInput.value;
    li.append(todoContent);

    // 3. li 요소는 클릭하면 해당 li 요소가 지워지는 delete 버튼을 가지고 있어야 합니다.
    // deleteBtn 추가
    const deleteBtn = document.createElement('button');
    // 버튼에 간단하게 css 적용을 하기위해 클래스 부여
    deleteBtn.className = 'delete-btn';
    deleteBtn.textContent = '삭제';
    li.append(deleteBtn);
    deleteBtn.onclick = function () {
      // this.parentElement : 이 객체의 부모 요소 (즉 deleteBtn이 클릭된 부모 li태그)
      this.parentElement.remove();
    };

    // li를 ul(#todo-list)에추가
    todoList.append(li);

    // 4. 입력창은 초기화되어야 합니다.
    todoInput.value = '';

  
  } else {
    // 5. 만약 입력창에 아무것도 입력하지 않은 경우 alert로 유저에게 입력을 요청해야 합니다.
    alert('내용을 입력해주세요!');
    return;
  }
});

* 체크박스를 체크할 때의 이벤트는 change이다.
change 이벤트에 대해 자세한 내용은 : https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/change_event

이제 심화 1번, 로컬 스토리지를 구현하고자 하려니 코드를 좀 뜯어내야 할 필요가 생겼다.

기존 코드에서는 add-btn을 클릭한 뒤에 항목이 추가가 되고, 추가된 항목을 삭제 / 체크가 가능했다만 지금까지는 문제가 없었다. 왜냐하면 이 페이지는 어차피 새로고침 하면 내용이 전부 사라지기 때문에, 기능들을 테스트해 보려면 꼭 한 번은 할 일을 추가하기 위해 add-btn을 클릭해야 했기 때문이다.

하지만 이제 추가한 목록들을 로컬 스토리지에 저장하기, 새로고침을 해도 로컬 스토리지에 있는 내용을 불러오기를 해야 하기 때문에 함수내 내용들을 좀 나눠야 했다.

script.js 🔽

const toDocontainer = document.getElementById("todo-container");
const todoInput = document.getElementById("todo-input");
const todoList = document.getElementById("todo-list");
const addBtn = document.getElementById("add-btn");

// 　･ﾟ*｡･ ｡*･ﾟ 불러오기 ･ﾟ*｡･ ｡*･ﾟ
const todoStorage = JSON.parse(localStorage.getItem("todoStorage"));
if (todoStorage !== null) {
  for (let i = 0; i < todoStorage.length; i++) {
    // todoStorage의 [i]번째 값을 makeToDoList에 넣어둠
    makeToDoList(todoStorage[i]);
  }
}

// add-btn 버튼 클릭 시 이벤트
addBtn.addEventListener("click", function () {
  if (todoInput.value.trim() !== "") {
    makeToDoList();
  } else {
    alert('내용을 입력해주세요.')
  }
});

// 리스트 출력 함수
function makeToDoList(storageList) {
  const li = document.createElement("li");
  const checkBtn = document.createElement("input");
  const todoContent = document.createElement("span");
  const deleteBtn = document.createElement("button");

  // local storage에 저장되어 있다면
  if (storageList) {
    todoInput.value = storageList.contents;
    if (storageList.check === true) {
      li.classList.add("checked");
      checkBtn.checked = true;
    }
  }

  // 체크박스 추가
  checkBtn.type = "checkbox";
  li.append(checkBtn);
  checkBtn.addEventListener("change", function () {
    // toggle("클래스명") : 해당 클래스가 존재한다면 제거 후 false를 반환, 존재하지 않으면 추가 후 true 반환
    this.parentElement.classList.toggle("checked");
  });

  // 할일 내용 추가
  todoContent.textContent = todoInput.value;
  li.append(todoContent);

  // deleteBtn 추가
  deleteBtn.className = "delete-btn";
  deleteBtn.textContent = "삭제";
  li.append(deleteBtn);
  deleteBtn.onclick = function () {
    this.parentElement.remove();
  };

  // li 추가
  todoList.append(li);

  // input창 초기화
  todoInput.value = "";

}

// 　･ﾟ*｡･ ｡*･ﾟ 저장하기 ･ﾟ*｡･ ｡*･ﾟ
document.getElementById("saveStorage").addEventListener("click", function () {
  // localStorage에 담을 array
  const todoStorage = [];
  for (let i = 0; i < todoList.children.length; i++) {
    const todoObject = {
      contents: todoList.children[i].querySelector("span").textContent,
      // classList.contains("클래스명") : 해당 클래스 명이 해당 요소에 포함되어있는지
      check: todoList.children[i].classList.contains("checked"),
    };
    todoStorage.push(todoObject);
  }
  console.log(todoStorage);
  // JSON.stringfy() : 변수를 문자열로 바꿔 array 그 자체를 문자열로 만든다.
  localStorage.setItem("todoStorage", JSON.stringify(todoStorage));
});

로컬 스토리지 저장 / 불러오기 외에는 크게 달라진 점은 없으나, 불러오기 시에도 리스트 출력을 해줘야 하기 때문에 함수로 따로 분리해 주면서 바뀌게 된 점이 있다.

1. addBtn을 눌렀을 때 (할 일을 추가할 때)의 함수 분리

수정 전

const addBtn = document.getElementById('add-btn');

addBtn.addEventListener('click', function () {
  if (todoInput.value.trim() !== '') {
    const li = document.createElement('li');
    // ....... 생략 ........
    todoList.append(li);
    todoInput.value = '';
  } else {
    alert('내용을 입력해주세요!');
  }
});

위에서 언급한 대로, add-btn을 클릭한 뒤에 항목이 추가되고 있는 모습이다.

이 이벤트로 실행되는 함수에는 todoList의 자식 목록들을 모두 추가해주는 코드가 다 담겨있기 때문에, 로컬 스토리지에 저장된 데이터를 재출력 하기 위해서는 해당 내용이 거의 다 필요하다.

이 내용을 담을 함수를 새로 생성하여 addBtn을 클릭할 때, 또 데이터들을 불러올 때 해당 함수를 호출하도록 수정했다.

수정 후

// local Storage에서 불러오기
const todoStorage = JSON.parse(localStorage.getItem("todoStorage"));
if (todoStorage !== null) {
  for (let i = 0; i < todoStorage.length; i++) {
    // todoStorage의 [i]번째 값을 makeToDoList에 넣어둠
    makeToDoList(todoStorage[i]);
  }
}
// add-btn 버튼 클릭 시 이벤트
addBtn.addEventListener("click", function () {
  if (todoInput.value.trim() !== "") {
    makeToDoList();
  } else {
    alert('내용을 입력해주세요.');
  }
});

// 리스트 출력 함수
function makeToDoList(storageList) {
  const li = document.createElement("li");
  // local storage에 저장되어 있다면
  if (storageList) {
    todoInput.value = storageList.contents;
    if (storageList.check === true) {
      li.classList.add("checked");
      checkBtn.checked = true;
    }
  }
  // .....생략......
  
  todoList.append(li);
}

공백 입력 시 할 일이 추가 되지 않도록 하는 if else문을 addBtn 클릭 시의 이벤트 핸들러 내에 작성하고, 나머지는 모두 makeToDoList 함수에 들어있어 호출하면 언제든지 쓸 수 있게 됐다.

다만 이전과 달리 함수에 파라미터 storageList가 생겼는데, 없으면 if(storageList){}가 실행되지 않는다.

* if(storageList) : storageList가 1 이상인지(즉 true인지)를 조건으로 하고 있으며, 없다면 false가 되어 나머지 부분이 실행된다.

체크가 되어있으면 check : true, 되어있지 않으면 check : false이다.

local Storage에서 저장된 형태는 key값 todoStorage의 value가 {'할 일(contents)', '체크 유무(check)'}의 형태의 원소로 이루어진 배열로 들어가 있다.

이 때 배열에 있는 값을 모두 출력하기 위해 for문 안에 makeToDoList() 메소드에 todoStorage[i]를 인자로 넣어 주고 있기 때문에 if (storageList) {} 부분이 실행된다. 이 때 if문 내에 있는 if (storageList.check === true) {} 에 대해서는 아래 2. 체크박스에 서술했다.

* local storage 개념 참고

Mdn : https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

맹수님의 블로그 : https://myeongsu0257.tistory.com/130

그 외에도 2년전에 강의 들어보면서 local storage를 활용해 Todo list를 만들어보는 실습을 했었는데 같은 투두 리스트인만큼 유사한 점이 많아 링크를 남겨둔다.

todo list 기본 기능 + local storage에 저장(추가하면 바로 저장이 됨) 및 출력 : https://hydeveloper.tistory.com/71

todo list local storage에서도 할일 삭제 : https://hydeveloper.tistory.com/72

2. 로컬 스토리지 저장

주석으로도 메모해뒀고 저장 기능 또한 이 글에서 다뤘기 때문에 자세한 설명은 패스한다...

// 　･ﾟ*｡･ ｡*･ﾟ 저장하기 ･ﾟ*｡･ ｡*･ﾟ
document.getElementById("saveStorage").addEventListener("click", function () {
  // localStorage에 담을 array
  const todoStorage = [];
  for (let i = 0; i < todoList.children.length; i++) {
    const todoObject = {
      contents: todoList.children[i].querySelector("span").textContent,
      // classList.contains("클래스명") : 해당 클래스 명이 해당 요소에 포함되어있는지
      check: todoList.children[i].classList.contains("checked"),
    };
    todoStorage.push(todoObject);
  }
  console.log(todoStorage);
  // JSON.stringfy() : 변수를 문자열로 바꿔 array 그 자체를 문자열로 만든다.
  localStorage.setItem("todoStorage", JSON.stringify(todoStorage));
});

3. 체크박스

수정 전

addBtn.addEventListener('click', function () {
    const li = document.createElement('li');
    const checkBtn = document.createElement('input');

    checkBtn.type = 'checkbox';
    li.append(checkBtn);
    checkBtn.addEventListener('change', function () {
      if (checkBtn.checked) {
        this.nextElementSibling.style.textDecoration = 'line-through';
      } else {
        this.nextElementSibling.style.textDecoration = '';
      }
    });
});

addBtn에 'click'이벤트가 발생했을 때 체크박스가 출력되게 했다.

이는 로컬 스토리지에 데이터를 저장하지 않기 때문에 그냥 단순히 체크박스의 기능만 하는 정도다.

체크박스의 체크 부분인 checkBtn에 'change'이벤트가 발생했을 때,

버튼이 체크됐다면(checkBtn.checked) 체크버튼의 다음 요소가 될 span태그의 스타일을 textDecoration = 'line-through'를 추가하여 체크된 항목에 취소선을 그리게 했다.

아래는 수정 후의 코드다.

// 리스트 출력 함수
function makeToDoList(storageList) {
  const li = document.createElement('li');
  const checkBtn = document.createElement('input');
  
  // local storage에 저장되어 있다면
  if (storageList) {
    todoInput.value = storageList.contents;
    // 위의 if(storageList)처럼 if(storageList.check)으로 써도 똑같이 작동한다
    if (storageList.check === true) {
      li.classList.add("checked");
      checkBtn.checked = true;
    }
  }
  checkBtn.type = 'checkbox';
  li.append(checkBtn);
  checkBtn.addEventListener('change', function () {
    // toggle("클래스명") : 해당 클래스가 존재한다면 제거 후 false를 반환, 존재하지 않으면 추가 후 true 반환
    this.parentElement.classList.toggle('checked');
  });
}

체크버튼은 추가되거나 수정된 내용이 꽤 있다.

1) checkBtn을 눌렀을 때의 이벤트 내용

수정 전에는 바로 뒤 형제 요소에게 스타일을 적용했다면, 이번엔 Local Storage에도 check 유무를 판별해야 하므로 해당 체크버튼의 부모 요소(li)에게 checked라는 클래스를 추가했다.

클래스를 추가하려면 add()메소드 써도 되는데 toggle()메소드를 왜 썼냐

주석에 적어둔 대로, 단 한줄로 해당 부모요소에게 checked라는 클래스가 이미 있는 상태라면 checked 클래스를 없애주며, 만약 없는 상태라면 checked를 추가해줄 수 있다.

그렇다면 스타일은 어떻게 됐냐, 그건 css 파일을 수정했다.

#todo-list li.checked > span {
  text-decoration: line-through;
}

아까부터 왜 형제 요소만 꾸며주냐면

위 이미지와 같이 그냥 부모를 꾸며줄 경우, 옆에 있는 삭제버튼까지 밑줄이 그어지는데 보기가 안좋아서 span 태그만 꾸며주고 있다...

2) if (storageList.check === true) {}

위의 1. 에서 추가된 if(storageList){}문 안에 있는 조건이다. 목록을 출력할 때 기존에 저장되어있던 storageList value에 담긴 배열의 원소가 {contents, check}의 형태를 가지고 있다고 언급했었는데, 이 때 check의 값을 boolean형으로 받았다.

때문에 check가 true라면 해당 li의 checked 클래스를 추가해주는데, 문제는 위의 1)에서 언급한 이벤트와는 달리 지금 해당 li 안에 있는 checkBtn에 직접적으로 접근하는 것이 아니기 때문에 checkBtn.checked = true;를 추가해 해당 li의 체크박스의 checked 속성을 true로 해주는 것이다.

참고

local storage에서 리스트 불러오는 과정은 https://velog.io/@seoyaon/Javascript-Todo-List-%EB%A7%8C%EB%93%A4%EA%B8%B0 을 보고 많이 참고했다... 진짜감사합니다

'javascript' 카테고리의 다른 글

javascript/얕은 복사와 깊은 복사 (0)	2025.03.20
javascript/chart.js로 그래프 만들기 (0)	2025.03.19
250313 to-do 리스트 만들기 (2) (0)	2025.03.14
javascript/var를 더이상 사용하지 않는 이유 (2)	2025.03.12
250307 프로그래머스 (0)	2025.03.07

hykim

250313 to-do 리스트 만들기 (1)

1. addBtn을 눌렀을 때 (할 일을 추가할 때)의 함수 분리

2. 로컬 스토리지 저장

3. 체크박스

'javascript' 카테고리의 다른 글

티스토리툴바

250313 to-do 리스트 만들기 (1)

1. addBtn을 눌렀을 때 (할 일을 추가할 때)의 함수 분리

2. 로컬 스토리지 저장

3. 체크박스

'javascript' 카테고리의 다른 글

'javascript' Related Articles

티스토리툴바