JS (4) : To-Do List 만들기 (2)

이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다.

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

이전 포스팅까지 우리는 HTML 및 JS를 이용하여 To-Do List의 몇 가지 기능을 구현하였다. 이번 포스팅에서는 local storage를 사용하여 우리의 To-Do 들을 저장하는 기능을 구현해 보자.

 

 우리는 추가한 To-Do들을 브라우저에 저장할 것이다. 이때, 사용할 수 있는 것이 바로 local storage이다. 우리는 to-do를 추가하면, 그 to-do를 local storage에 저장할 것이다. 그리고 페이지를 새로 방문했을 때, 우리가 저장한 to-do를 불러올 수 있도록 만들 예정이다.

 

To-Do 저장하기

우선, 저장 기능부터 구현해 보자.

To-Do를 담을 배열을 만든 후, 새롭게 To-Do를 추가하여 화면에 보여주기 전, 만들어 준 배열에 To-Do를 하나씩 push 해주도록 하자.

JS 파일을 다음과 같이 수정해 보자.

 

const toDoForm = document.querySelector('#todo-form');

const toDoInput = document.querySelector('#todo-form input');

const toDoList = document.querySelector('#todo-list');

const toDos = [];

function deleteToDo(event) {

    const li = event.target.parentElement;

    li.remove();

}

function paintToDo(newTodo) {

    const li = document.createElement('li');

    const span = document.createElement('span');

    const button = document.createElement('button');

    span.innerText = newTodo;

    button.innerText = 'X';

    button.addEventListener('click', deleteToDo);

    li.appendChild(span);

    li.appendChild(button);

    toDoList.appendChild(li);

}

function handleToDoSubmit(event) {

    event.preventDefault();

    const newTodo = toDoInput.value;

    toDoInput.value = '';

    toDos.push(newTodo);

    paintToDo(newTodo);

}

toDoForm.addEventListener('submit', handleToDoSubmit);

 

toDos라는 배열을 생성하고, handleToDoSubmit() 함수에 toDos.push()를 통해 새로 만든 to-do를 추가해 주었다.

 

 

실행 화면의 모습이다. console창에 직접 배열의 이름을 입력한 후 enter를 눌러보면, 우리가 입력한 to-do들이 배열 안에 들어가 있는 것을 확인할 수 있다.

 

이제 이 배열을 이용해 local storage에 저장해 보자.

JS 파일에 다음과 같은 함수를 만들어 보자.

function saveToDos() {

    localStorage.setItem('todos', toDos);

}

이 함수는 local storage에 무언가를 저장할 때 사용하는 함수이다.

우리는 우리가 만든 배열인 toDos를 저장하도록 인자를 넣어주었다.

첫 번째 인자는 저장할 데이터의 키, 두 번째 인자는 저장할 데이터를 넣어주면 된다.

 

그 후, 이 함수를 다음과 같이 handleToDoSubmit() 함수에서 호출해 주자.

function handleToDoSubmit(event) {

    event.preventDefault();

    const newTodo = toDoInput.value;

    toDoInput.value = '';

    toDos.push(newTodo);

    paintToDo(newTodo);

    saveToDos();

}

 

코드를 수정한 후, todo 페이지로 가서 응용 프로그램(Application)을 확인해 보자.

 

 

다음과 같이 우리가 입력한 값들이 저장되어 있는 모습을 확인할 수 있다.

이 페이지에서 새로고침을 해도, local storage의 값은 사라지지 않는다.

 

하지만, 문제점이 있다.

1. 새로고침을 하면 local storage의 값들을 다시 화면에 그려주지 않는다.

2. 새로고침 후 새로운 값을 입력하면 기존의 local storage에 저장되어 있는 값 위에 덮어씌워진다.

이 문제점은 이번 포스팅에서 차차 수정해 나갈 예정이다.

 

위 문제점을 해결하기 전에, 저장하는 형태를 text 형태가 아닌 array 형태로 저장을 해보자.

 

실제로 array를 저장할 수는 없지만, text 형식을 array 처럼 보이게 저장할 것이다.

이를 위해, 브라우저 안에 있는 특정 기능을 활용할 것이다. 이 기능은 JS object나 array 등 어떤 자료형이든 string으로 만들어 주는 기능이다.

이 역할을 하는 함수는 JSON.stringify() 이다.

 

그렇다면, 이 함수를 사용해서 saveToDos 함수를 수정해 보자.

function saveToDos() {

    localStorage.setItem('todos', JSON.stringify(toDos));

}

우리가 만들어 준 toDos 배열을 그대로 string 형태로 바꾸어 저장해 준다.

 

To-Do 페이지에서 확인했을 때 배열 형식으로 저장되어 있는 것을 확인할 수 있다. 물론 text로 저장되어 있지만, 적어도 array 형식은 지키면서 저장되어 있는 것을 볼 수 있다.

이 형식을 지켜서 저장을 한 후, 이를 통해 local storage에서 데이터를 불러올 것이다.

그렇다면, 데이터를 불러오는 기능도 한 번 구현해 보자.

 

To-Do 불러오기

우리는 JSON.stringify()를 통해서 array를 형태 그대로 string으로 바꿔주었다. 그렇다면 이번엔, 바꾼 string을 array로 바꾸는 방법을 우선 알아보자. 이를 이용해 To-Do를 불러올 예정이다.

이때 사용할 함수는 JSON.parse()라는 함수이다. 

 

To-Do 페이지의 console 창으로 돌아와서, 다음과 같이 입력해 보자.

 

JSON.parse(localStorage.getItem("todos"))

 

 

결과는 다음과 같다. 우리가 형식을 지켜 저장한 string을 JSON.parse() 함수를 통해 원상복구 시킬 수 있다. localStorage.getItem() 함수는, local storage에 저장되어 있는 값을 키를 사용하여 불러올 수 있는 함수이다.

인자로는 저장되어 있는 키를 이용한다.

 

유용한 기능을 알게 되었으니, 이 기능을 이용하여 저장되어 있는 to-do를 불러오는 기능을 구현해 보도록 하자.

JS 코드를 다음과 같이 수정해 보자.

 

const toDoForm = document.querySelector('#todo-form');

const toDoInput = document.querySelector('#todo-form input');

const toDoList = document.querySelector('#todo-list');

const TODOS_KEY = 'todos';

const toDos = [];

function saveToDos() {

    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));

}

function deleteToDo(event) {

    const li = event.target.parentElement;

    li.remove();

}

function paintToDo(newTodo) {

    const li = document.createElement('li');

    const span = document.createElement('span');

    const button = document.createElement('button');

    span.innerText = newTodo;

    button.innerText = 'X';

    button.addEventListener('click', deleteToDo);

    li.appendChild(span);

    li.appendChild(button);

    toDoList.appendChild(li);

}

function handleToDoSubmit(event) {

    event.preventDefault();

    const newTodo = toDoInput.value;

    toDoInput.value = '';

    toDos.push(newTodo);

    paintToDo(newTodo);

    saveToDos();

}

toDoForm.addEventListener('submit', handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos) {

    const parsedToDos = JSON.parse(savedToDos);

    parsedToDos.forEach(paintToDo);

}

addEventListener 아래에 우리가 저장한 to-do들을 불러오는 코드를 작성하였다.

"todos"라는 문자열을 2번 사용하고 있기 때문에 따로 const를 사용하여 변수로 저장하였다.

만약 getItem을 통해 불러온 값이 있다면, JSON.parse() 함수를 통해서 array로 바꿔준다.

array 안에는 forEach()라는 함수가 있는데, 이 함수는 array의 요소 하나하나에 인자로 들어간 함수를 각각 적용하는 역할을 한다.

forEach() 함수의 인자로 paintToDo 함수를 줘서 local storage에 저장되어 있던 요소들을 화면에 그려준다.

 

 

실행 결과는 다음과 같다. 새로고침을 하면, 저장되어 있는 값들이 화면에 나타나는 것을 볼 수 있다.

이렇게 우리는 위에서 보았던 1번 문제를 해결하였다.

하지만, 여전히 2번 문제는 해결하지 못했다. 현재 상황에서 할 일들을 새로 추가해 보자.

 

 

추가한 내용이 이전 내용 위에 덮어씌워졌다.

이런 일이 발생하는 이유는, 우리 application이 시작될 때 toDos array는 항상 비어있기 때문이다.

우리는 비어있는 toDos array에 newToDo를 저장하고, 이 배열을 saveToDos 함수를 통해 local storage에 저장한다. 이 때문에 이전의 to-do들을 함께 저장하지 못하는 것이다.

 

이를 해결하기 위해 코드를 다음과 같이 수정해 보자.

 

const toDoForm = document.querySelector('#todo-form');

const toDoInput = document.querySelector('#todo-form input');

const toDoList = document.querySelector('#todo-list');

const TODOS_KEY = 'todos';

let toDos = [];

function saveToDos() {

    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));

}

function deleteToDo(event) {

    const li = event.target.parentElement;

    li.remove();

}

function paintToDo(newTodo) {

    const li = document.createElement('li');

    const span = document.createElement('span');

    const button = document.createElement('button');

    span.innerText = newTodo;

    button.innerText = 'X';

    button.addEventListener('click', deleteToDo);

    li.appendChild(span);

    li.appendChild(button);

    toDoList.appendChild(li);

}

function handleToDoSubmit(event) {

    event.preventDefault();

    const newTodo = toDoInput.value;

    toDoInput.value = '';

    toDos.push(newTodo);

    paintToDo(newTodo);

    saveToDos();

}

toDoForm.addEventListener('submit', handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos) {

    const parsedToDos = JSON.parse(savedToDos);

    toDos = parsedToDos;

    parsedToDos.forEach(paintToDo);

}

기존의 const 변수였던 toDos를 let으로 변경해 주고, 만약 local storage에 저장되어 있는 todos가 있다면 그 값을 toDos에 저장한다.

이를 통해 추가 기능을 동작할 때, 기존에 저장되어 있는 값들과 함께 local storage에 저장되는 것을 확인할 수 있을 것이다.

실제로 잘 동작하는지 to-do 페이지에서 확인해 보자.

 

 

4,5,6 이 저장되어 있는 상태에서 1,2,3을 추가한 모습이다. 우리가 원하는 대로 잘 동작하는 것을 확인할 수 있다.

 

여기까지 우리는 데이터를 저장하고 불러오는 기능을 추가하였다. 다음 포스팅에서는 삭제 기능을 구현해 볼 예정이다.