[TIL] 200304, Wed: JS to-do list 만들기 (Array.forEach / Array.filter / JSON)

rimu·2020년 3월 4일

TIL (Today I Learned)

목록 보기

2/4

Done Today

복습 : 모멘텀 시계파트, 유저이름 로컬스트리지에 저장하기 (대략 1시간 30분)
- 어려웠던부분

시계는 어렵지않게 만들었지만 아직 유저이름 저장하는건 쉽지않다. 특히 처음에 유저이름 변수 선언하는게 자꾸 헷갈린다.

const USER_LS = "currentUser" 
function loadName() {
const currentUser = localStorage.getItem(USER_LS);
if (currentUser === null) {
  //폼을 띄우고 이름을 저장한다.
  askForname();
}

addEventlistener부터 급격하게 어려워진다.
이벤트함수를 선언하고 전송이라는 이벤트가 있을때마다 함수 실행. 함수의 내용은 입력된 유저네임을 받아서 paintGreeting(),
saveName() 함수 실행하기.
함수를 만들때 인자에 뭘 넣어야하는지 아직 한번에 감이 오지않음. 텍스트를 넣거나 하는 부분..

New Learning

1. 바닐라자바스크립트 모멘텀 : To-do list

Part1. HTML 화면 구성

1.로컬스토리지에 저장할 변수 선언하고 지난강의와 비슷한 조건문 & 이벤트함수 만들기 (loadToDos)
주의: 로컬스트리지에 아무것도 없을때는 뭘 실행할 필요 없음.
2. appendChild 이용해서 투두가 등장할 화면 만들기
li, span, btn

Part2. 로컬스토리지에 Todo 저장 및 화면에 띄우기 [핵심]

2-1. 로컬스토리지 저장: JSON.stringify( )

1)투두리스트를 푸쉬할 빈배열 생성
2)투두리스트가 들어갈 형식으로 객체만들기. id는 length + 1(빈배열이라 길이가 0) / 리스트에도 같은 아이디값주기
3)객체 푸쉬해서 빈배열 toDos에 넣어주기
4)saveToDos() 함수만들기. => 로컬스토리지에 객체저장하는데 JSON.stringify()이용해서 문자화하기 (로컬스토리지특징때문에)

JSON.stringify( ) / JSON.parse( )

JavaScript Object Notation:
자바스크립트에서 브라우저로 데이터를 주고받을때 자바스크립트가 그걸 다룰수 있도록 object로 또는 string으로 바꿔주는 기능

JSON.stringify( ) : 객체를 문자열로 바꾼다.

JSON.parse( ) : 문자열을 객체로 바꾼다.

2-2. 로컬스토리지에 저장하기: array.forEach( )

1) 로컬스토리지가 빈값이 아니면 실행하는 함수 loadedToDos를 콘솔로깅해보면 문자열로 나오는데 다시 객체화해야함. JSON.parse();
2) 여기서 forEach(함수)를 이용해서 toDos에 있는 값들 중에서 .text만 가져온다.

array.forEach( )

array.forEach( ):
배열이 가지고 있는 기능으로, 배열에 담겨있는 요소 각각에 한번씩 함수를 실행시켜준다. (반복문의 성질을 가짐)

function loadToDos() {
  const loadedToDos = localStorage.getItem(TODOS_LS);
  if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    //문자열을 객체로 바꾸기 위해 JSON.parse() 사용
    parsedToDos.forEach(function(toDo) {
      paintToDo(toDo.text);
    }); //forEach 안에 바로 함수를 만들어줘야지 배열에 담긴것들에 함수가 적용됨.
  }
}

3)그리고 이 값을 paintToDo에 넣어주면 비로소 화면에 나타난다.

Part3. Todo-list 제거 기능 추가

3-1. HTML 화면에서 제거

function deleteToDo(event) {
  const btn = event.target;
  const li = btn.parentNode;
  toDoList.removeChild(li);
    //모든 li에는 id가 있다.  주의:li.id는 문자라서 넘버로 바꿔줘야함
  });

btn에 대하여 클릭이 발생했을때 함수가 실행되는 이벤트함수 생성 ;
target은 내가 원하는 것을 짚어줌. 하지만 li를 지워야지 버튼과 텍스트가 모두 없어진다.
그래서 li에 대한 자식태그들을 삭제한다고 입력하면 화면에서 제거 된다.

3-2. 로컬스토리지에서 제거하기: Array.fillter( )

array.filter( )

array.filter( ):
forEach에서 함수를 실행하는것처럼 배열 각각의 요소에 함수가 통해 실행이 되는데 filter에 true를 리턴하는 요소만 찾아내어 새로운 배열을 만든다.

  const cleanToDos = toDos.filter(function(toDo) {
    return toDo.id !== parseInt(li.id) ;

그래서 이 toDos.filter()는 만들어진 객체의 모든 요소에 들어가서 id가 li가 없는 애를 찾아내어 새로운 배열을 만들어낸다.
이 새로운 배열 cleanToDos를 기존 배열 toDos에 재할당하면 버튼을 클릭했을때 로컬스토리지에서 제거되고 리로딩해도 다시 나타나지 않는다.

Feelings & Thoughts

아이고 두야.... 🤯
투두리스트 만들기는 기능 자체는 간단해도 화면과 로컬스토리지 둘 다 처리를 해줘야하기 때문에 간단하지 않다. 화면 구성하기까지는 어찌저찌하겠는데 로컬스토리지에 저장하는거부터는 좀 헤맸다.
너무많은 함수와 변수들을 새로 만들어서 뭐가 뭔지도 헷갈리고...
핵심 로직을 꽉 잡아야지 코딩을 하다가 길을 잃지 않을 거같다.
그래도 어려운거에 비해 내가 만든 투두리스트가 딱 생성되고 제거되는게 눈에 보이니까 재밌고 신기하다. 개발 공부할때 나에게 맞는 공부자료를 선택하는것도 꽤 중요한 것 같다. 어제 공부한 내용이 어렵지 않아서 투두리스트 만들기도 금방 끝낼 줄 알았는데 왠걸.. 하루가 다 갔다.
내일은 오늘꺼 복습 + 모멘텀 끝내기 목표다!