[바닐라 JS로 크롬 앱 만들기] #7 ~ #8(完) 정리

• 강의 링크: https://nomadcoders.co/javascript-for-beginners/lobby
• 강의 주제: 모멘텀 클론 코딩 with Vanilla Javascript

#7 To Do List

Add ToDo

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

function paintToDo(newTodo){
    const li =  document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    //<li><span></span></li> 구조로 만들기
    li.appendChild(button);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    //새로고침 막기
    event.preventDefault();
    //value 저장하기
    const newTodo = toDoInput.value;
    //input value 비우기
    toDoInput.value=""; 
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

Delete ToDo

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

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

function paintToDo(newTodo){
    const li =  document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    //<li><span></span></li> 구조로 만들기
    li.appendChild(button);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    //새로고침 막기
    event.preventDefault();
    //value 저장하기
    const newTodo = toDoInput.value;
    //input value 비우기 
    toDoInput.value=""; 
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

Save ToDo

where? localStorage

const toDos = [];

function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value=""; 
    //toDos array에 newToDo push
    toDos.push(newTodo);
    paintToDo(newTodo);
}

하지만, localStorage는 텍스트만 저장 가능(Array X)

배열로 저장하려면?

js에서 타입을 String으로 변경하기

JSON.stringify()

→ js object를 string으로 변경 → localStorage에 배열 형태로 저장할 수 있게 됨

js에서 string을 배열로 만들기

JSON.parse()

forEach()

array에 있는 각각의 item에 대해 function 실행

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if(saveToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(paintToDo);
}

→ 이렇게 진행할 경우 새로고침 후 새로운 정보를 입력했을 때 기존 정보가 초기화되고 새로운 정보가 저장 됨 → 아래 코드와 같이 수정 필요

let toDos = [];     //toDos의 값이 계속 []로 초기화 되어서 발생한 문제. let으로 변경
if(saveToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos; //기존 값을 toDos에 저장
    parsedToDos.forEach(paintToDo);
}

Delete ToDos

function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter(toDo => toDo. id !== li.id); //toDo 각각 삭제하기
}

왜 위 코드로는 작동하지 않을까?

→ li.id는 string, toDo.id는 number이기 때문에 일치하지 않는다

 

수정된 코드

function deleteToDo(event){
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
    saveToDos();
}

• 에러 발생
  • Uncaught TypeError: Cannot read property ‘forEach’ of null
  • → local storage를 초기화하다가 todos array까지 같이 밀어버려서 발생한 문제였다
  • local storage에서 todos를 추가해주니 문제 해결

---

#8 Weather

Geolocation

navigator.geolocation.getCurrentPosition()

getCurrentPosition() → 인자 2개 필요

1. 에러가 없을 때 실행할 함수
   • javascript가 Geolocation Position object를 input parameter로 줌
2. 에러가 있을 때 실행할 함수

Weather API

https://openweathermap.org/current

→ By geographic coordinates

fetch(url)

실제 url에 갈 필요없이 javascript가 url 호출