wecode 사전스터디(7/21) 로그 - (노마드코더 리뷰 3)

위코드 개강(8/17) D-27.

 

배운 것/개발한 것

☆ 노마드코더 JS 강의 : 강의 끝내기 + 코드 리뷰 글 올리기 (링크)

---

1. #3.5 Making a To Do List (Part 1)

1) html 코드 일부

<form class="js-toDoForm">
	<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList">
</ul>

2) JS 코드 일부

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

const TODOS_LS = "toDos";

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

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

function loadToDos() {
  const toDos = localStorage.getItem(TODOS_LS);
  if (toDos !== null) {
  }
}

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

init();

• 유저 이름 저장 로직과 거의 동일
• paintToDo(text) : document.createElement(참조)를 사용하여 문서 내에 li, button, span을 생성한 후 투두리스트 영역에 li를 붙여넣음

---

2. #3.6 Making a To Do List (Part 2)

1) JS 코드 (이미 저장된 투두리스트 불러오기 기능)

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

• JSON.parse (참조) : JSON 형식의 파일을 자바스크립트 배열 형식으로 변환해주는 기능 
• forEach (참조) : 배열의 각 요소들에 대해 각각 특정 함수를 수행시킬 수 있는 반복문의 종류
• loadToDos() 함수는 localstorage의 기존 투두리스트를 탐색하고, 항목이 존재할 경우 이를 자바스크립트 형태로 변환하여 각각의 요소에 paintToDo 함수를 실행

2) JS 코드 2 (객체를 투두리스트에 저장하는 기능)

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

• const todos = [] : 투두리스트를 저장하는 빈 배열 생성
• toDoObj 객체를 생성 후, text와 id 정보를 toDos배열에 전달 후 저장

---

3. #3.7 Making a To Do List (Part 3)

1) JS 코드 (이미 저장된 투두리스트 불러오기 기능)

let toDos = [];

function deleteToDo(event) {
  const btn = event.target;
  const li = btn.parentNode;
  toDoList.removeChild(li);
  const cleanToDos = toDos.filter(function(toDo) {
    return toDo.id !== parseInt(li.id);
  });
  toDos = cleanToDos;
  saveToDos();
}

• const, let : toDos는 변경될 수 있는 정보이기 때문에 let으로 변경
• btn의 event.target (참조)
• btn.parentNode (참조) : 해당 요소의 부모 요소값을 불러올 수 있음
• 배열의 filter (참조) : 해당 배열의 요소 중 특정 조건을 충족하는 요소들만을 추출하여 신규 배열을 생성하는 함수