자바스크립트 3.4~

yejin·2021년 3월 15일

[크롬 앱 클론] javascript

목록 보기

5/6

3.4

html

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="what is your name?" />
    </form>
    <h4 class="js-greetings gretting"></h4>

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

    <script src="clock.js"></script>
    <script src="gretting.js"></script>
    <script src="todo.js"></script>
  </body>
</html>

javascript

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

const TODOS_LS = 'toDos';

function paintToDo(text){
    console.log(text);

}

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

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

    }
}

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

}

init();

결과

function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    //값 입력하면 제출하고 다시 wirte a to do 화면으로 넘어가기
    toDoInput.value ="";
}

결과

javascript


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(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
}

function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    //값 입력하면 제출하고 다시 wirte a to do 화면으로 넘어가기
    toDoInput.value ="";
}

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

    }
}

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

}

init();

결과

그런데 종종 이모지가(😍😍❌ 이런게 이모지)깨져보일때가 있는데 그럴땐 html에서

<meta charset="utf-8" />

<head>안에 저거 넣어주기

3.5

javascript

//해야할 일을 생성했을 때 배열에 추가되도록.
const 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(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
    //해야할 일을 생성했을 때 배열에 추가되도록.
    const toDoObj = {
        text: text,
        id: toDos.length + 1

    };

    toDos.push(toDoObj);
}

결과

li에게도 id를 할당할거야. 그래야 나중에 버튼을 클릭했을 때 어떤 li를 지워야 하는지 알 수 있을 거니까

위 코드 좀 더 보기 이쁘게 + li에게도 id할당

//해야할 일을 생성했을 때 배열에 추가되도록.
const toDos = [];

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;
    delBtn.innerText = "❌";
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id = newId;
    toDoList.appendChild(li);
    //해야할 일을 생성했을 때 배열에 추가되도록.
    const toDoObj = {
        text: text,
        id: newId

    };

    toDos.push(toDoObj);
}

결과

값을 입력하고 요소 검사 해보면 저렇게 id가 잘 부여되는 모습을 볼 수 있어

Q. todo를 왜 이런식으로 저장하는거야?
A. local storage에도 todo를 저장해둬야 하기 때문

//해야할 일을 생성했을 때 배열에 추가되도록.
const toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_LS, toDos);
}

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;
    delBtn.innerText = "❌";
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id = newId;
    toDoList.appendChild(li);
    //해야할 일을 생성했을 때 배열에 추가되도록.
    const toDoObj = {
        text: text,
        id: newId

    };

    toDos.push(toDoObj);
    //꼭 toDos안에 집어넣은 이후에 불러야함.
    saveToDos();
}

결과

근데 보니까 [object Object] 로 되어있네? 이런걸 원했던 게 아닌데!
이유) local stroage에는 자바스크립트의 data를 저장할 수 없어 오직 string만 저장 가능.
자바스크립트는 local storage에 있는 모든 데이터를 string으로 저장하려고 함.

=> 그래서 우리는 object가 string이 되도록 만들어야해.

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

JSON.stringify는 자바스크립트 object를 string으로 바꿔줌

결과

toDos를 불러오는 작업

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

결과
콘솔창에 이렇게 뜸.
[{"text":"asdf","id":1},{"text":"asdf","id":2}]

문제는 불러온게 string이라는거야.

tip) JSON은 object -> string, string -> object 둘 다 변환 가능

function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        console.log(loadedToDos);
        const parsedToDos = JSON.parse(loadedToDos);
        console.log(parsedToDos);
    }
}

결과

모든 todo항목들에 대해서, 즉 parsedToDos 안에 있는 것들에 대해서 printToDo function실행

forEach는 기본적으로 함수를 실행하는데 array에 담겨있는 것들 각각에 한번씩 함수를 실행시켜 주는거임

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

결과

할일 저장하면 저렇게 콘솔에 뜸.
창 나가기 하고나서 다시 틀면 전에 입력했던 값이 저장되어 있어서 전에 입력했던 할일 값이 콘솔에 뜸.

function은 따로 떼서 밖에다가 둘 수도 있음

function something(toDo) {
    console.log(toDo.text);
}

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

이렇게^^ㅎㅎ
toDos에 있는 각각에 대해서 function실행

결과는 아까랑 똑같아.

하지만 니꼬쌤과 나는 후자 방법보단 전자 방법으로 할거얌

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

결과

wow 이제 새로고침해도 todolist가 안사라지는 모습

yejin

♪(๑ᴖ◡ᴖ๑)♪ 기회는 도전에서부터 시작되는 것

이전 포스트

자바스크립트 3.0~3.3

다음 포스트

자바스크립트 3.4~

[크롬 앱 클론] javascript

3.4

3.5

자바스크립트 3.0~3.3

자바스크립트 과제

0개의 댓글