자바스크립트 (Javascript) 입문 - 자바스크립트로 투두리스트 만들기 (3) -Array.find/Array.filter/removeChild

2021-08-14

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

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

---

 

저번 포스팅에 이어 todonelist를 만들어봅시다.

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)
}

paintToDo와 paintFin 함수는 각각 buildGenericLi를 실행시켜주고, 완료 버튼과, 백버튼을 각각 만들어줍니다.

이 버튼이 click event를 감지하면, 두 함수는 각각 handleCompleteClick함수와 handleBackClick함수를 실행시킵니다.

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;
}

buildGenericLi 함수는 HTML에 li, span, button 을 만들어줍니다. 위와 같이, span에는 task.text(input.value입니다.)값을 입력해주고 button 에는 삭제 버튼을 입력해줍니다. 전과 같이 click event 가 감지되면 deleteBtn을 실행됩니다. 만들었던 span과 button을 li에 포함시키고 li의 아이디를 task.id 로 만들어 줍니다. 이 일련의 과정을 통해 id 를 가지고 value 값과 2개의 button 을 가진 li 가 브라우저에 나타납니다.

각각의 버튼이 click event를 감지했을 떄 실행된 세 함수 deleteBtn, handleCompleteClick, handleBackClick 는 아래와 같습니다. 

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();
}

deleteBtn 함수는 클릭된 버튼을 target.parentNode(이와 관련된 설명은 todolist-(1)에 기재되있습니다.)를 통해 

button의 부모 li를 li로 변수 설정하고, removeChild를 통해 li를 삭제합니다. 

그리고 li의 id를 removeFormFin 함수와 removeFromToDo 함수에 각각 매개변수로 보냅니다.

마지막으로 saveState 함수를 통해 저장합니다.

 

handleCompleteClick 함수도 deleteBtn 함수와 같이 부모를 li로 변수 설정하고 li를 삭제합니다.

그리고 li의 id를 findInToDos 함수와  removeFromToDo함수에 보내주고 findInToDos의 함수에 li의 id가 변수로 실행된 return 값을 addToFin 과 paintFin 함수에 매개변수로 보냅니다.

마지막으로 saveState 함수를 통해 저장합니다.

 

handleBackClick 함수는 handleCompleteClick 함수와 같은 과정을 다룹니다.(물론 두 함수에서 사용되는 함수는 분리됩니다. ex>removeFromToDo !== removeFromFin)

 

handleBackClick 함수와 handleCompleteClick 함수에서 다루지만 아직 작성이 안된 함수 중 findInToDos 함수와 findInFin를 작성해보자.

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

이 두 함수에서 사용된 find 매서드는 제공된 배열의 요소 중 조건에 만족된 첫 번째 값이 return 값을 가진다.

만약 조건을 만족하는 요소가 없다면 undefined 가 return 값이 된다.

Ex)

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

taskId 는 handleBackClick함수와 handleCompleteClick 함수에서 li의 id값이다.  toDos나 fins의 배열 중 li의 id와 같은 값을 가지는 요소가 있는지 확인하고 확인이 된다면 이를 handleBackClick함수와 handleCompleteClick 함수에서 task 로 변수 설정을 해준다. 이 task 값을 다시 각각 addToFin과 addToToDo 에 매개변수로 보내준다.

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

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

addToToDo와 addToFin은 각각 toDos와 fins 배열에 push 매서드를 통해 추가한다.

이해를 돕기위해 로직을 설명하면, handleBackClick함수와 handleCompleteClick 함수에서 BackClick Button 값을 클릭한 li는 삭제되고 이를 toDos 배열에 추가하고, CompleteClick Button 값을 클릭된 li는 삭제되고 Fins 배열에 추가되는 것이다.

네이밍을 통해 값이 삭제되는 것을 예상할 수 있는 removeFromToDo 함수와 removeFromFin 함수를 작성해보자.

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

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

 removeFromToDo 함수와 removeFromFin 함수는 각각 filter 매서드를 통해 매개변수 taskId(li의 id)와 toDos 요소의 id와 같지 않은 것을 return 값을 내고 이 값만이, toDos 배열이 된다. 같은 방식으로 fins 요소의 id 와 taskId 값이 같지않은 것이 fins 배열이 된다. 한 마디로 정리하면, taskId 와 같은 id 를 가진 요소는 toDos와 fins의 배열의 요소가 될 수 없다.

filter 매서드는 조건을 통과한 요소를 새로운 배열로 만드는 매서드이다.

마지막으로 handleFormSubmit에서 getTaskObject(toDoInput.value)를 taskObj로 변수 설정을 도와준 getTaskObject 함수를 작성해보자

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

id 값을 Date.now로 통해 고유한 id로 만들어주고 이를 String 매서드를 통해 문자열로 바꿔주고 text는 그대로 설정해준다.

이로써 todolist 와 todonelist를 만들어 자유롭게 완료, 롤백, 삭제를 할 수 있고 이를 localStorage에 저장해 새로고침해도 바뀌지않게 만들어줄 수 있었다. 

 

이 토이프로젝트를 진행하며, 내가 생각한 간단한 기능이라도 코드로 구현할때는 정밀한 로직이 필요하다는 것을 느꼈다.

생각한대로 움직이지 않는다. 내가 구성한대로 움직인다. 

++ 이번주에 일일 코로나 확진자가 2000명이 넘어 웹페이지에 코로나확진자 수를 매일 업로드해주는 기능을 구현하려했지만, 사지방(군대 컴퓨터)로 확장프로그램과, NodeJS, Python을 사용할 수 없어 크롤링을 포기했다. 전역하고 이 기능을 추가하고 크롤링 관련 포스팅도 올리겠다.

 

---

 

출처

 

Node.removeChild() - Web APIs | MDN

 

Array.prototype.find() - JavaScript | MDN

 

 

Array.prototype.filter() - JavaScript | MDN

 

 

노마드 코더 Nomad Coders