바닐라 JS로 크롬 앱 만들기 ( #7 TO DO LIST(2) )

5. Loading To Dos part One

1. localStorage에 저장된 값들을 가져와서 string으로 저장되어 있는 값을 JSON.parse 사용해서 변환

1-2. localStorage에 값을 저장하거나 가져올 떄 동일한 key 를 사용하므로 TODOS_KEY 로 선언해 사용

2. forEach 사용해 array 의 item 갯수 만큼 console.log 출력

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

const TODOS_KEY = "todos";
const toDos = [];

 // localStorage에 저장 
function saveToDos() {
    // 배열을 stringify로 저장해서 배열 형태로
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); 
}

// todo 삭제
function deleteToDo(event){
    // event.target.parentElement : 클릭한 <button> 의 부모태그
    const li = event.target.parentElement;
    li.remove();
}


// toDo를 그리는 역할
function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button"); // 삭제하는 버튼 추가

    span.innerText = newTodo;
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

    button.addEventListener("click", deleteToDo);   // x 버튼 클릭 시
}

function handleToDoSubmit(event) {
    // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

    toDos.push(newTodo);

    paintToDo(newTodo); // // toDo를 그리기

    saveToDos();
}

toDoFrom.addEventListener("submit", handleToDoSubmit);

// localStorage 에 저장된 값 가져오기
const savedToDos = localStorage.getItem(TODOS_KEY); 

// localStorage에 Key todos 값이 있으면 브라우저 실행했을 때 출력되도록
if (savedToDos) {   // savedToDos !== null
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach((item) => console.log("this is turn of ", item));  
}

결과 확인

6. Loading To Dos part Two

1. 새로고침 했을 때 localStorage에 값을 저장되어 있으면 출력

2. application 이 시작될 때 toDos array 는 항상 비어 있기 때문에 새로운 내용이 추가 되면 기존 내용 없어지므로 기존의 toDo 들도 유지되도록 toDos array 를 let 으로 변경하고 localStorage에 값이 있으면 toDos array에 추가

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

const TODOS_KEY = "todos";
let toDos = [];

 // localStorage에 저장 
function saveToDos() {
    // 배열을 stringify로 저장해서 배열 형태로
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); 
}

// todo 삭제
function deleteToDo(event){
    // event.target.parentElement : 클릭한 <button> 의 부모태그
    const li = event.target.parentElement;
    li.remove();
}


// toDo를 그리는 역할
function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button"); // 삭제하는 버튼 추가

    span.innerText = newTodo;
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

    button.addEventListener("click", deleteToDo);   // x 버튼 클릭 시
}

function handleToDoSubmit(event) {
    // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

    toDos.push(newTodo);
    paintToDo(newTodo); // // toDo를 그리기
    
    saveToDos();
}

toDoFrom.addEventListener("submit", handleToDoSubmit);

// localStorage 에 저장된 값 가져오기
const savedToDos = localStorage.getItem(TODOS_KEY); 

// localStorage에 Key todos 값이 있으면 브라우저 실행했을 때 출력되도록
if (savedToDos) {   // savedToDos !== null
    const parsedToDos = JSON.parse(savedToDos);
 
    // parsedToDos.forEach((item) => console.log("this is turn of ", item));    

    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo); 
}

7. Deleting To Dos part One

delete 해도 localStorage에서 없어지지 않아서 지워지도록 수정

1) localStorage에 text로 저장하지 않고 object 로 저장하도록 수정

    const newTodoObj = {
        text : newTodo,
        id : Date.now()
    }

    toDos.push(newTodoObj);

object 로 수정하면서 todo list 를 출력하면 아래와 같은 형식으로 출력

2) todo 를 그려주는 곳에서 newTodoObj를 보내고 span.innerText = newTodo.text 로 변경

// toDo를 그리는 역할
function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button"); // 삭제하는 버튼 추가

    span.innerText = newTodo.text;
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

    button.addEventListener("click", deleteToDo);   // x 버튼 클릭 시
}

function handleToDoSubmit(event) {
    // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

    const newTodoObj = {
        text : newTodo,
        id : Date.now()
    }

    toDos.push(newTodoObj);

    paintToDo(newTodoObj); // // toDo를 그리기

    saveToDos();
}

3) todo 를 그려주는 li에 id 추가

function paintToDo(newTodo){
    const li = document.createElement("li");
    li.id = newTodo.id;
    
    const span = document.createElement("span");
    const button = document.createElement("button"); // 삭제하는 버튼 추가

    span.innerText = newTodo.text;
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

    button.addEventListener("click", deleteToDo);   // x 버튼 클릭 시
}

4) 사용자가 todo 삭제 시 어떤 id 를 삭제하는지 콘솔에서 확인

// todo 삭제
function deleteToDo(event){
    // event.target.parentElement : 클릭한 <button> 의 부모태그
    const li = event.target.parentElement;
    console.log(li.id); // 삭제되는 li 태그 id 확인
    li.remove();
}

8. Deleting To Dos part Two - filter 사용하기

지우고 싶은 item 을 제외하고 새로운 array 만들기
filter 함수를 사용하면 된다.
filter 는 forEach 와 비슷하다.

filterTest 함수가 true 를 리턴 모든 item 이 유지

filterTest 함수가 false 를 리턴하닌까 비어있는 array 가 만들어 졌다.

∴ array의 item 을 유지하고 싶으면 true를 리턴

지우고 싶은 item 을 빼고 새로운 array 생성

item 을 삭제하는 것이 아니라 제외하는 것이다.

예제 1 ) 3 지우기

1. item 이 3이 아니면 true 리턴

function filterTest(item){return item !==3 }

2. 결과 확인

예제 2 ) arr 배열에서 'banana' 지우기

예제 3) arr 배열에서 1000 보다 작거나 같은 수 출력

9. Deleting To Dos part Three

1) deleteToDo 함수에 filter 사용해서 삭제하려는 id 와 li 태그의 id 비교

toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

→ 삭제하려는 id 와 다른 id 를 가진 데이터는 남겨 두기

2) 삭제 안한 데이터 localStorage 저장

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

const TODOS_KEY = "todos";
let toDos = [];

 // localStorage에 저장 
function saveToDos() {
    // 배열을 stringify로 저장해서 배열 형태로
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); 
}

// todo 삭제
function deleteToDo(event){
    // event.target.parentElement : 클릭한 <button> 의 부모태그
    const li = event.target.parentElement;
    console.log(li.id); // 삭제되는 li 태그 id 확인
    li.remove();

    // li.id 가 type 이 String이므로 parseInt로 형변환
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    // console.log(toDos)
    saveToDos();
}


// toDo를 그리는 역할
function paintToDo(newTodo){
    const li = document.createElement("li");
    li.id = newTodo.id;

    const span = document.createElement("span");
    const button = document.createElement("button"); // 삭제하는 버튼 추가

    span.innerText = newTodo.text;
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);

    button.addEventListener("click", deleteToDo);   // x 버튼 클릭 시
}

function handleToDoSubmit(event) {
    // submit 의 기본동작인 새로고침이 안되도록
    event.preventDefault();

    const newTodo = toDoInput.value;
    toDoInput.value = "";  // toDoInput 에 입력한 내용 지우기

    const newTodoObj = {
        text : newTodo,
        id : Date.now()
    }

    toDos.push(newTodoObj);

    paintToDo(newTodoObj); // // toDo를 그리기

    saveToDos();
}

toDoFrom.addEventListener("submit", handleToDoSubmit);

// localStorage 에 저장된 값 가져오기
const savedToDos = localStorage.getItem(TODOS_KEY); 

// localStorage에 Key todos 값이 있으면 브라우저 실행했을 때 출력되도록
if (savedToDos) {   // savedToDos !== null
    const parsedToDos = JSON.parse(savedToDos);
 
    // parsedToDos.forEach((item) => console.log("this is turn of ", item));    

    toDos = parsedToDos;

    // forEach 함수는 paintToDo를 parsedToDos 배열의 요소마다 실행
    parsedToDos.forEach(paintToDo); 
}

결과 확인

' 노마드 코드 - 바닐라 JS로 크롬 앱 만들기' 공부하면서 정리한 내용입니다.

728x90

저작자표시 (새창열림)

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

바닐라 JS로 크롬 앱 만들기 ( #8 Weather) (0)	2022.04.26
바닐라 JS로 크롬 앱 만들기 ( #7 TO DO LIST(1) ) (0)	2022.04.22
바닐라 JS로 크롬 앱 만들기 (#6 QUOTES AND BACKGROUND) (0)	2022.04.22
[JS] D-Day 기능 만들기 (0)	2022.04.21
바닐라 JS로 크롬 앱 만들기 (#5 CLOCK) (0)	2022.04.21

5. Loading To Dos part One

6. Loading To Dos part Two

7. Deleting To Dos part One

8. Deleting To Dos part Two - filter 사용하기

9. Deleting To Dos part Three

결과 확인

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

검색 태그

티스토리툴바