TODOLIST 만들기 step by step - Vanilla JavaScript

본 포스팅은 javascript에 입문하고자 하려고 할때 가볍게 학습 할 수 있도록 나름의 커리큘럼을 짜본 것입니다. 

todo-list 프로젝트는 다른 게시글이나 유투브에도 많이 나와있기는 하지만, 초보자가 좀 더 접근하기 쉽도록 순차적으로 진행 과정을 쪼개 보았습니다.

 

순서

1. 글 추가하기

2. 글 삭제하기

3. 글 수정하기

4. localStorage에 저장하기

 

* html과 css는 대충 만들어 놓았습니다. (정말 대충 ㅎ..) 

이 소스를 다운받아 시작하면 됩니다. 

1-initial.zip

0.00MB

 

기능 목록을 참조하여 미리 소스를 만들어본 뒤, 완성된 소스와 비교해 보세요!

 

---

1. 글 추가하기

 

구현할 기능 목록

 - input 입력 후 "ADD" 버튼 누르면 하단에 추가
 - input 이 빈값인 경우 "ADD" 버튼 클릭시 "값을 입력하세요!" alert을 띄운 후 input으로 focus
 - 목록에 아무것도 없을때는 "데이터가 없습니다" 출력 

 

 

 

▶ 소스보기

우선 html 내에 todo_item은 더이상 필요가 없으니 주석 처리 하거나, 삭제해 주세요. 

javascript 에서 알아서 render를 할 것입니다.

    // index.html
    <div class="wrapper">
        <div class="form">
            <input type="text" class="todo_input">
            <button class="btn_add">ADD</button>
            <button class="btn_clear">CLEAR</button>
        </div>
        <div class="todo_list_wrap">
            <ul class="todo_list">
                <!-- 편집기능 활성화 : todo_item + edit_wrap -->
                <!-- <li class="todo_item ">
                    <div class="edit_wrap">
                        <input type="text" class="edit_input" />
                        <button class="button btn_edit">EDIT</button>
                    </div>
                    <p class="text">
                        Hello world!
                    </p>
                    <button class="button btn_amend">Amend</button>
                    <button class="button btn_delete">Delete</button>
                </li> -->
            </ul>
        </div>
    </div>

 

우선 상태를 관리한 배열을 하나 생성합니다.

그리고 필요한 변수를 선언합니다. 

let listArray = []; // 할일이 담길 배열
const todoList = document.querySelector('.todo_list'); // 배열의 목록을 뿌려줄 부모 
const todoInput = document.querySelector('.todo_input'); // 할일의 내용을 입력하는 input
const btnAdd = document.querySelector('.btn_add'); // 입력 완료후 추가를 하기위한 버튼

 

그리고 함수 두 개를 만들어줄 텐데 하나는 실제 추가 버튼을 눌렀을때 추가가 이루어지는 함수이고, 다른 하나는 배열에 무언가가 추가되었을때 html에 뿌려주는 함수입니다. 

// add list
const addTodo = () => {
	// 할일을 listArray 배열에 추가합니다.
}


// show list
const showList = () => {
	// html에 뿌려줍니다.
}

btnAdd.addEventListener('click', addTodo);

 

addTodo 에서 만약 input의 value 값이 비어있다면 alert을 띄워준 후 input으로 다시 focus해줍니다. 

그리고 다음동작이 하지 않기 위해서 return false를 해줍니다. 

만약 비어있지 않다면, listArray에 해당 value값을 push하여 추가해 준 뒤, 

input의 value값을 빈값으로 초기화 해줍니다. 

우선을 화면을 그리는 함수는 아직 정의가 안되었으므로, console로 배열을 찍어서 확인해 봅시다.

 

const addTodo = () => {
    const inputValue = todoInput.value; // input의 value값을 가져옵니다
    if(inputValue === "") { // input 의 value 값이 비어있다면
        alert("값을 입력하세요!"); // alert을 띄우고
        todoInput.focus(); // input에 다시 focus를 시켜줍니다.
        return false; // 뒤의 동작을 멈춥니다. 
    }
    
    // 만약 value값이 있다면 
    listArray.push(inputValue);  // listArray에 value값을 추가해 줍니다. 
    // 그리고 input의 값을 비워줍니다. 만약 해주지 않으면 전에 입력한 값이 그대로 남아있게 됩니다.
    todoInput.value = ""; 
    console.log(listArray) // 잘 추가가 되었는지 확인해봅니다!
}

결과화면

아주 잘 되네요. 그러면 실제로 html에 그려줍니다.  전에 주석해놓았던 todo_item 을 그래도 그려줄 건데, 텍스트 대신 데이터를 연결해 줄 것입니다. listArray의 length값을 체크하여 0 인경우는 데이터가 아직 할일 목록이 아무것도 없다는 뜻이니 "데이터가 없습니다"를 출력해 주고, 1개 이상인 경우 데이터를 그려줍니다. 

// show list
const showList = () => {
    if(listArray.length > 0) { // 데이터가 0개 이상인 경우 즉, 데이터가 있는 경우
        todoList.innerHTML = ""; // 우선 기존 데이터를 모두 삭제하여 초기화 시켜줍니다. 
        listArray.forEach(function(text, idx){ // 그리고 forEach를 통하여 배열의 개수만큼 그립니다.
            const itemTag = '<li class="todo_item ">' + 
                                '<div class="edit_wrap">' + 
                                    '<input type="text" class="edit_input" value="'+text+'" />' +
                                    '<button class="button btn_edit" onClick="amendTodo('+idx+')">EDIT</button>' +
                                '</div>' +
                                '<p class="text">'+ text +'</p>' +
                                '<button class="button btn_amend" onClick="activeEdit('+idx+')">Amend</button>' +
                                '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
                            '</li>'
            todoList.innerHTML += itemTag // innerHTML로 하나씩 추가하여 그립니다. 
        });
    } else { // 데이터가 없는 경우 
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}

 이렇게 한 뒤 추가할때에도 console 대신 showList 함수를 불러오면 됩니다. 

 

* 최종소스

let listArray = [];
const todoList = document.querySelector('.todo_list');
const todoInput = document.querySelector('.todo_input');
const btnAdd = document.querySelector('.btn_add');



// add list
const addTodo = () => {
    const inputValue = todoInput.value;
    if(inputValue === "") {
        alert("값을 입력하세요!");
        todoInput.focus();
        return false;
    }
    listArray.push(inputValue);
    todoInput.value = "";
    showList()
}


// show list
const showList = () => {
    if(listArray.length > 0) {
        todoList.innerHTML = "";
        listArray.forEach(function(text, idx){
            const itemTag = '<li class="todo_item ">' + 
                                '<div class="edit_wrap">' + 
                                    '<input type="text" class="edit_input" value="'+text+'" />' +
                                    '<button class="button btn_edit" onClick="amendTodo('+idx+')">EDIT</button>' +
                                '</div>' +
                                '<p class="text">'+ text +'</p>' +
                                '<button class="button btn_amend" onClick="activeEdit('+idx+')">Amend</button>' +
                                '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
                            '</li>'
            todoList.innerHTML += itemTag
        });
    } else {
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}


btnAdd.addEventListener('click', addTodo);
showList()

 

 

 

---

2. 글 삭제하기

기능목록

 - "Delete" 버튼 클릭 시 해당 아이템 삭제
 - "CLEAR" 버튼 클릭 시 모든 아이템 삭제 

 

 

 

▶ 소스보기

글 삭제하기는 이미 뿌려주는 기능이 만들어져 있기때문에 좀 더 간단합니다. 

클릭했을때 삭제하는 기능, 클릭 했을때 전부 삭제하는 기능 2가지만 추가해 주면됩니다. 

이 말은, 하나만 삭제하는 경우 배열에서 해당 글만 배열에서 삭제하고, 모두 삭제하는 경우 배열을 초기화 시켜주면 됩니다. 

해당 글을 찾기위해서 id가 필요한데, 여기서는 간단하게 index값을 사용하였습니다. 

 

한 개의 글만 잘라내기 위해 splice 함수를 사용하였습니다.

splice(num1, num2) 은 num1 번째 (0번부터 시작해서 세어야 합니다) 부터 num2 만큼 잘라내겠다는 뜻입니다. 

var list = [1, 2, 3, 4, 5]
console.log(list.splice(2, 2)) // 잘려나간 값 [3, 4]
console.log(list) // splice 이후 list 의 값 [1, 2, 5]

  

 

* 최종소스

{...}
const btnClear = document.querySelector('.btn_clear'); // 초기화 버튼을 가져옵니다.

{ ... }

// delete todo - 하나만 삭제
const deleteTodo = (idx) => {
    listArray.splice(idx, 1); // 배열중 idx 번째 1개를 잘라 내겠다는 뜻입니다. 
    showList() // 그리고 바뀐 값이 다시 그려질 수 있도록 showList를 호출 합니다.
}

// clear All - 모두 삭제
const clearAll = () => {
    listArray = [];  // 배열을 초기화 시킨 뒤
    showList(); // 바뀐 값이 다시 그려질 수 있도록 showList를 호출 합니다.
}


// show list
const showList = () => {
	// btn_delete 버튼 부분에 onClick 함수를 추가합니다. idx를 파라미터로 넘겨줍니다.
	{...}
         '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
	{...}
        });
    } else {
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}


btnAdd.addEventListener('click', addTodo);
btnClear.addEventListener('click', clearAll); 

showList()

 

 

---

3. 글 수정하기

기능목록

 - "Amend" 버튼 클릭 시 edit 화면 출력 및 edit input에 기존 값 출력
 - edit input이 빈값인 경우 "edit"버튼 클릭시 "값을 입력하세요!" alert을 띄운후 input으로 focus

 

참고 이미지

▶ 소스보기

showList 안에 그려주는 태그 안에 btn_amend에 activeEidt함수를 추가하고 idx값을 파라미터로 넘깁니다. 그리고 activeEdit 함수에서는 단순하게 todo_item에 edit_active 클래스를 추가함으로써 편집 화면을 활성화 해줍니다. 

 

실제 수정이 저장 되는 역활을 수행 하는 것은 btn_edit 입니다. 여기에 amendTodo함수를 추가하고 idx를 파라미터로 넘깁니다. 그리고 마찬가지로 splice를 통하여 값을 수정 합니다. 이번에는 3개의 인자를 받는데 마찬가지로 (num1, num2, num3) 이 있을때  num1번째의 값 num2만큼 삭제하고, num3을 추가하겠다는 뜻입니다.  

var list = [1, 2, 3, 4, 5]
console.log(list.splice(1, 2, 3)) // 1번째 두개의 값을 삭제하고 3을 넣겠다는 뜻입니다.
console.log(list)

// 결과
[2, 3]
[1, 3, 4, 5]

 그리고 마찬가지로 편집화면의 input인 edit_input에도 빈값 처리를 해주면 됩니다. 

 

* 최종소스

{...}

// edit_wrap active : 편집 팝업 활성화 
const activeEdit = (idx) => {
    const items = document.querySelectorAll('.todo_item');
    const item = items[idx];
    item.classList.add('edit_active');
}

// 실제 수정 하는 함수 
const amendTodo = (idx) => {
    const items = document.querySelectorAll('.todo_item');
    const item = items[idx];
    const newInput = item.querySelector('.edit_input');
    const newValue = newInput.value;

    if(newValue === "") {  // 빈값인 경우 체크!
        alert("값을 입력하세요");
        newInput.focus();
    } else {
        listArray.splice(idx, 1, newValue); // idx번째 1개의 값을 newValue로 교체
        item.classList.remove('edit_active'); // 그리고 자동으로 edit 화면을 종료합니다.
        showList(); // 다시 그려주면 수정된 내역이 반영됩니다!
    }
}


// show list
const showList = () => {
    if(listArray.length > 0) {
        todoList.innerHTML = "";
        listArray.forEach(function(text, idx){
            const itemTag = '<li class="todo_item ">' + 
                                '<div class="edit_wrap">' + 
                                    '<input type="text" class="edit_input" value="'+text+'" />' +
                                    '<button class="button btn_edit" onClick="amendTodo('+idx+')">EDIT</button>' +
                                '</div>' +
                                '<p class="text">'+ text +'</p>' +
                                '<button class="button btn_amend" onClick="activeEdit('+idx+')">Amend</button>' +
                                '<button class="button btn_delete" onClick="deleteTodo('+idx+')">Delete</button>' +
                            '</li>'
            todoList.innerHTML += itemTag
        });
    } else {
        todoList.innerHTML = "<li>데이터가 없습니다</li>";
    }
}


btnAdd.addEventListener('click', addTodo);
btnClear.addEventListener('click', clearAll);

showList()

 

 

 

 

이렇게 하면 배열로 데이터를 관리할 수 있는 Vanila JavaScript 로 만든 소스가 완성 되었습니다. 👏