[ JS : 실습 : Making a To Do List (3) ]

📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.

Making a To Do List (3)

JSON

‘JavaScript Object Notation’이란 뜻
데이터를 전달할 때, 자바스크립트가 데이터를 다룰 수 있도록 object로 바꿔주는 기능인 셈.

"Local storage에는 JS의 data를 저장할 수가 없다!"

JS는 local storage에 있는 모든 data를 string으로 저장하려고 한다. 즉, Local storage에는 오직 string만 저장할 수 있다.

Step 4. JSON.stringfy 을 사용하여, js에 값을 저장해보자.

function saveToDos() {
    ❌ localStorage.setItem(TODOS_LS, toDos); ❌
    /* Local storage에는 JS의 data를 저장할 수가 없기 때문에 JSON.stringfy를 적용해보자.*/
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); 
}

즉, JSON.stringfy 은 JS object(data)를 string으로 바꿔준다!!
JSON.stringfy 을 사용하여 value 값을 submit 하면 이렇듯, value값(해야할 일 1, 해야할 일2)가 string의 형태로 저장되며, id 값을 하나씩 갖고 있는 것을 확인할 수 있다.

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if (loadedToDos !== null) {
    console.log(loadedToDos);
    // 출력해보면 
    }
}

새로 고침을 해도 value값(해야할 일 1, 해야할 일2)가 string의 형태로 저장되며, id 값을 하나씩 갖고 있는 것을 확인할 수 있다.
Step 5. JSON.parse 을 사용하여, js에 저장된 string 형태의 값을 object 형태로 변환해보자.

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

/* JSON.stringify를 이용하여 불러온 것이 string 이므로, string에서 object로 변환해야 한다. 이때 쓰는 방법이 JSON.parse 이다.*/ 
    const parsedToDos = JSON.parse(loadedToDos);
    console.log(parsedToDos); 
    // 출력해보면 
    }
}

다시 새로고침을 해보면, string의 형태로 저장되어 있던 value값(해야할 일 1, 해야할 일2)가 object(data) 그대로 저장된 것을 확인할 수 있다.

~ 비교해보기 ~
1. JSON.parse 을 적용하지 않았을 때 : string으로 저장되었다.
JSON.parse 을 적용했을 때 : object(data)로 변환-저장되었다.
우리가 local storage에서 불러온 data를 화면 상에 나타나도록 해보자. 즉, pardeToDos의 안에 있는 data에 대해서 paintToDo function함수를 실행할 것이다. 이때 사용하는 것이 array의 명령어인 array.forEach 이다.

forEach

기본적으로 함수를 실행하는데, array에 담겨있는 것들 각각 한번씩 함수를 실행시켜준다.

Step 6. array.forEach 을 사용하여, text value값(해야할 일1, 해야할 일2)을 각각 출력하도록 해보자.

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

parsedToDos에 들어있는 각각의 toDo(text)가 console.log 출력된 것을 확인할 수 있다.

tip.

parsedToDos.forEach(function(toDo) {
    console.log(toDo.text);

이 식을 다른 방식으로도 적용시킬 수 있다.

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);
    // 출력해보면
    }
}

동일하게 출력되었음을 알 수 있다.

다시 되돌아가서, paintToDo( ) 를 사용하여, toDo.text를 웹페이지 상에서 출력해보자.

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

정리하자면,

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    // 1. toDos(TODOS_LS)를 localStorage에서 가져온 뒤
    if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    // 2. JSON.parse를 이용하여 string에서 object로 변환시키고,
    parsedToDos.forEach(function(toDo) {
    // 3. 각각의 text 값(해야할 일1, 해야할일 2)에 대해서
        paintToDo(toDo.text);
    // 4. 웹페이지 상에서 출력되도록 만드는 paintToDo라는 function함수가 실행될 것이다.
    }
}

새로고침을 해보면, 자동적으로 text value 값(해야할 일1, 해야할 일2)가 화면에 출력되었음을 확인할 수 있다.