노마드 코더 - 바닐라 JS로 크롬 앱 만들기(8)

#7 TO DO LIST

 

0. Setup

html

    <h1 id="greeting" class="hidden"></h1>
    <form id="todo-form">
      <input type="text" placeholder="Write a To Do and Press Enter" required>
    </form>
    <ul id="todo-list"></ul>

1) Todo-list를 만들기 위해 html에 form 태그로 구조를 만들어 준다. 나중에 JavaScript에서 사용하기 쉽게 id는 todo-form으로 설정한다.

 

2) form 자체는 submit이라는 기본 기능을 내장한 하나의 묶음일 뿐이다. 유저가 todo-list에 무언가를 기입하는 것을 원하기 때문에 form 태그 안에 input 태그를 넣어 'text'를 타이핑할 수 있도록 한다.

 

3) 그 밑에 ul 태그를 생성하여 todo-list에 작성된 text가 저장 및 나열될 수 있게 한다.

 

 

JavaScript

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
//const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function handleTodoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
}

toDoform.addEventListner("submit", handleTodoSubmit);

1) 앞에 html에서 만든 구조 3가지 ('todo-form', 'todo-form 안의 input', 'todo-list')를 각각 변수로 설정한다.

 

2) 이전 greeting 강의에서 form 태그에서의 event는 submit를 발생시키고, 브라우저는 기본값으로 설정되어 있는 새로고침을 하게 된다고 했는데, todo-list를 작성할 때마다 매번 새로고침 된다면 매우 비효율적일 것이다.

(todo-list를 1,000번 작성한다고 가정한다면 불필요한 새로고침이 1,000번 발생하고 1,000번의 랜덤 한 이미지가 로드된다. → 데이터적으로 비효율적, 시각적으로 불편)

이를 막기위해 event.preventDefault()로 기본값을 없애준다.

 

3) text 상자 안에 글을 작성하고 enter를 눌렀을 때, 그 글이 초기화 되게 만들기 위해 toDoInput.value = ""; 을 통해 value를 빈 텍스트로 한다.

 

4) text 상자를 비게 하기 전에 유저가 입력한 텍스트를 저장해야 나중에 ul태그 안에 사용할 수 있기 때문에 toDoInput.value = ""; 로 기입한 텍스트가 사라지기 이전에 const newTodo = toDoInput.value; 를 정의해 기입한 텍스트가 newTodo라는 값에 저장되게 한다.

 

5) 앞의 세 가지 동작(기본값 방지, 텍스트 저장, text 상자 비우기)은 한 번에 이루어지는 세트이기 때문에 효율성 및 편의를 위해 handleTodoSubmit() 함수로 묶어준다.

 

6) todo-form 안에서 submit이 발생하는 특정 상황에서 handleTodoSubmmit 함수를 실행시키기 위해

toDoform.addEventListner("submit", handleTodoSubmit); 을 기입한다.

(함수 handleTodoSubmit이 항상 실행되고 있는 상태라면 text 창은 항상 비어있는 상태 일 것이기 때문에)

 

 

 

1. Adding ToDos

review

이전 영상에서 hadle.ToDoSubmit() 함수를 만들었고, 

event.preventDefault(); // 새로고침을 막고
const newTodo = toDoInput.value; // submit하는 텍스트를 저장하고
toDoInput.value = ""; // 텍스트상자 안의 텍스트를 초기화시켰다.

입력한 텍스트(todo)가 페이지에 보이는 것을 원하기 때문에 그에 맞는 코드를 작성할 것이다.

 

 

html  

이미 html에 todo-list라는 id를 가진 ul태그를 작성해 놓았고, 이제는 새로운 텍스트가 입력될 때마다 그 안에 li 태그를 생성하여 나열하고 싶기 때문에 js에서 이를 구현할 수 있도록 코드를 짜야한다.

 

 

JavaScript - todo list를 웹페이지에서 시각화하기

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  li.appendChild(span);
  span.innerText = newTodo.text;
  toDoList.appendChild(li);
}

1) html에 li태그를 생성하게 한다.

 

2) html 내에서 span태그를 생성하게 한다. (나중에 리스트 삭제 시를 위해 span 태그를 써줌)

 

3) li 태그 안에 span태그를 자식으로 만들어준다. (li 안에 span을 넣어주는 이유 -> 버튼을 함께 넣어주기 위해)

 

4) span 태그 안의 텍스트가 앞에서 설정한 newTodo라는 객체가 되도록 한다. (newTodo는 텍스트에 입력한 value값)

ex) 텍스트 상자 안에 "안녕"을 입력하면 newTodo는 "안녕"이므로 span안의 텍스트도 "안녕"이 된다.

 

5)  html의 ul 태그 안에 li 태그를 자식으로 만들어 준다. (span을 li에 속하게 한 것과 동일)

 

6) handleTodoSubmit 함수에 paintToDo(newTodo); 를 추가해 handleTodoSubmit 함수가 실행되면, paintToDo함수가 실행되도록 한다.

 

 

+) Q

자바스크립트로 HTML태그를 생성할 때 appendChild와 append라의 차이

-

append()가 추가할 수 있는 종류가 더 많다.

append()로는 문자열도 추가가 가능한데, appendChild()로는 객체만 추가할 수 있다.

ex)

li.append("안녕하세요") → (가능)

li.appendChild("안녕하세요") → (불가능 - typeError)

그리고 console.log로 두 개를 보면 append()하고 appendChild()가 다르게 나온다.

 

 

+) Q

굳이  handleTodoSubmit 함수와 paintToDo함수를 분리한 이유는? 같이 써도 똑같이 작동한다.

-

paintToDo함수가 또 쓰일 수 있으니 쓸데없이 중복되지 않게 따로 분리해서 적는다.

또한 여러명과 함께 일하는 경우를 대비해서 따로 적는다.

 

 

 

2. Deleting To Dos

JavaScript - html에 삭제 button 태그 만들기

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newTodo.text;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

1) createElement를 이용해 html에 button 태그를 생성하게 한다.

 

2) 유저에게 버튼을 누르면 텍스트가 삭제된다는 것을 인식시키기 위해 버튼 내부 텍스트를 "❌"로 정의 (윈도우 기준 : window + . )

 

3) 버튼에서 이벤트가 발생했을 때 삭제 기능을 담당하는 함수가 실행되도록 한다. 여기에선 "click"이 발생 시, deleteToDo함수가 실행되도록 한다.

 

 

JavaScript - 삭제 기능을 담당하는 함수 생성

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  }

1) event.target.parentElement; => 이벤트가 발생했을 때.해당 객체를 지정하여.그것의 부모 태그를 지정;

event는 target(= event를 발생시킨 장본인. target은 클릭된 HTML element)을 준다. (여기서는 button)

parentElement로 target의 부모(= li)에 접근.

 

2) 위에서 지정된 것을 삭제한다.

 

 

 

3. Saving To Dos

JavaScript - 저장 기능 함수 만들기

const toDos = [];

function deleteToDo(event) {
   localStorage.setItem("todos", JSON.stringify(toDos));
  }

1) toDo에 들어오는 텍스트를 배열로 묶어 보관하기 위해 빈 array를 생성해준다.

 

2) newTodo가 그려질 때마다(paintToDo함수가 실행될 때마다) 그 텍스트를 array에 push하고 싶기 때문에,

newTodo를 그리지 전에(paintToDo 함수가 실행되기 전에) toDos array를 가지고 와서 newTodo를 push 해준다.

함수 handleToDosubmit 안에 toDos.push(newTodo); 를 paintToDo(newTodo); 위에 써준다.

 

3) 저장 기능을 넣을 함수 saveToDos 생성하고,

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

→ localStorage에 "todos"라는 이름의 카테고리로, array 형태로 저장한다.

 

4) 앞에서 만들었던 함수 handleToDosubmit의 마지막에 저장 기능을 실행할 saveToDos(); 추가해준다.

 

5) 하지만 3)처럼 저장하게 되면 localStorage에서 확인해봤을 때 값들이 텍스트 형태로 저장된다.

(실제로는 array형태가 아님)

ex) key: todos / value: a, b, c 

 

6) 이 값들을 string의 형태로 toDos라는 array에 집어넣고 싶기 때문에 JSON.stringify()를 사용한다.

이 객체는 어떤 형태든 대입한 값을 알아서 string의 형태로 바꿔준다.

ex) key: todos / value: ["a", "b", "c"]

 

 

+) Q

json.stringify 쓰기 전에 localStorage의 값이 a, b, c 였고 쓰고 나서는 “a”, “b”,”c”가 됐는데 같은 string 타입 아닌가?

둘의 차이는? 그리고 stringify를 쓰기 전의 값은 텍스트, 쓰고 나서는 string이라고 하는데 그 이유도 궁금.

(단순 텍스트와 string의 차이)

-

'text' does not exist. We only have 'string’

text는 데이터 타입이 아니고, string만 데이터 타입이라고 말하는 것 같다.