본문 바로가기
웹 개발/JavaScript

JS (3) : To-Do List 만들기(1)

JayCee.___. 2023. 8. 11. 02:56

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

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

 

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

Javascript For Beginners

nomadcoders.co

이전 포스팅까지 우리는 JS에 대한 기본적인 내용을 알아보았다. 이번 포스팅부터는 To-do List를 만들어 보면서 실제로 개발 진행 시 JS를 어떻게 사용하는지 설명할 예정이다.

 

Setting

 

우선 HTML파일과 JS 파일을 만들고, 두 파일을 연결시켜 주자.

 

HTML 파일

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="/todo.js"></script>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

 

JS 파일

console.log('connected');

 

결과

 

그 후, 우리에게 필요한 요소가 어떤 것이 있을지 생각해 보자.

 

우선, form이 필요할 것이다. 유저들이 todo를 입력해야 하기 때문이다.

그리고, List도 필요할 것이다. 유저들이 todo를 나열할 수 있어야 하기 때문이다. 또한 이 List를 유저들이 확인할 수 있어야 한다.

 

그렇다면, 이것들을 한 번 구현해보도록 하자.

 

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

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="/todo.js"></script>
    </head>
    <body>
        <h1>To-Do List</h1>
        <form id="todo-form">
            <input type="text" placeholder="Write a To Do and Press Enter" required />
        </form>
        <ul id="todo-list"></ul>
    </body>
</html>

 

form의 특성상, enter 또는 submit 버튼을 눌렀을 때 페이지가 새로고침 된다. 이를 방지하기 위해서는 다음과 같은 코드를 추가해야 한다. JS 코드를 다음과 같이 수정해 보자.

 

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

function handleToDoSubmit(event) {
    event.preventDefault();
}

toDoForm.addEventListener('submit', handleToDoSubmit);

submit event가 발생해도 form의 기본 submit event 처리 방식인 새로고침을 진행하지 않도록 막아주는 preventDefault() 함수를 호출하였다.

handleToDoSubmit 함수 안에 event라는 인자가 있는데. 이는 후반부에서 설명하도록 하겠다.

 

그렇다면 이제 입력한 값을 저장하는 코드를 작성해 보자. 

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

 

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

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    console.log(toDoInput.value);
    toDoInput.value = '';
    console.log(newTodo, toDoInput.value);
}

toDoForm.addEventListener('submit', handleToDoSubmit);

 

 

Todo 1을 입력하고 enter를 누르면 다음과 같은 값이 console 창에 뜬다. 첫 번째 줄의 Todo 1은 toDoInput.value이고, 두 번째 줄의 Todo 1은 newTodo에 저장한 값과, toDoInput.value를 비운 후의 toDoInput.value가 출력되고 있다. 현재 toDoInput.value는 비어있기 때문에 console 창에 나타나지 않는다.

 

To Do 추가

그럼, 이제 To Do를 추가하는 기능을 만들어 보자.

JS 파일에 newTodo를 화면에 보여주는 함수를 만들어 보자.

 

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

 

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

function paintToDo(newTodo) {
    console.log('i will paint', newTodo);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = '';
    paintToDo(newTodo);
}

toDoForm.addEventListener('submit', handleToDoSubmit);

paintToDo(newTodo) 함수를 통해서 화면에 newTodo를 보여줄 예정이다.

console 창을 통해 우리가 원하는 작업을 하는지 확인해 보자.

todo 1을 입력한 후 enter를 눌러주었다.

 

보이는 것처럼, 우리가 입력한 값이 paintToDo로 잘 전달되었다.

 

그렇다면, 화면에 newToDo를 보여주기 위해서는 어떤 절차를 밟아야 할까?

<li>newTodo 내용</li>와 같이 만들어 준 후, 이것을 ul 태그 내부에 추가를 해주면 된다.

 

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

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

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

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = '';
    paintToDo(newTodo);
}

toDoForm.addEventListener('submit', handleToDoSubmit);

li와 span 태그를 createElement() 함수를 통해 만들어 주고, li 하위에 span 태그를 넣어주기 위해 appendChild() 함수를 사용하였다.

그리고 span 태그 내부에 newTodo의 값을 넣어 화면에 나타내기 위해서 span.innerText 값을 newTodo로 설정하였다.

paintToDo 함수 마지막에 console.log(li);를 추가하여 결과를 확인해 보자.

 

우리가 추가하려고 하는 요소가 만들어진 것을 확인할 수 있다.

 

이제 이 요소를 우리가 이전에 만들어줬던 ul 태그 내부에 넣어주면 된다.

 

paintToDo 함수를 다음과 같이 수정해 보자.

 

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

appendChild()를 통해 우리가 만들어 놓은 ul태그(toDoList) 안에 li 요소를 추가해 주었다.

 

todo 1을 입력하고 enter를 누르면, 다음과 같은 결과를 확인할 수 있다.

이제 우리가 입력한 값(newTodo)을 화면에 출력할 수 있다.

 

To Do 삭제하기

그렇다면 우리가 추가한 내용을 삭제하는 기능도 한 번 만들어 보도록 하자. 

우선, 삭제 기능을 담당하는 버튼을 만들어 줄 것이다. 이 버튼은, 우리가 추가하는 newToDo와 함께 추가될 것이다.

 

paintToDo 함수를 다음과 같이 수정해 보자.

 

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

button을 만들어 주고, innerText로 X 표시를 넣어주었다.

이후, appendChild로 newToDo 뒤에 X 버튼이 나올 수 있게 버튼을 추가해 주었다.

 

 

실행 결과는 다음과 같다. 이전처럼 todo를 입력하고 enter를 누르면, todo 내용과 함께 X 버튼이 생성되는 것을 확인할 수 있다.

 

현재, X 버튼을 눌러도 아무런 일이 일어나지 않는다. 우리는 eventListener를 통해서 click event를 처리해 주어야 한다.

paintToDo 함수를 다음과 같이 수정하고, deleteToDo 함수를 만들어 보자.

 

function deleteToDo() {
    console.log('delete todo');
}

function paintToDo(newTodo) {
    const li = document.createElement('li');
    const span = document.createElement('span');
    span.innerText = newTodo;
    const button = document.createElement('button');
    button.innerText = 'X';
    button.addEventListener('click', deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

 

버튼에서 발생하는 click event를 감지하는 eventListener를 추가하고, event가 발생했을 때 실행할 함수를 인자로 주었다. deleteToDo에서는 일단 console.log를 통해 함수가 호출되었는지 확인해 보자.

 

실행 결과는 다음과 같다.

X 버튼을 누르면 delete todo라는 문자열이 console에 출력되는 것을 알 수 있다.

하지만, 문제가 있다. 현재, 우리는 어느 항목의 X 버튼을 눌렀는지 알 수 없다.

지금 화면에 보이는 2개의 버튼은, 모두 같은 event를 기다리고 있고, 모두 같은 함수를 실행하고 있다.

그렇다면, deleteToDo 함수를 호출한 버튼이 어떤 li 요소의 X 버튼인지 알기 위해서는 어떻게 해야 할까?

 

eventListener에 대한 추가 설명

이전 포스팅에서, eventListener에게 함수명을 넘겨주면, event가 발생했을 때 인자로 받은 함수명을 가진 함수를 실행한다고 언급했다. 

여기서 JS가 함수를 실행할 때, 실행하는 함수에 "어떠한 인자"를 넣어서 함께 넘겨주는데, 이 인자에는 꽤 많은 유용한 정보들이 들어있다. 이전에 우리가 사용했던 submit event를 처리할 때 사용한 handleToDoSubmit 함수를 살펴보자.

 

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = '';
    paintToDo(newTodo);
}

앞에서 후반부에 설명하겠다고 한 인자가 바로 지금 설명 중인 "어떠한 인자"이다. 그렇다면, 이 안에 어떤 정보들이 있는지 확인해 보자.

console.log(event); 코드를 위 함수 내부에 추가한 후, 결과를 확인해 보자.

다음과 같은 모습을 확인할 수 있다. 여기서 defaultPrevented의 값이 true가 되어있는 이유는, 우리가 preventDefault() 함수를 통해 기본적인 event 처리 방식을 막아주겠다는 코드를 작성했기 때문이다. 만약 event.preventDefault(); 코드를 지우고 다시 실행한다면, defaultPrevented의 값이 false로 변해있을 것이다.

 

그럼 이제 본론으로 돌아와서, button에서 발생하는 click event에 관련된 유용한 정보를 한 번 찾아보자.

우리는 현재 button에서 발생한 event에서 유용한 정보를 꺼내오고 싶기 때문에, deleteToDo 함수를 다음과 같이 수정해 보자.

 

function deleteToDo(event) {
    console.log(event);
}

event 인자를 받아서, console.log()를 통해 한 번 확인해 보자.

참고로, 인자의 이름은 event가 아니어도 상관없다. 하지만, 알아보기 쉽게 e 또는 event를 사용하는 편이다.

 

 

다음과 같이 생각보다 많은 정보를 가지고 있다는 것을 알 수 있다.

우리는 이 많은 정보들 중에서, target이라는 property를 사용할 것이다. target을 찾아서 한 번 클릭해 보자.

 

 

 

다음과 같이 button object의 여러 가지 property를 확인할 수 있다. 우리는 이 중에서, 현재 누른 버튼의 위치를 알 수 있을만한 정보를 찾아야 한다.

property를 확인하다 보면, parentElement라는 property를 확인할 수 있다.(혹시 parentElement가 없고 (...)이라는 것이 console 창에 있다면 (...)을 클릭해 보자. 숨어있던 property가 나올 것이다.). 해당 property는 현재 버튼의 부모 태그에 대한 정보를 가지고 있다. 우리는 이 정보를 통해 todo를 삭제해 볼 것이다.

 

그럼, 다시 JS 코드로 돌아와 이전에 확인했던 값을 console.log()를 통해 출력해 보자.

deleteToDo 함수를 다음과 같이 수정해 보자.

 

function deleteToDo(event) {
    console.log(event.target.parentElement);
}

이전에 console 창에서 확인했던 정보를 console.log를 통해 직접 출력하는 코드이다.

 

결과는 다음과 같다. 우리는 버튼을 눌렀을 때 어떤 li 태그의 버튼을 눌렀는지 확인할 수 있게 되었다.

그렇다면, 이제 선택한 li를 삭제하는 일만 남았다.

 

deleteToDo 함수를 다음과 같이 수정해 보자.

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

위에서 확인한 값을 li라는 변수에 저장하였다. 현재, li 변수에는 우리가 누른 버튼이 포함되어 있는 li 요소가 들어가 있다.

그 후, remove 함수를 통해서 li 태그를 지워주었다. 

 

삭제 기능이 정상적으로 작동되는 것을 확인할 수 있다.

 

이번 포스팅에서는 기본적인 To Do List 추가, 삭제 기능에 대해 알아보았다.

다음 포스팅에서는 local storage를 활용해 데이터를 저장하는 것에 관련된 내용을 다뤄볼 예정이다.

 

'웹 개발 > JavaScript' 카테고리의 다른 글

JS (6) : To-Do List 추가 기능 구현(Google 검색)  (0) 2023.08.27
JS (5) : To-Do List 만들기 (3)  (0) 2023.08.22
JS (4) : To-Do List 만들기 (2)  (0) 2023.08.17
JS (2) : Style 및 Event  (0) 2023.08.05
JS (1) : JavaScript로 Browser 조작하기  (0) 2023.08.01

'웹 개발/JavaScript' Related Articles

티스토리툴바