[ JS : 실습 : Making a To Do List (2) ]

Teasan·2020년 10월 29일
0

JavaScript

목록 보기
12/15
post-thumbnail

📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.

Making a To Do List (2)

  • 해야할 일을 생성할 때마다 ‘toDos’라는 array배열에 추가되도록 한다
  • 임의의 array 배열이 있을 때. length를 쓰면 array배열의 길이를 알 수 있다.
  • Local storage에도 todo를 저장해줘야 한다.
  • JSON.stringify는 자바스크립트 object를 string으로 바꿔준다.

Step 1.

const toDoForm = document.querySelector(".js-toDoForm");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos";

/* 할 일 목록을 저장해보자 */
const toDos = [ ]; 
// 할 일의 항목이 많아질 수 있기 때문에 배열array로 선언하자.

function paintToDo(text) {
    const li = document.createElement("li”);
    const delBtn = document.createElement("button");
    delBtn.innerText = "❌";
    const span = document.createElement("span");
    span.innerText = text; 

    /* appendChild( ) 를 사용하여 위에서 설정한 값을 부모 element 안에 넣고자 한다면 */
    li.appendChild(delBtn);
    li.appendChild(span);
    toDoList.appendChild(li);

    /* 해야할 일(to Do)을 생성할 때마다 'toDos'라는 array에 추가하도록 해보자.*/
const toDoObj = {
    text: text,
    id: toDos.length + 1
    // + 1를 하는 이유 : 만약 임의의 array가 있을 때, length를 쓰면 array의 길이를 알 수 있다. 하지만 array안에 아무것도 없다면 undefined 로 출력이 될 것이다. 아무것도 없는 array에 + 1를 하게 된다면, 값은 undefined이 아니라 1로 출력이 될 것이다.
    }

    // toDos에 push()를 사용하여 array안에 element(toDoObj) 하나를 넣어준다.
    toDos.push(toDoObj);
}

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

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
// 기존에 입력한 변수명인 toDos를 loadedToDos로 변경하는 이유 : 위에서 전역 변수로 새로 선언한 toDos와 헷갈려 오류가 발생할 수 있기 때문이다.
    if (loadedToDos !== null) {
    }
}

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

해야 할 일을 입력하지 않고 console 창에 toDos를 출력해보면 비어있는 것을 확인할 수 있다.

해야할 일(value : 해야할 일1)을 입력하고, console 창에 toDos를 다시 출력해보면 toDos 배열 안에 (toDos array 안에 넣어둔) text : text(“해야할 일1") 가 들어가고 (toDos array 안에 넣어둔) id : toDos.length + 1(1) 역시 들어가있음을 확인할 수 있다.

Step 2.

function paintToDo(text) {
    const li = document.createElement("li");
    const delBtn = document.createElement("button”);

    /* toDoObj = {} 안의 id value값을 넣어 좀더 보기 좋게 설정하기 위해서 새로운 변수를 선언해보기.*/
    const newId = toDos.length + 1;

    delBtn.innerText = "❌";
    const span = document.createElement("span");
    span.innerText = text;
    li.appendChild(delBtn);
    li.appendChild(span);

    /* li에 id 값을 넣어 순서대로 변경할 수 있도록 새로운 변수를 선언한다. 즉, 나중에 버튼을 클릭했을 때, 어떤 li를 지워야 하는지 알 수 있도록 설정하는 것이다. */
    li.id = newId;
    toDoList.appendChild(li);

/* 해야할 일(to Do)을 생성할 때마다 'toDos'라는 array에 추가하도록 해보자.*/
const toDoObj = {
    text: text,
    id: newId
    // 위에서 id 값을 넣어 좀더 보기 좋게 설정하기 위해서 선언한 변수인 newId value값(toDos.length + 1;)을 대신 넣어주었다.
    만약 임의의 array가 있을 때, length를 쓰면 array의 길이를 알 수 있다. 하지만 array안에 아무것도 없다면 undefined 로 출력이 될 것이다. 아무것도 없는 array에 + 1를 하게 된다면, 값은 1로 출력이 될 것이다.
    };
    // toDos에 push()를 사용하여 array안에 element(toDoObj) 하나를 넣어준다. 
    toDos.push(toDoObj)
}

해야 할 일을 입력하지 않고 elements 창을 확인해보면 ul 안이 비어있는 것을 확인할 수 있다.
해야할 일(해야할 일1, 해야할 일2)를 입력하고 elements 창을 확인해보면 To Do 를 입력한 횟수마다 li가 생성이 되며, li의 id value값( newId === toDos.length + 1 ) 또한 설정되었음을 확인할 수 있다.

Step 3. toDos array배열을 가져와서 local storage에 저장하는 함수를 만들자.

function saveToDos() {
    localStorage.setItem(TODOS_LS, toDos);
}

function paintToDo(text) {
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const newId = toDos.length + 1;
    delBtn.innerText = "❌";
    const span = document.createElement("span");
    span.innerText = text; 
    li.appendChild(delBtn);
    li.appendChild(span);
    li.id = newId;
    toDoList.appendChild(li);
    const toDoObj = {
        text: text,
        id: newId
    };
    toDos.push(toDoObj);
    /* push()를 한 이후에 saveToDos()를 호출해야 한다.
    이유 : saveToDos()를 호출해도 저장할 것이 없다. push()를 통해 넣어둔 것이 없기 때문에. */
    saveToDos();
}

JSON을 적용하지 않고, value 값을 submit 하지 않았을 때
value 값을 submit 하면
value값(해야할 일 1)이 저장되지 않고, [object, Object] 로 저장되는 것을 알 수 있다.
"Local storage에는 오직 string만 저장할 수 있기 때문이다."

profile
일단 공부가 '적성'에 맞는 개발자. 근성있습니다.

0개의 댓글