프론트엔드/JavaScript

[JS] TO DO LIST 생성하기

새싹 개발자 뚜비 2022. 9. 16. 21:22
728x90

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기

(7.0 Setup ~ 7.1 Adding ToDos)

바로 시작!

tool.js 파일을 만들고 html에서 import 할 수 있도록 연결해주고

form과 input 태그로 todo를 적을 수 있는 작성칸을 만들어줬다.

 

실행하면 작성가능한 form이 만들어졌다.

 

 <ul id="todo-list"></ul>

<ul>을 추가하여 todo list가 담길공간을 만들어주는데

js로 li를 추가할 것이기 때문에 일단 ul만 만들고 넘어간다.

 

const toDoForm =document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");

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

toDoForm.addEventListener("submit", handleToDoSubmit);

getElementById를 이용하여 form과 ul을 js로 가져온다.

그리고 greetings의 form에서 했던 것을 반복한다.

 

<간단 복습>

form은 submit 이벤트를 가진다.

나는 function을 만들고 그 이벤트의 기본 동작을 제어한다.(막는다)

왜냐하면 submit의 기본 동작은 페이지 새로고침이기 때문에!

js는 발생한 event를 handleToDoSubmit 함수의 첫번째 인자로 준다.

 

const toDoInput = toDoForm.querySelector("input");

우리는 input의 value를 얻어야한다.

두가지 방법이 있는데 전체 document에서 찾는 방법이 있고

toDoForm안에서만 찾아볼수도 있는데 후자의 방법으로 진행하였다.

 

위 코드는 const toDoInput = document.querySeletor("#todo-form input"); 과 같고

이것이 전체 document에서 찾는 방법이다.

 

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

먼저 제대로 작동하는지 console.log를 통해 확인해보자

 

input.value가 제대로 출력되고 있다.

 

다음은 Enter를 누를 때마다 입력창을 비워보도록 하자.

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

입력된 value는 newTodo에 저장해주고

toDoInput에 빈 값을 넣어 입력창을 지워준다.

 

중요한건 toDoInput.value를 비웠다고 해서 newTodo가 비워지는게 아니라는 것이다.

왜냐하면 input의 value를 새로운 변수에 복사하는 것이기 때문이다.

input의 value를 가지고 무얼하든 newToDo에는 아무런 영향이 없다.

console.log로 확인해보자.

 

toDoInput.value는 console.log 되지 않는걸 확인할 수 있다.

값을 드래그 해보면 공백으로 한 칸이 있는걸 확인할 수는 있지만

값이empty("")로 적용되었기 때문에 console.log로 보이지 않는다.

 

 

다음은 ToDo를 그려주는 function을 만들어보자

const toDoForm =document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("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를 주고

handleToDoSubmit function이 paintToDo를 사용하게 한다.

 

즉, handleToDoSubmit에서 paintToDo를 호출하여 newToDo에 있는 입력값을 paintToDo한테 보내는 것이다.

그럼 paintToDo는 무엇을 그려야할지 알게 될 것이다.

 

console.log로 확인해보자

 

이제 화면에 그려주기 위해 bg를 만들 때 했던 것처럼

js에서 li(element)를 만들어 li를 ul에 추가해보도록 하자.

나중에 버튼을 만들어서 todo를 삭제해주기 위해 li 내부에 span도 같이 만든당

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

createElement를 이용하여 li와 span 2개의 element를 만들었다.

(변수의 이름은 li, span처럼 태그 이름이 아닌 전혀 상관없는 걸로 해도 상관없지만 이해하기 쉽게 태그 이름으로 지어줌)

li 내부에 span이 존재해야 하기 때문에  li.appendChild(span)으로 li가 span이라는 자식 요소를 갖게 한다.

그리고 innerText를 이용해 span안에 newToDO를 넣어주면 끝

 

console.log로 확인해보자

form에 입력한 내용이 li 안 span으로 들어가서 출력되는 것을 확인할 수 있다

good!

 

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

이제 li를 list(toDoList)에 넣어주면 된다.

    function에 toDoList.appendChild(li); 추가한다.

 

입력한대로 Todo-List가 생성되고 있다

그리고 아무것도 입력하지 않으면 추가되지 않는다.

(HTML에서 field를 보호하고 있기 때문이다. input에 required를 넣었기 때문)

 

HTML을 검사해보아도 ul - li - span 안에 todo-list가 들어가있는것을 확인할 수 있다.

진짜 멋진걸...

 

 

하지만 생성된 todo-list는 문제점이 있다.

1. 삭제할 수 없다.

2. 새로고침을 하면 전부 사라진다.

 

이 문제점들은 다음 포스팅에서 해결해보도록 하겠다 !

728x90