[크롬 앱 만들기] #7 TO DO LIST

티스토리 뷰

WEB/JavaScript

[크롬 앱 만들기] #7 TO DO LIST

Harimad 2022. 1. 18. 16:45

todo.js 전체코드:

<body>
  <form id="todo-form">
    <input type="text">
  </form>
   <ul id="todo-list"></ul>
</body>

const todoForm = document.querySelector('#todo-form');
const todoInput = document.querySelector('#todo-form input');
const todoList = document.querySelector('#todo-list');

const TODOS_KEY = 'todos'; //localStorage key값의 이름
let toDos = []; //새로고침하면 toDos값이 초기화 됨 -> 아래에 toDos값을 계속 가지도록 toDos = JSON.parse(localStorage.getItem(TODOS_KEY)) 함

function handleTodoForm(event) {
  event.preventDefault();
  const newTodo = todoInput.value;
  todoInput.value = '';
  todoInput.focus();

  const newTodoObj = { // 객체 값을 새로 만듬
    text: newTodo,
    id: Date.now(),
  };

  toDos.push(newTodoObj); //object 형태로 toDos배열에 넣음
  paintToDo(newTodoObj); //object를 매개변수로 넘김

  saveToDos();
}

function saveToDos() { //toDos를 localStorage에 넣는 함수
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function paintToDo(newTodo) { //매개변수 newTodo는 Object로 넘어왔음
  const li = document.createElement('li');
  li.id = newTodo.id; //li에 id값을 넣어서 나중에 Delete 하기 쉽게 만듬

  const span = document.createElement('span');
  li.style.listStyleType = 'none'; //li 스타일제거
  span.innerText = newTodo.text;

  const btn = document.createElement('button');
  btn.innerText = '❌'
  btn.addEventListener('click', deleteTodo);

  li.appendChild(span);
  li.appendChild(btn);
  todoList.appendChild(li);
}

function deleteTodo(event) {
  const li = event.target.parentNode;
  li.remove();

  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); //#7.8 강의
  saveToDos();
}

todoForm.addEventListener('submit', handleTodoForm);

const savedToDos = localStorage.getItem(TODOS_KEY); //해당 key값을 담기

if (savedToDos !== null) { //이 값이 있으면
  const parsedToDos = JSON.parse(savedToDos); // 그 값을 배열화 시킴
  toDos = parsedToDos; // 현재 localStorage 값을 toDos에 값 복원

  parsedToDos.forEach(paintToDo); // 하나씩 출력 해봄
}

7.0 todo setup , 7.1 Adding ToDos

Q. 자바스크립트로 HTML태그를 생성할때 appendChild를 사용하시는데 append라는 것도 있길래 사용해보니 똑같이 동작을 했습니다. 둘의 차이는 뭔가요?

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

append()로는 문자열도 추가가 가능한데, appendChild()로는 객체만 추가할 수 있어요. :)
li.append("추가해주세요") → (가능)
li.appendChild("추가해주세요") → (불가능 - typeError)

그리고 console.log로 두 개를 찍어보면 append()하고 appendChild()가 다르게 나와요!

#7.2 Deleting To Dos

event.target을 콘솔로 찍어보면

이렇게 나와요. 내려보면 parentNode 가 있는데 그걸 커서해보면

li태그가 선택되는게 보입니다.

그러므로

event.target.parentNode 를 remove해주면 버튼 click 이벤트때 li 요소가 지워집니다.

#7.3 Saving To Dos

const toDos = []; //localStorage에 넣을 배열 생성


function handleTodoForm(event) {
  event.preventDefault();
  const newTodo = todoInput.value;
  todoInput.value = '';
  todoInput.focus();
  
  toDos.push(newTodo); // 배열에 input값 추가
  saveToDos();         // localStorage에 배열값 넣어주기

  paintToDo(newTodo);
}


function saveToDos() { //toDos를 localStorage에 넣는 함수
  localStorage.setItem("todos", JSON.stringify(toDos));
}
//JSON.stringify 는 객체든 배열이든 문자열로 변환시켜줌.

todos 배열 값이 문자요소로 저장된 것이 보입니다.

아래 예시도 참고!

#7.4 Loading To Dos part One

문자화된 배열todos 을 localStorage에서 가져와(getItem)서 다시 배열화(JSON.parse) 시키면 2번째 줄처럼 바뀝니다

const savedToDos = localStorage.getItem(TODOS_KEY); //해당 key값을 담기

if (savedToDos !== null) { //이 값이 있으면
  const parsedToDos = JSON.parse(savedToDos); // 그 값을 배열화 시킴
  parsedToDos.forEach((item) => console.log(`this is the turn of ${item}`)); // 하나씩 출력 해봄
}

왼쪽 그림의 savedToDos 값들이

JSON.parse 되어서 콘솔에 찍히는게 보입니다.

Wrap up

어려워 하시는 댓글이 많아서 올립니다.
1. To-Do-List 작성시 localStorage 에 저장이 됩니다.
2. 근데 저장이 될때 string data type 으로 저장이 되요. (예: "[a,b,c,d,e]")
3. 그래서 JSON.parse()를 통해 string data type을 object로 바꾼거에요. 근데 이 Object는 Array 같이 바뀌었어요. 즉 index를 통해 value를 access할수 있어요
예: "[a,b,c,d]" (string) => [a, b, c, d] (array);
array[0] = a; array[1] = b; array[2] = c; array[3] = d
5. array 형태가 된 값을 parsedToDos 라는 const variable 에다가 넣어놨어요.
6. 이 상태에서 parsedToDos 는 array 형태라고 가정했을때 .foreach() 라는 function 을 사용할수 있는데 이건 mdn 웹 사이트 가면 나오지만 그냥 단순히 array 에 들어있는 모든 값을 iterate (순찰(?)) 할수 있는 function 입니다.
7. 즉 index 0 부터 마지막 index 까지 한바뀌 도는건데 돌면서 그 값들을 item 라는 곳 또는 element에 (이름은 정하기 나름) 저장이 되는거에요.
ex)
Array = [ a, b, c, d]
Array.foreach( (item) => console.log(item))
// output:
a
b
c
d
여기서 부터 설명이 좀 어려운데 밑에 있는 웹사이트 가서 editor로 좀 놀아보시면 .foreach()가 이해 되실거에요. for loop 이나 while loop 으로 할수 있는 기능을 더 짧은 코드로 할수 있게 만든것 같아요 ^^
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

저작자표시 비영리 변경금지 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[크롬 앱 만들기] code 완성본 (0)	2022.01.19
[크롬 앱 만들기] #8 WEATHER (0)	2022.01.19
[크롬 앱 만들기]#5 CLOCK \| PadStart, 생성자 함수 (0)	2022.01.17
[크롬 앱 만들기]#4.6 Loading Username \| localStorage (0)	2022.01.17
[크롬 앱 만들기] #4.1 Form Submission \| form -> submit (0)	2022.01.16

링크

다크모드

Document description javascript psychology

⬅

더보기 ,제목1 태그 호버

Notebook

티스토리 뷰