input 데이터 값을 얻으면 리스트에 보여주기
JS에서 요소를 생성할 수 있다.
document.creatElement를 이용해서 요소를 생성할 수 있다.
const todoForm = document.getElementById("todo-form");
const todoInput = todoForm.querySelector("input");
const todoList = document.getElementById("todo-list");
function addTodoList(event) {
event.preventDefault();
const inputTodoData = todoInput.value;
/* todoinput을 초기화 하는 이유는? */
todoInput.innerText = "";
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = inputTodoData;
const button = document.createElement("button");
button.innerText = "delete";
li.appendChild(span);
li.appendChild(button);
console.log(li);
todoList.appendChild(li);
}
todoForm.addEventListener("submit", addTodoList);
todoinput을 초기화 하는 이유는?
input창을 초기화 해주는 과정이다.
초기화 하지 않으면 기존에 작성된 데이터가 남겨져 있기 때문에 사용자에게 불편함을 줄 수 있다.
paintTodo 함수를 따로 만들어 주는 이유는?
삭제까지 고려해서 리스트에 ID를 부여하자
이때 ID는 고유의 값이 필요하다.
때문에 Date.now()를 이용해서 하나뿐인 고유 ID를 생성할 수 잇다.
또한 Object를 활용해서 ID와 데이터를 같이 저장해준다.
데이터를 localStorage에 저장하자!
localStorage에 저장을 실행하는 함수는?
localStorage.setItem이다.
반대로 값을 반환할 때는 localStorage.getItem을 이용한다.
greeting 처럼 단일 값을 localStorage에 저장하면 안된다.
리스트는 여러개의 값을 저장해야 하므로 배열을 만들어서 localStorage에 저장해주어야 한다.
localStorage는 문자열로 저장해야 한다.
localStorage에 배열을 저장하면 값이 정상적으로 저장되지 않는다. 때문에 JSON.stringify를 활용해서 배열을 문자열로 저장해서 로컬스토리지에 저장해준다.
JSON.Stringify란?
JavaScript 값이나 객체를 JSON 문자열로 변환합니다. (출처: mdn)
JSON이란?
JSON은 객체, 배열, 숫자, 문자열, 불리언과 null을 직렬화하기 위한 구문으로, JavaScript 구문에 기반을 두고 있지만 분명한 차이점을 가지고 있습니다. 즉, 어떤 JavaScript는 JSON이 아닙니다. (출처: mdn)
다른 도메인과 데이터를 주고 받을 때 사용 된다고 합니다.
객체를 문자열로 변환하는 것을 직렬화라고 하고, 그 반대는 역직렬화입니다.
삭제버튼을 통해 화면과 local storage에서 삭제하기
버튼을 생성할 때 이벤트를 같이 생성해 준다.
삭제 버튼이 무엇인지 어떻게 알 수 있을까?
function deleteFunction(event) {
const deleteli = event.target.parentElement;
// remove를 사용해서 특정 요소를 html에서 바로 삭제할 수 있다.
deleteli.remove();
}event의 target을 알아보면 event를 생성시킨 target을 알 수있다.
remove를 사용해서 특정 요소를 html에서 바로 삭제할 수 있다.
여기서 target의 부모 element를 가져와서 삭제해 준다.
element와 node을 차이에 대해 궁금해져서 정리하고 넘어가도록 하겠다.
많은 사람들이 이 점을 혼돈하는 것 같았고, stackoverflow 글을 내용을 번역해서 이해했다.
Node와 element의 차이
Node는 웹페이지에 대한 인터페이스를 제공하는 DOM에 의해서 만들어지는 것이다. 이때,노드 트리가 생성된다. 노드에서 htlm의 요소를 나타내느 요소 노드가 존재한다. 즉, element는 node보다 더 작은 개념이다.
위 코드에서 Node.parentNode가 아닌, Node.parentElement를 사용하는데,
Node.parentElement는 부모가 꼭 요소이여야만 Elemnet형식으로 반환하고 그렇지 않으면 null을 반환한다.
그 예로는 parentNode와 parentElement 값이 다른 예시가 있다.
document.documentElement의 부모는 document인데, DOM 트리에는 document 요소라는 건 없기 때문이다. 대신 document는 그냥 DOM 객체로서 존재한다.
삭제를 위해서는 역정렬화를 해주어야 한다.
역정렬화를 해주지 않아 삭제 리스트 id 값이 계속 존재하게 되었다.
이를 바꿔주기 위해서 역정렬화를 시켜주는 parseInt 함수를 활용하였다.
새로고침하면 구현되어 있더 투두 리스트들이 사라진다.
리스트 추가 이벤트로 생성되는 이벤트 함수에만 페이지에 활성화 되도록 구현했기 때문이다.
이를 위해 localstorage를 확인해서 존재하면 홈페이지에 구현할 수 있도록 해주는 구문이 필요하다.
라이브 서버에서는 개인정보 보안 때문에 Geolocation API가 작동하지 않는다.
