자바스크립트(Javascript) 입문 - 자바스크립트로 투두리스트 만들기 (2) -JSON.parse/JSON.stringify/array.forEach/setItem/getItem

2021-08-14

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

---

 

 

이번 포스팅에선 todolist를 진화시켜봅시다.

저번 todolist에선, user가 todolist를 입력하고, 삭제를 할 수 있으며

새로고침을 해도 값이 저장되는 것을 구현했습니다. 

이번 포스팅에는 todonelist를 만들어 user가 todolist를 완료했을 때, todonelist로 이동을 하고,

todonelist을 완료하지 못했을 때, todolist로 이동하는 것을 구현해봅시다.

위는 HTML과 CSS, 그리고 To-Done-List를 모두 완성한 브라우저의 모습입니다.

(이 포스팅에서는 HTML과 CSS를 다루지않습니다.)

 

먼저 코드를 확인해봅시다.

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

const TODOS_LS = "toDos";
const FINS_LS = "finishedList";

let toDos, fins;


function getTaskObject(text) {
	return {
		id: String(Date.now()),
		text
	};
}

function findInToDos(taskId){
	return toDos.find(function(task){
		return task.id === taskId;
	})
}

function saveToDos(task){
	toDos.push(task);
}

function findInFin(taskId){
	return fins.find(function(task){
		return task.id === taskId;
	})
}

function removeFromToDo(taskId){
	toDos = toDos.filter(function(task){
		return task.id !== taskId;
	})
}

function removeFromFin(taskId){
	fins = fins.filter(function(task){
		return task.id !== taskId;
	})
}

function addToToDo(task){
	toDos.push(task)
}

function addToFin(task){
	fins.push(task)
}

function deleteBtn (event){
	const li = event.target.parentNode;
	li.parentNode.removeChild(li);
	removeFromFin(li.id);
	removeFromToDo(li.id);
	saveState();
}

function handleCompleteClick(event){
	const li = event.target.parentNode;
	li.parentNode.removeChild(li);
	const task = findInToDos(li.id);
	removeFromToDo(li.id);
	addToFin(task);
	paintFin(task);
	saveState();
}

function handleBackClick(event){
	const li = event.target.parentNode;
	li.parentNode.removeChild(li);
	const task = findInFin(li.id);
	removeFromFin(li.id);
	addToToDo(task);
	paintToDo(task);
	saveState();
}


function buildGenericLi(task){
	const li = document.createElement("li");
	const span = document.createElement("span");
	const delBtn = document.createElement("button");

	span.innerText = task.text;
	delBtn.innerText = "X";
	delBtn.addEventListener("click", deleteBtn);
	
	li.append(span, delBtn);
	li.id = task.id;
	return li;
}

function paintToDo(task){
	const genericLi = buildGenericLi(task);
	const completeBtn = document.createElement("button");
	completeBtn.innerText = "V";
	completeBtn.addEventListener("click", handleCompleteClick);
	genericLi.append(completeBtn);
	toDoList.append(genericLi);
}

function paintFin(task){
	const genericLi = buildGenericLi(task);
	const backBtn = document.createElement("button");
	backBtn.innerText = "↶";
	backBtn.addEventListener("click", handleBackClick);
	genericLi.append(backBtn);
	finList.append(genericLi)
}

function loadState(){
	toDos = JSON.parse(localStorage.getItem(TODOS_LS)) || [];
    fins = JSON.parse(localStorage.getItem(FINS_LS)) || [];
}


function restoreState(){
	toDos.forEach(function(task){
		paintToDo(task);
	})
	fins.forEach(function(task){
		paintFin(task);
	})
}

function saveState() {
	localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
	localStorage.setItem(FINS_LS, JSON.stringify(fins));
}

function handleFormSubmit(event) {
	
	event.preventDefault();
	const taskObj = getTaskObject(toDoInput.value)
	toDoInput.value = "";
	paintToDo(taskObj);
	saveToDos(taskObj);
	saveState();
}

function init() {
	toDoForm.addEventListener("submit", handleFormSubmit);
	loadState();
	restoreState();
}

init()

 

 

function init() {
	toDoForm.addEventListener("submit", handleFormSubmit);
	loadState();
	restoreState();
}

init()

먼저 함수 init가 실행됩니다. init 함수는 toDoForm에서 submit을 감지해 handleFormSubmit함수를 실행하고,

loadState 함수와 restoreState 함수를 실행합니다.

 

function handleFormSubmit(event) {
	event.preventDefault();
	const taskObj = getTaskObject(toDoInput.value)
	toDoInput.value = "";
	paintToDo(taskObj);
	saveToDos(taskObj);
	saveState();
}

handleFormSubmit 함수는 , 저번 포스팅에서 배운 것과 같이 preventDefault 매서드를 통해 새로고침을 하지않도록 막습니다.

submit이 됐다는건, user가 todolist input을 입력했다는 것이니, Input창을 비우고, paintToDo와 saveToDos 함수에 input.value값을 넘겨줍니다. 그리고 saveState함수를 실행합니다.

function saveState() {
	localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
	localStorage.setItem(FINS_LS, JSON.stringify(fins));
}

saveState함수는 저번시간에 배운 것처럼 localStorage에 setItem 매서드를 실행시킵니다. 

setItem 매서드는 key name과 value가 넘겨져왔을때 그들의 key를 Storage object에 더하거나, 이미 존재한다면 업데이트해줍니다. 

또한, JSON.stringify를 통해 json 객체를 String 객체로 변환시켜줍니다.

function loadState(){
	toDos = JSON.parse(localStorage.getItem(TODOS_LS)) || [];
    fins = JSON.parse(localStorage.getItem(FINS_LS)) || [];
}

loadState 함수는 JSON.parse 매서드를 사용합니다. JSON.pare 매서드는 string 객체를 json 객체로 변환시켜줍니다.

또한 getItem 매서드를 통해 toDos와 fins에 localStorage의 item 값을 배열로 저장합니다.

getItem 매서드는 keyname을 받았을 때, Storage에 저장된 key's value를 return하거나, 값이 존재하지않을때

null 값을 return합니다.

function restoreState(){
	toDos.forEach(function(task){
		paintToDo(task);
	})
	fins.forEach(function(task){
		paintFin(task);
	})
}

restoreState 함수는 toDos와 fins 배열의 값을 각각 paintToDo함수와 paintToFin 함수에 매개변수로 작용합니다.

이때 forEach 매서드는 배열의 각 값을 함수에 제공합니다.

포스팅이 길어지는 관계로 다음 포스팅에서 이어서 todonelist를 완성하겠습니다!

 

 

 

 

---

 

출처

 

Storage.setItem() - Web APIs | MDN

 

코딩교육 티씨피스쿨

 

Storage.getItem() - Web APIs | MDN

 

 

노마드 코더 Nomad Coders