Javascript 연습 - Todolist

w3schools- Todolist

📝 간단한 인터랙션이 있는 Todolist 만들기

1. html

<div id="myDIV" class="header">
  <h2>My To Do List</h2>
  <input type="text" id="myInput" placeholder="Title...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL">
  <li>Hit the gym</li>
  <li class="checked">Pay bills</li>
  <li>Meet George</li>
  <li>Buy eggs</li>
  <li>Read a book</li>
  <li>Organize office</li>
</ul>

2. Javascript

👉🏻 li Element를 새로 생성하기

//변수앞 $ -> 일반 변수와 dom객체 구분하기 위해서
//1. ul tag를 선택하여 변수로 저장
var $ulElement = document.querySelector('ul');

// ulElement에서 이벤트 추가
$ulElement.addEventListener("click", function(event){
  //event.target -> 이벤트 버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다. 즉 클릭한 요소 자체 아마도? event.currentTarget의 경우, 이벤트가 바인딩된(해당하는) 요소를 반환한다.
  var $target = event.target;
  //target이 close class를 포함한, 즉 close button일 경우 목록에서 숨김
  if($target.classList.contains('close')){
    var $parentTarget = $target.parentElement;
    $parentTarget.style.display = "none";
  }
  //그 외엔 target 체크 표시 
  $target.classList.toggle('checked');
})

// 새 목록 추가
 function newElement(){
    //ul 안에 들어갈 li element 생성
    var $liElement = document.createElement("li");
   	//to do 내용
   	var $textElement = document.createElement("span");
   	var inputValue = document.getElementById("myInput").value;
   	$textElement.innerText = inputValue;
   
    // 삭제 버튼
   	var $closeElement = document.createElement("span");
   	var $closeText = document.createTextNode("\u00D7");
   	$closeElement.className = "close";
   	$closeElement.appendChild($closeText);
  	
   	$liElement.appendChild($textElement);
   	$liElement.appendChild($closeElement);
   
   	if(inputValue = ''){
      alert("You must write something");
    } else{
      //liElement를 ulElement 하위에 추가하기
      $ulElement.appendChild($liElement);
    }
   	document.getElementById("myInput").value = "";
 }

👉🏻 insertAdjacentHTML 사용하기

var $ulElement = document.querySelector('ul');

// ulElement에서 이벤트 추가(화살표 함수 버전)
$ulElement.addEventListener("click", (event)=>{
  var $target = event.target;

  if($target.classList.contains('close')){
    var $parentTarget = $target.parentElement;
    $parentTarget.style.display = "none";
  }
  $target.classList.toggle('checked');
})

// 새 목록 추가
 function newElement(){
	const inputValue = document.getElementById("myInput").value;
   //템플릿 리터럴을 활용하여 liElement 정의하고
   	const $liElement = `
	<li>
	<span>${inputValue}</span>
	<span class="close">&3215;</span>
	</li>
	`
    //insertAdjacentHTML로 ulElement안에 liElement 넣기
	if(inputValue == ''){
      alert("you must write something");
    } else{
      $ulElement.insertAdjacentHTML("beforeend", $liElement);
    }
   	document.getElementById("myInput").value = "";
 }

✔️ insertAdjacentHTML

ìnsertAdjacentHTML() 메서드는 HTML이나 XML 같은 특정 텍스트를 파싱하고, 특정 위치 DOM tree 안에 원하는 노드들을 추가한다.
(쉽게 말하면 innerHTML처럼 HTML 코드를 text 형식으로 elemen에 삽입하는 코드인데 position을 결정할 수 있음)

element.insertAdjacentHTML(position, text);
text(인자)는 html or xml로 해석될 수 있는 문자열이다.

• position
  beforebegin : element 앞에
  afterbegin : element 안에 가장 첫번째 child
  beforeend : element 안에 가장 마지막 child
  afterrend : element 뒤에

✔️ Element.innerHTML

Element 속성 innerHTML은 요소(element) 내에 포함된 HTML or XML 마크업을 가져오거나 설정한다. 즉 javascript를 통해서 html의 content를 가져와서 그 값을 화면상에 보여주거나 직접 변경하여 보여주는 것을 말함.

• 요소의 내용을 변경하는 대신 HTML을 문서에 삽입하려면, insertAdjacentHTML()을 사용하라고 되어있다.

const content = element.innerHTML;
element.innerHTML = htmlString;

✔️ Node.innerText

innerText 속성은 요소와 그 자손의 렌더링된 텍스트 콘텐츠를 나타낸다.

• innerText는 Node.textContent와 비슷하지만 다르다. innerText는 렌더링 후의 모습을 인식하고, textContent는 그렇지 않다.

const renderedText = htmlElement.innerText
htmlElement.innerText = string

3. LocalStorage에 저장하기

지금까지의 Todolist는 새로고침할 경우 만들어 둔 list들이 전부 사라지고 초기화된다.

이를 해결하기 위해 localStorage를 활용하여 브라우저에 데이터를 저장해보자.

브라우저에서는 localStorage와 sessionStorage가 존재하는데, key-value 형태의 데이터를 사용자 로컬에 저장한다. 데이터를 Obj 형태로 저장, 덮어쓰기, 삭제 등 조작할 수 있다. 장바구니나 팝업창, 서버리스 프로젝트 등에 적용 가능하다.

• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이 때문에 쿠키보다 더 많은 자료를 보관할 수 있다.

• 쿠키와 또 다른 점은 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.

• 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

• 기본 문법

  localStorage.setItem("key", value); //키에 데이터 쓰기
  localStorage.getItem("key"); //키로부터 데이터 읽기
  localStorage.removeItem("key"); //키의 데이터 삭제
  localStorage.clear(); //모든 키의 데이터 삭제
  localStorage.length; //저장된 키-값 쌍의 개수
  localStorage.key(index); //index에 해당하는 키 읽기

만들어야 하는 함수들

👉🏻 getTodoList

key를 매개변수로 받았을 때, localStorage에서 key에 해당되는 value를 반환하는 함수.
value가 최종적으로 배열 형태가 되어야 하므로 string -> array 변환 필요

function getTodoList(key) {
    return localStorage.getItem(key) ? localStorage.getItem(key).split(',') : []
}

👉🏻 init

페이지를 로드했을 때 실행 되며, localStorage를 확인하여 데이터가 있을 경우 li 객체 만드는 함수
getTodoList를 통해 배열 변수를 얻고, for문을 돌면서 li 태그를 string 형태로 만들어주며, insertAdjacentHTML함수를 통해 ulElement에 삽입해주는 로직 필요

function init() {
    const todolist = getTodoList('todolist')
    for (let i = 0; i <todolist.length; i++){
        $ulElement.insertAdjacentHTML('beforeend',
        `<li>
        <span>${todolist}</span>
        <span class="close">&#215;</span>
        </li>
        `)
    }
}

👉🏻 addTodoList

key에 해당되는 LocalStorage에서 새롭게 입력된 value를 추가하는 함수.
getTodoList 함수를 통해 배열 변수를 얻고, 해당 배열에 value를 추가한 새로운 배열을 만든다. 최종적으로 localStorage.setItem을 이용하여 업데이트한다.

function addTodoList(key, value) {
    const todolist = getTodoList(key);
    //value가 추가된 새 배열을 Return
    return localStorage.setItem(key,[...todolist,value])
}

👉🏻 deleteTodoList

key에 해당되는 LocalStorage에서 특정 value를 삭제하는 함수.
getTodoList 함수를 통해 배열 변수를 얻고, 해당 배열에서 특정 value를 삭제시켜 새로운 배열을 만든다. 최종적으로 localStorage.setItem을 이용하여 업데이트한다.

function deleteTodoList(key,value) {
    const todolist = getTodoList(key)

    return localStorage.setItem(key,todolist,filter(todo => todo !== value))
}

4. code update

localstorage에 데이터를 저장하기 위한 함수들을 활용하여 다시 작성 !

• add 버튼을 눌렀을 때, localStorage에 추가한다.
• x 버튼을 눌렀을 때, localStorage에서 해당 value을 삭제한다.

const $ulElement = document.querySelector('ul');

$ulElement.addEventListener("click",(e)=>{
    const $target = e.target;
    if($target.classList.contains('close')){
        const $parentTarget = $target.parentElement;
        $parentTarget.style.display = "none";
        console.dir($parentTarget)
        const deleteItem = $parentTarget.childNodes[1].innerText;
        deleteTodoList('todoList', deleteItem);
    }
    $target.classList.toggle('checked');
})

function newElement() {
    const inputValue = document.getElementById("myInput") .value;
    const $liElement = `
        <li>
            <span>${inputValue}</span>
            <span class="close">&#215;</span>
        </li>
    `

    if (inputValue === '') {
        alert("You must write something!");
    } else {
        $ulElement.insertAdjacentHTML('beforeend', $liElement);
        addTodoList('todoList', inputValue)
    }
    document.getElementById("myInput").value = "";
}


function init() {
    let todoList = getTodoList('todoList');
    for(let i=0; i<todoList.length; i++){
        $liElement = `
            <li>
                ${todoList[i]}
                <span class="close">&#215;</span>
            </li>
        `
        $ulElement.insertAdjacentHTML('beforeend', $liElement);
    }
}

function getTodoList(key) {
    return localStorage.getItem(key) ? localStorage.getItem(key).split(',') : [];
}

function addTodoList(key, value) {
    const todoList = getTodoList(key)
    return localStorage.setItem(key,[...todoList, value])
}

function deleteTodoList(key,value) {
    const todoList = getTodoList(key)
    return localStorage.setItem(key,todoList.filter(todo => todo !== value))
}

init()

localStorage 네 함수들의 구조 아이패드로 다시 정리, 공부

📚 출처 w3school MDN