to-do list

todo-list를 만들어 볼 것이다.

list 추가하기

앞에 내용에 다 포함이 된 내용이므로 생략.

button

버튼을 이용해 추가된 list를 제거하는 동작을 구현할 것임.
물론 "click" 이벤트가 발생했을 경우 그 때의 handler를 동작시킬 것이다.

<form>
  <li>
    <spans>this is element</spans>
    <button id="button">button</button>
  </li>
</form>

const button = document.getElementById("button");

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

button.onclick = handleButtonClick;

요로코롬 쓸 수 있다.
event 객체를 활용해서 target, 즉 이 이벤트를 호출한 객체가 무엇인지 알아낼 수 있고, 현재 객체의 parent를 제거해 주는 것으로 원하는 동작을 하게 만들 수 있다.

localStorage 활용

localStorage에 to-do list의 내용물을 넣어서 저장할 수 있다.

주의 할 점

localStorage의 key, value 값은 오직 string만 저장 가능하다.

그런데 우리가 저장할 to-do list는 array의 형태로, string이 아니다.
그래서 localStorage를 활용해서 array를 저장하기 위해서 string으로 변환하고, 또 받아온 string을 다시 array 형태로 복구해주는 작업이 필요하다.

이 때 쓰이는 함수가 있는데, 다음과 같다.

JSON.stringify(obj)

const arr = ["a", "b", "c", "d", "e"];

console.log(JSON.stringify(arr));

// "[\"a\", \"b\", \"c\", \"d\", \"e\"]"

요로코롬 쓸 수 있게 된다.

JSON.parse(str)

const strArr = "[\"a\", \"b\", \"c\", \"d\", \"e\"]";

console.log(JSON.parse(strArr));

// ["a", "b", "c", "d", "e"]

위의 함수의 역변환이라고 생각하면 된다.

array 활용

다음과 같은 편리한 메소드들이 존재한다.

forEach(func)

말 그대로 array의 각 element를 인자로 하여 func()를 호출하게 해 주는 함수이다.

filter(func)

한마디로 하자면 array를 filtering하는 함수.
array의 각 element를 인자로 하여 func()를 호출하긴 하는데, 각 func()가 true인 값을 리턴하게 만든 element만 뽑아서 새로운 array를 만들어 리턴한다.

ex)

[1, 2, 3, 4, 5].filter((arg) => { return arg !== 3 });
// [1, 2, 4, 5]

요로코롬 사용할 수 있다.

이런 함수들을 이용해서 값을 지운 array를 다시 localStorage로 저장시키면 수정이 완료된다.