[JavaScript] Momentum_02

1. toDo.js

const toDoForm = document.querySelector(".js-form-toDo"),
      toDoInput = toDoForm.querySelector("input"),
      toDoList = document.querySelector(".js-toDoList")

const LS_TODOS = "toDos";

let toDos = [];


function deleteToDo(event){
    const btn = event.target;    // event.target: 클릭된 요소 반환
    const li = btn.parentNode;
    toDoList.removeChild(li);    // element.removeChild: 지정된 자식 요소 삭제
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id);        // parseInt(): int로 데이터 형변환
    });
    toDos = cleanToDos;
    saveToDos();
}

function saveToDos(){
    localStorage.setItem("toDos", JSON.stringify(toDos));
}

function paintToDo(text){
    const li = document.createElement("li");    // createElement(): 새로운 요소 노드 생성
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;

    delBtn.innerHTML = "❌";
    delBtn.addEventListener("click", deleteToDo);

    span.innerText = text;

    li.id = newId;

    // element.appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가
    li.appendChild(delBtn);
    li.appendChild(span);
    toDoList.appendChild(li);

    const toDoObj = {
        id: newId,
        text: text,
    }
    toDos.push(toDoObj);
    saveToDos();
}

function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = "";
}

function loadToDos(){
    const loadedToDos = localStorage.getItem(LS_TODOS);
    if (LS_TODOS !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });
    }
}

function init(){
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);
}

init()

 

<To Do 리스트 저장 로직>

1. To Do 리스트 입력칸을 띄우고 이벤트를 기다린다.

   1.1 기존의 To Do 리스트가 있는 경우, localStorage에 저장된 것을 불러온다.

   1.2 불러온 To Do 리스트마다 paintToDo() 함수 실행

2. 사용자가 To Do 리스트를 제출할 경우, handleSubmit() 실행

3. handleSubmit()

   3.1 사용자가 입력한 값을 받아와 paintToDo() 함수 실행

   3.2 <input> 값은 다시 비워둔다.

4. paintToDo()

   4.1 입력값이 들어오면 리스트를 화면에 띄우기 위한 새로운 요소들 생성

   4.2 li 밑에 delBtn과 span을, toDoList(ul) 밑에 li 를 연결시켜 부모-자식 관계를 만들어준다.

   4.3 입력값을 담은 toDoObj(object) 를 생성한 후 toDos(Array) 에 추가

   4.4 toDos(Array) 로 saveToDos() 함수 실행

5. saveToDos()

   5.1 localStorage에 toDos(Array) 를 저장

즉, To Do 리스트 한 줄마다 4-5 단계 반복

 

<To Do 리스트 삭제 로직>

1. 사용자가 삭제 버튼을 클릭하면 deleteToDo() 함수 실행

2. deleteToDo()

   2.1 사용자가 삭제 버튼을 클릭한 To Do 리스트 요소를 얻어옴

   2.2 2.1을 제외한 나머지 To Do 리스트들로 새로운 Array 생성

   2.3 2.2의 Array를 기존 toDos에 할당

   2.4 toDos(Array) 로 saveToDos() 함수 실행

 

• array.foreach(function) : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 함수를 실행

• array.filter(function) : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 함수를 실행한 후, 그 결괏값이

  ​ true인 요소들만 새로운 배열에 담아 반환

 

<JSON(JavaScript Object Notation)>

: Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷

• 문자열 형태로 존재
• 네트워크로 데이터를 전송할 때 유용
• 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification), 문자열에서 객체로 변환하는 것은 파싱(Parsing)
• 메소드
  • JSON.stringify(object) : 객체를 JSON 형식으로 변환
  • JSON.parse(JSONString) : JSON 문자열을 JavaScript 객체로 변환

 

---

 

참고 자료

• https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr

바닐라 JS로 크롬 앱 만들기

• http://tcpschool.com/javascript/js_standard_arrayMethod

코딩교육 티씨피스쿨

• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON으로 작업하기