[JavaScript] TO-DO 페이지 만들기

수업 중에 진행한 TO-DO 실습이다.

📌 진행 과정

1. 추가하기 버튼을 클릭 시 새로운 To-Do item 객체 생성
2. edit 아이콘 클릭 시 input disabled 속성 삭제되고 입력 가능
3. checkbox 클릭 시 완료했다는 의미의 css 적용
4. remove 아이콘 클릭 시 해당 item 객체 삭제
5. localStorage에 데이터 저장하고 가져오기

• 새로운 아이템 객체 생성
  prepend() : 선택한 요소의 자식 요소 앞에 추가 <-> append()
  unshift() : 배열의 맨 앞에 값을 추가 <-> shift()

  function createNewTodo() {
     // 새로운 아이템 객체 생성
     const item = {
         id: new Date().getTime(), // 유니크한 값 id로 주기 위함
         text: "",
         complete: false
     };
  
     // 배열의 처음에 새로운 아이템을 추가
     todos.unshift(item);
  
     // 요소 생성하기
     const {itemEl, inputEl} = createToDoElement(item);
  
     list.prepend(itemEl);
  
     saveToLocalStorage();
  }

    actionsEl.append(editBtnEl);
     actionsEl.append(removeBtnEl);
  
     itemEl.append(checkboxEl);
     itemEl.append(inputEl);
     itemEl.append(actionsEl);
  

• localStorage에 data 저장하고 가져오기. 데이터 변환 필요

  // localStorage에서 data 가져와서 객체 생성하기
  function displayTodos() {
     // localStorage에서 todos 데이터 가져오기
     loadFromLocalStorage();
  
     for(let i=0; i<todos.length; i++) {
  
         const item = todos[i];
  
         // List Item 요소 생성
         const { itemEl } = createToDoElement(item);
         
         // List Div 안에 추가
         list.append(itemEl);
     }
  }
  
  displayTodos();
  
  // localStorage에 저장
  function saveToLocalStorage() {
     const data = JSON.stringify(todos);  // string으로 변환
     localStorage.setItem('my_todos', data);
  }
  
  // localStorage에서 data 가져옴
  function loadFromLocalStorage() {
     const data = localStorage.getItem('my_todos');
  
     if(data) {
         todos = JSON.parse(data);   // 데이터를 타입에 맞게 변환
     }
  }

📍 회고

• localStorage를 처음 사용해봤는데 어떻게 변환하여 사용하는지 알 수 있었다.
• 객체를 생성하고 삭제하는 것과 이벤트 생성하는 것이 조금은 익숙해진 것 같다.

깃허브 링크