[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #To Do List

To Do List

Momentum에 내장되어 있는 To Do List 기능을 구현해 보는 파트이다.

#1. Setup

먼저 준비해야 할 것? 앞에서 수도 없이 많이 했다. To do list를 입력할 form 요소 안에 input 요소를 넣어주고, todo.js라는 이름의 js 파일을 import 해 준다.

그리고 입력한 To do list를 보기 위해서는? 목록 태그가 필요하다. ul 태그와 li 태그를 이용할 것이다. 대신, ul 내에 입력될 li 태그는 JavaScript를 통하여 구현할 것이기 때문에 ul 태그 안은 비워 두도록 한다.

<body>
    <form id="login-form" class="hidden">
        <input required 
        maxlength="15" 
        type="text" 
        placeholder="What is your name?" />
        <input type="submit" value="Log In" />
    </form>
    <h2 id="clock">00:00:00</h2>   <!--default 값을 00:00-->
    <h1 id="greeting" class="hidden"></h1>
    <form id=""todo-form>
        <input type="text" placeholder="Write a To Do and Press Enter" required />
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
        <span></span>
        <span></span>
    </div>
</body>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
<script src="js/todo.js"></script>

HTML에서의 모든 설정이 끝났다면 todo.js로 가서 form과 ul 요소를 const로 선언하여 가져온 후, 함수를 만든다. 여기서 사용하는 함수와 이벤트는 우리가 전에 로그인 폼을 만들었던 그 부분과 매우 흡사하다. 가장 먼저 엔터를 눌렀을 때 새로고침이 되는 기본 동작부터 제어해 주자.

그 다음으로 List에 남으려면 입력한 값을 우리가 알아야 하고, 그것을 가져와 활용해야 한다. 이것도 로그인 폼에서 다 했던 작업이다. 이미 form 요소는 가져왔으니, 그 form 요소 안에 있는 input 요소를 가져와 상수로 선언한 후에 콘솔로 찍어 보면 콘솔에서 확인이 될 것이다.

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

function handleTodoList(event) {
    event.preventDefault();
    console.log(toDoInput.value);
}

toDoForm.addEventListener("submit", handleTodoList);

그런데 문제는 입력을 했을 때, 입력창에서 전에 입력한 내용이 지워지지 않는다는 것이다. 그렇게 되면 항상 더 추가할 때 그 내용을 지우고 다시 작성해야하는 불상사가 발생한다.

이 작업을 위해서는 input 요소에 입력한 내용을 저장한 후, input 요소의 value를 빈 값으로 넣어 주어야 한다.

여기서 명심해야 할 점은 input 요소의 value를 비웠다고 해서 newTodo가 비워지는 것은 아니다. 우리는 newTodo라는 새로운 변수에 이미 내용을 복사해 두었기 때문이다. 그렇기 때문에 console.log에도 출력이 될 수 있는 것이다. 이미 복사를 한 후에 빈 값으로 주는 작업이므로 이미 복사된 변수에게는 아무런 영향도 가지 않는다.

function handleTodoList(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    console.log(newTodo);
}

#2. To Do List 추가

일단, List 요소를 추가하는 동작을 해 줄 함수를 추가하자. 이 함수는 먼저 만들었던 함수 위에 작성해 주게 된다. 이유는 submit이 동작할 때 동작하는 함수 내에서 이 함수를 사용해 동작하도록 해 줄 것이기 때문에 먼저 선언을 해 주는 것이다.

그럼 이제 li 요소를 만드는 코드를 짜 보자. 전에 했던 것처럼 createElement를 사용하여 li와 span을 만들어 준다. span은 왜 만들어 주느냐? li 안에 텍스트와 버튼 모두가 들어가야 하기 때문이다. 나중에 To Do List의 항목을 삭제하는 버튼이 필요하므로 말이다.

각각 만들어 주었는데, 여기서 문제는? span이 li 요소 안으로 들어가야 하는데 지금은 독립되어 있다. 여기서 사용하는 방법은 전에 배웠던 것처럼 appendChild를 사용한다. 그럼 깔끔하게 요소가 생성하는 것을 console.log로 출력해 볼 수 있을 것이다.

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");;
    li.appendChild(span);
    span.innerText = newTodo;
    console.log(li);
}

function handleTodoList(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newTodo);
}

이제 해야 하는 일은 새로운 li 요소를 ul 요소 안에 추가해 주는 일이다. 이것도 간단하게 appendChild로 구현이 가능하다. 확인해 보면, 끝.

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");;
    li.appendChild(span);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

#3. To Do List 삭제

위에서 말한 것처럼 각각의 항목에는 해당 항목을 삭제하는 버튼이 필요하다. 일단, 버튼을 추가하는 것은 매우 간단하다. 위에서 span 요소를 추가했던 것처럼 그대로 코드를 작성해 주면 그만.

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "❌";

    li.appendChild(span);
    li.appendChild(button);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

버튼을 생성해 주었다면, 이제 이 버튼에 이벤트 처리만 해 주면 끝이다. 매우 간단하다. 제일 먼저, 이벤트가 동작할 때 불러올 함수를 만들어 주어야 한다. 리스트를 추가하는 함수 내에서 사용되므로 그 위에 선언해 주는 것이 좋을 것이다. 그리고 button에 이벤트를 추가해 주면 끝. 함수에 삭제되는 코드만 작성하면 완료다.

function deleteTodo() {

};

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo);

    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

많은 버튼들 중에서 우리는 클릭된 버튼이 포함되어 있는 li 요소를 삭제해야 한다. 전에 배운 것 중에 click에 대한 정보를 확인할 수 있는 방법이 있었다. deleteTodo 함수에 console.log(event)를 작성하여 출력해 보자.

콘솔에 많은 정보들이 찍혀나오는 것을 볼 수 있는데, 우리는 이 중에 path라는 것을 확인하면 된다.

path를 펼쳐 li라는 요소에 마우스를 올리면 어떤 li 요소의 버튼이 클릭되었는지 확인할 수 있다.

이건 클릭의 target이 무엇인지 의미하는 것이기도 한데, target은 조금 더 내리면 확인할 수 있다.

console.log(event.target)을 찍어 보면 target을 사진과 같이 출력할 수도 있다.

더 자세히 이 target을 확인하고 싶다면 console.dir(event.target)으로 출력하면 된다. 이 중에 우리가 집중해야 할 것은 parent인데, 어떤 부모 요소의 자식 요소인지 확인이 가능하다. 아래 사진을 확인하면 li 요소가 부모 요소로 출력된다.

그렇다면 우리가 지워야 할 대상을 찾을 수 있다. event.target.parentElement이다. 이 요소를 새로운 상수로 선언해 준 후, 이 대상을 삭제하면 된다.

function deleteTodo(event) {
    const li =  event.target.parentElement;
    li.remove();
};

#4. To Do List 저장

현재, 입력된 To do list가 화면에 나타나긴 하지만 새로고침을 하게 되면 reset이 되어 삭제되어버린다. 우리는 이 To do list를 저장해야 한다. 전에 했던 로그인 폼에서 이름을 저장했던 방식을 사용해 보자. localStorage를 사용하여 저장하고, 저장한 내용들을 불러오는 것이다.

먼저, To Do list들이 저장될 빈 배열을 만들어 준다. 그리고 그 빈 배열에 저장되도록 해 주자. 그리고 개발자도구 콘솔에서 확인하면, 배열에 작성한 To Do list 내용들이 저장된 것을 확인할 수 있을 것이다.

const toDos = [];

.
.
.

function handleTodoList(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    
    toDos.push(newTodo);
    
    paintToDo(newTodo);
}

이제 toDos라는 배열을 localStorage에 저장해야 한다. 그러나, 아쉽게도 localStorage에는 배열을 저장할 수 없다.

localStorage에 저장을 하게 해 주는 함수를 하나 만들어 준 후, 이벤트가 실행되는 함수에 saveToDos 함수를 즉시 실행시켜 준다. 그럼 이제 localStorage에 텍스트로 저장되는 모습을 확인할 수 있을 것이다. 심지어 추가적으로 입력하면 추가가 되기도 한다. 그러나, 여전히 새로고침을 하면 화면에서 삭제되며, 삭제 버튼을 누른다고 삭제가 되지 않는다.

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

.
.
.

function handleTodoList(event) {
    .
    .
    .
    saveToDos();
}

그리고 위에서 말했듯이 배열이 아닌 텍스트로 저장이 되었다. 우리는 이걸 배열로 사용해야 하는데, 텍스트로 저장이 되면 꽤 많이 곤란해진다...... 이건 브라우저의 기능 중 하나인데, 저장하기 위해 자동으로 배열을 텍스트로 변환한 것이다.

JSON.stringify() 메서드를 사용해 보자. 이 메서드는 JavaScript의 value나 object 등을 JSON 문자열로 변환해 주는 역할을 한다.

간단하게, toDos를 이 메서드로 감싸주게 되면 배열의 모습으로 저장되는 모습을 확인할 수 있을 것이다. 그러나, 이건 실제 배열이 아니다. 배열 모양의 텍스트일 뿐.

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

#5. 저장된 To Do List 불러오기

To Do list들이 localStorage에 저장은 되지만, 아직도 새로고침을 하면 증발되는 현상이 남아있다. 이번 단계에서는 이 부분을 고쳐볼 것이다.

우리가 위에서 사용했던 JSON.stringify() 메서드는 JSON 문자열로 바꿔 주는 메서드였다. 다른 방법으로 JSON.parse() 메서드가 있는데, stringify와 반대로 문자열을 객체로 변환해 주는 역할을 한다.

아래 사진에서 볼 수 있듯이, object로 데이터 타입이 출력되는 것을 확인할 수 있다.

우리가 왜 굳이 배열 모양으로 된 텍스트를 배열로 변환해 주느냐? 첫 번째, localStorage에 저장은 해야 하는데 저장은 텍스트만 된다. 그러므로 문자열로 저장을 해 준다. 두 번째, 저장을 할 때 배열로 사용할 예정이므로 배열의 모양을 한 문자열로 저장하기 위해 JSON.stringify() 메서드를 사용하여 JSON 문자열로 저장해 준다. 세 번째, 실제로 배열로 사용해야 하므로 객체로 변환해 주기 위해 JSON.parse() 메서드를 사용한다. 이렇게 정리할 수 있겠다.

이제 이 JSON.parse()를 우리 코드에 활용시켜 보면, 우리가 문자열로 저장한 요소들을 배열로 사용할 수 있게 된다.

const TODOS_KEY = "todos";

.
.
.

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
    const pasedToDos = JSON.parse(savedToDos);
}

이번엔 forEach()라는 메서드에 대해서 알아 보자. 우리가 배열을 사용할 때, 배열 안에 있는 하나의 요소를 사용하게 될 것이다. 그때 사용하는 것이 forEach() 메서드이다. 주어진 함수를 배열 요소 각각에 대해 실행하게 만들 수 있다. 테스트로, sayHello라는 함수를 forEach() 메서드로 실행시켜 보면, 배열의 갯수마다 실행되는 것을 확인할 수 있다.

function sayHello() {
    console.log("Hello");
}

.
.
.

if(savedToDos !== null) {
    const pasedToDos = JSON.parse(savedToDos);
    pasedToDos.forEach(sayHello);
}

그러나, 어떤 아이템에 대해 실행되고 있는지는 알 수 없다. 무엇인지 확인하기 위해 console.log로 출력해 보자.

같은 방법으로 아래 화살표 함수를 사용할 수도 있다.

function sayHello(item) {
    console.log("이것은", item);
}

=

if(savedToDos !== null) {
    const pasedToDos = JSON.parse(savedToDos);
    pasedToDos.forEach(item => console.log("이것은", item));
}

그럼 이제 저장된 배열 요소를 화면에 띄울 수 있다. 우리는 이미 화면에 To Do List를 띄우는 함수를 만들어 두었기 때문에 그 함수를 사용하면 쉽게 구현할 수 있다.

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(paintToDo);
}

하지만, 여기서 문제가 발생. 새로 리스트를 추가하면 리셋되고 추가된 것들만 저장이 된다. 일명, 덮어쓰기가 되는 것이다. 이 문제는 toDos라는 배열이 항상 비어있고, 새로운 요소들만 배열에 추가되어 localStorage에 저장되게 만들었기 때문에 발생하는 문제이다. 이 문제는 간단하게 해결이 가능하다.

빈 배열인 toDos에 parsedToDos를 넣어 전에 있던 리스트 항목들을 복원하면 되는데, const로 선언했던 toDos를 let으로 변경해 주는 것을 잊으면 안 된다.

이렇게 되면, 이제 새로운 빈 배열에서 시작하는 것이 아닌, 전에 저장한 배열을 갖고 시작하는 것이기 때문에 덮어쓰기가 되는 문제가 해결된다.

let toDos = [];

.
.
.

if(savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    
    toDos = parsedToDos;
    
    parsedToDos.forEach(paintToDo);
}

#6. 저장된 To Do List 지우기

저장까지는 됐지만, 아직 난관이 하나 남았다. 삭제를 해도 화면에서만 삭제가 될 뿐, localStorage에서는 지워지지 않아 새로고침을 하면 삭제했던 항목이 다시 나타나게 된다.

화면의 리스트를 삭제했던 것과 마찬가지로 target을 설정하여 삭제하는 것이 가장 중요하다. 지우려고 했던 항목이 아닌 다른 항목이 지워지는 것을 방지하기 위해서이다. 그러기 위해서 우리는 배열의 요소에게 랜덤한 숫자의 ID를 부여하고, 이 ID가 target이 될 것이다. 랜덤한 숫자의 ID는 Date.now()를 통하여 현재 날짜와 시간으로 넣어 주며, text는 input에 작성된 내용으로 두면 된다.

function handleTodoList(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    
    const newTodoObj = {
        text:newTodo,
        id: Date.now()
    }
    
    toDos.push(newTodoObj);
    
    paintToDo(newTodo);
    saveToDos();
}

이제 우리는 각 배열의 항목에 ID를 부여할 수 있게 되었다. 그렇다면? 이제 부여한 ID를 사용할 차례. 이 ID를 HTML에 삽입시켜 주자. 화면에 나타내 주던 paintToDo 함수에 newTodoObj를 넣어주게 되면, 텍스트가 나타나지 않고 [object Object]라는 화면이 뜨게 된다. text가 아닌 object를 가져왔기 때문인데, 여기서 newTodo의 text를 가져오면 완료. id는 항목 즉, li에 넣어 주어야 하므로 newTodo의 id를 가져와 부여해 주면 된다.

function paintToDo(newTodo) {
    const li = document.createElement("li");
    li.id = newTodo.id;
    
    const span = document.createElement("span");
    span.innerText = newTodo.text;
    
    .
    .
    .
}

function handleTodoList(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj = {
        text:newTodo,
        id: Date.now()
    }
    toDos.push(newTodoObj);
    
    paintToDo(newTodoObj);
    
    saveToDos();
}

배열의 요소를 삭제할 때, 배열의 요소를 아예 지운다고 생각할 수 있는데 실제로 일어나는 것은 지우고 싶은 요소를 제외한 후에 새 배열을 만드는 루틴이다. 필터라고 생각하면 더 이해가 빠를 수 있겠다. 지우고 싶은 요소를 걸러낸다고 보면 된다.

그러므로, 우리는 filter 함수를 사용할 것이다. 먼저 todoFilter라는 이름의 함수를 만드는데, 이 함수는 true만을 return한다. 만약 false를 return하게 된다면, false인 요소는 제외되게 된다. 즉, 유지하고 싶은 요소는 true가 되어야 하고, 제외하고 싶은 요소는 false가 되어야 한다.

만약, 3을 지우고 싶다면? item들 중에 있는 3을 false로 만들면 된다는 말씀.

그럼 이것을 우리의 배열에 접목시켜서 활용해 보자. 이로써, 우리는 filter 함수를 어떻게 사용해야 할지 알 수 있다. 물론 id가 아닌 text로도 가능하다.

그렇다면 이제 이걸 이용한 코드를 li 요소를 지우는 함수 안에 작성해 주자. 그럼 우리가 원하는대로 삭제 버튼을 누르면 삭제가 되어야 하지만, 여전히 배열에 남아 있다. 이유는 데이터 타입에 있다. 실제로 배열 안에 있는 id는 number인데, 우리가 삭제하는 target의 id는 string이기 때문이다.

function deleteTodo(event) {
    const li =  event.target.parentElement;
    li.remove();
    
    toDos = toDos.filter(toDo => toDo.id !== li.id);
};

이런 경우, 데이터 타입을 변경해 주기만 하면 간단하다. parseInt로 string을 number로 변환해 주자. 그리고, saveToDos 함수를 호출해 주어야 한다. 왜냐하면 제외시킨 새로운 배열을 저장해야 하기 때문에. 이로써 To Do List 구현이 끝났다.

function deleteTodo(event) {
    const li =  event.target.parentElement;
    li.remove();
    
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
    saveToDos();
};

To Do List 파트를 마무리하며

계속 중간 중간 일이 있어서 짬짬이 듣느라 오래 걸렸던 파트...... 그래도 여태 배운 것들을 활용하는 파트라서 크게 어려움은 없었던 것 같다. 배열과 메서드들에 대해 다시 한 번 상기하고 공부하는 계기가 되기도 했고. 이제 마지막 날씨 구현만 남았는데, 전에 해 본 API 사용이라 이 부분도 크게 어려움은 없으리라 생각된다. 부지런하게 해 보자!

'Study > Log' 카테고리의 다른 글

[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Weather & 마무리 (0)	2022.06.16
[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Quotes And Background (0)	2022.05.19
[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Clock (0)	2022.05.17
[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Momentum 소개 및 Login (0)	2022.05.15