기록하는 개발자

[VanillaJS] Google Chrome App Momentum 만들기 - 4-1. Checklist Load 본문

Web/Javascript

[VanillaJS] Google Chrome App Momentum 만들기 - 4-1. Checklist Load

밍맹030 2021. 8. 4. 17:52
728x90

Checklist Load 구현

- list를 입력 받아 localStorage에 저장한다.

- 새로고침 후에도 localStorage로부터 이전에 저장한 value를 load해서 list를 유지할 수 있다.

- 이전 정보 load 후 추가로 list를 입력 받을 때 덮어쓰기 되지 않고 기존 list에 추가되도록 한다.

< HTML >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet", href="css/style.css">
    <title>Momentum</title>
</head>
<body>
    <!--input의 유효성 검사를 작동시키기 위해서는 form 태그를 사용해야한다.-->
    <form class="hidden" id="login-form"> 
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log in</button>
    </form>

    <h2 id="clock"> 00:00:00</h2>
    <h1 class="hidden" id="greeting"></h1> <br>

    <form id="todo-form">
        <input required type="text" placeholder="Write a To Do and Press Enter.">
    </form>

    <!--js로 리스트를 추가할 부분-->
    <ul id="todo-list"></ul>

    <div id="quote">
        <span></span>
        <span></span>
    </div>
    
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    <script src="js/todo.js"></script>
</body>
</html>

< todo.js >

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

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

function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo =toDoInput.value;
    toDoInput.value="";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

function paintToDo(newToDo){
    const li = document.createElement("li");

    const span = document.createElement("span");
    span.innerText = newToDo;

    const button = document.createElement("button");
    button.innerText = "❌";

    button.addEventListener("click",deleteToDo);

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

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

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

toDoForm.addEventListener("submit", handleToDoSubmit)

const savedToDos=localStorage.getItem(TODOS_KEY);

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

 

< 변수 선언 >

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

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

배열 toDos : 새로운 todo가 input될 때마다 해당 text를 push하는 용도. 배열이 수정 가능하도록 let으로 선언한다.

TODOS_KEY : 두 번 이상 사용되는 문자열은 변수로 미리 선언해둔다.

 

< function : handleToDoSubmit >

function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo =toDoInput.value;
    toDoInput.value="";
    toDos.push(newToDo);
    paintToDo(newToDo);
    saveToDos();
}

 

- 새로고침 없이도 list 입력 후 enter를 누르면 form이 빈칸이 되도록 한다.

    → 입력한 내용을 newToDo에 임시로 저장하고 toDoInput을 ""로 대체한다.

- 배열에 newToDo를 저장한다.

- paintToDo(newToDo) 를 호출한다.

- saveToDos() 를 호출한다.

 

< function : paintToDo >  :  list가 추가 되면 li, span, button 태그를 생성 해 html에 추가한다.

function paintToDo(newToDo){
    const li = document.createElement("li");

    const span = document.createElement("span");
    span.innerText = newToDo;
    
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo);

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

- createElement 함수를 이용해 li 태그를 생성한다.

 

- createElement 함수를 이용해 span 태그를 생성하고 innerText를 input으로 받은 text인 newToDo로 지정한다.

 

- createElement 함수를 이용해 button 태그를 생성하고  innerText를 "❌" 아이콘으로 지정한다.

 

- button 클릭을 통해 list를 삭제하기 위해 deleteToDo 함수를 가진 eventlistener를 추가한다.

 

- 생성된 태그에 필요한 모든 기능을 추가한 후, appendChild는 맨 마지막에 수행한다. 
     1. li의 child로 span 추가
     2. li의 child로 button 추가
     3. ul(toDoList)의 child로 li 추가

 

< function : deleteToDo >  :  list 에서 원하는 항목 삭제 (localStorage에서는 삭제되는 버전 아직 아님)

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

어떤 버튼이 클릭되었는가? -> event에 대한 정보를 console.dir()를 통해 찾아 낸다.

console.dir(event);
→ target : button

console.dir(event.target);
→ parentNode, parendElement : button의 부모 요소

console.dir(event.target.parendElement);
→ button의 부모 요소 : li

따라서 버튼 클릭을 통해 선택한 요소를 삭제하기 위해서는 button의 부모요소 li를 삭제한다.

 

< function : saveToDos >  :  input을 실행 할 때 마다 localStorage에 toDos 배열의 내용 넣기

function saveToDos(){ 
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

- 배열 toDos를 localStorage에 배열 모양 그대로 문자열화 하여 추가해주기 위해 JSON.stringify() 함수를 사용한다.

JSON.stringify(arr)) →  배열 arr을 string 화 해준다.
ex) JSON.stringify(["1","2","3","4"]))  →   "["1","2","3","4"]"  

 

< 함수 실행 부 > 

toDoForm.addEventListener("submit", handleToDoSubmit)

const savedToDos=localStorage.getItem(TODOS_KEY);

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

- toDoForm 에 handleToDoSubmit 함수를 가진 eventlistener를 추가한다. 

- 변수 savedToDos 에 localStorage에서 "todos" 를 가져와 저장한다.

 

< if문 >

- 저장된 savedToDos 이 있는 경우에만 JSON.parse() 함수를 이용해

    string으로 저장한 배열을 객체화하여 다시 배열로 받아오고,  parsedToDos에 저장한다.

- 새로고침 후 list를 추가하는 경우 덮어쓰기 방지를 위해 toDos 배열에 기존 localStorage에 저장되어있던 list 정보를 업로드 한다.

- parsedToDos의 각 요소에 대해 paintToDo 함수를 호출한다.

 

JSON.parse(arr)) →  단순 string을 객체화 해준다.

ex) JSON.parse("["1","2","3","4"]") →  ["1","2","3","4"] 

 

< 일반 함수 선언과 arrow 함수 선언 방법 >

<function>
functions sayHello(item){
    console.log("this is the turn of", item);
}
parsedToDos.forEach(item);

<arrow function>
parsedToDos.forEach((item)=>console.log("this is the turn of", item));

arrow 함수 선언 시 장점

 - 함수 이름을 사용하지 않아도 된다.

 - 짧은 함수를 작성할 수 있게 되며 call back 함수 작성시 유용하다.

 

그러나 남용하지는 않기로 하자,,

https://velog.io/@raram2/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%82%A8%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

 

화살표 함수를 남용하면 안되는 이유

ES6 화살표 함수(Arrow function) 방식은 작성에 편리하고 보기에도 간결하기 때문에 한번 익히고 나면 이 방식만 고수하는 경우도 종종 있다.하지만 사람이 쓰고 읽기에 좋다는 이유만으로 남용하게

velog.io

 

 

728x90
저작자표시

'Web > Javascript' 카테고리의 다른 글

[VanillaJS] Google Chrome App Momentum 만들기 - 5. weather  (0) 2021.08.06
[VanillaJS] Google Chrome App Momentum 만들기 - 4-2. Checklist Delete  (0) 2021.08.05
[VanillaJS] Google Chrome App Momentum 만들기 - 3-2. Random Background Image  (0) 2021.08.03
[VanillaJS] Google Chrome App Momentum 만들기 - 3-1. Random Quotes  (0) 2021.08.03
[VanillaJS] Google Chrome App Momentum 만들기 - 2. Clock  (0) 2021.08.03
'Web/Javascript' Related Articles more