to do list save, delete

YEONGHUN KO·2021년 11월 15일
0

JAVASCRIPT - TO DO LIST

목록 보기
4/15
post-thumbnail

데이터 저장 하는 법

데이터 저장은 array를 하나 만들어서 차곡차곡 저장한다. 아래는 todolist.js 에 추가되는 코드들이다.
그리고 데이터는 tuple 의 형태로(id:@@ ,text:@@) array 이에 저장되게 될 것이다.

const loadedToDos = localStorage.getItem(TODOS_LS);
  if (toDos !== null) {	  if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos); // 스트링형태인 정보를 객체화 시켜준다.
    parsedToDos.forEach(function(toDo) {
      paintToDo(toDo.text);
    });
// foreach는 파이썬의 포문이라고 생각하면 된다. foreach는 function을 기본적으로 탑재한다.
// 그 function의 이름은 toDo로 일단 정했다. 그리고 parsetodo 의 원소(line)를 하나하나 paintodo에다가 대입한다.

const toDos = []; // to do list 에 입력되는 값이 저장되는 array를 하나 만든다.

//아래 코드는 'function paintToDo (text) {}' 안에 추가될 코드들이다.
{
const newId = toDos.length + 1; //tuple 에 추가될때 부여되는 데이터의 id를 정해준다.
delBtn.innerText = "❌";
li.id = newId;
const toDoObj = {
    text: text,
    id: newId
}; // todolist 에 submit 된 정보가 tuple 의 형태로 만들어지고
toDos.push(toDoObj); // push 라는 메스드를 통해 array 이에 삽입된다.
saveToDos(); // 그리고 저장해준다.
}

function saveToDos() {
  localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
} // JSON 은 "JavaScript Object Notion" 의 약자로 외부 데이터를 자바스크립트가 객체로 인식할 수 있게 해준다. json.stringify 는 일단 외부데이터를 스트링화해준다.(나중에 객체로 parse 해줄거다). toDos array 에 있는 값들이 tuple 형태로 TODOS_LS Key 와 연결되어 저장됨.
}
//요약: todolist 값을 local storage에 저장.

데이터 삭제하는 법

let toDos = []; // deleToDo 함수안의 toDos = cleanToDos; 때문에 toDos 변수를 고정시키면 안됨. 그래서 let 으로 변환했다.

// 컴퓨터에게 정확히 어떤 위치에 있는 것을 삭제하라고 알려줘야한다. 그래서 명령을 세부화 시켜야 하기 때문에 까다로울 수 있다.
function deleteToDo(event) {
  const btn = event.target;
  // 이벤트.타겟이 버튼을 의미한다.(버튼을 누르면 삭제되므로 버튼을 의미하는 코드가 무엇인지 알아내야한다)
  // 무슨말인지 잘 모르겠다. 까먹었다 싶으면 console.log(btn) 하면 알 수 있다. 이 함수가 실행하게끔 한 원래 객체를 target 해서 보여주는 것.
  // 여기선 <button>엑스표시</button>이 되는 것이다.
  const li = btn.parentNode; //근데 버튼과 함께 버튼에 딸린 내용도 삭제되어야한다. 그래서 버튼에 해당하는 parent 를 찾아야함. 그때 console.dir(btn)라고 console 에 타이핑하고 쭉 내려가면 li.id = #1이 parentNode라는 걸 알 수 있다.
  toDoList.removeChild(li); // removeChild 메소드를 이용해 li를 삭제하자. 근데 삭제하고 나서 저장이 되어야 새로고침해도 안나타난다.
  const cleanToDos = toDos.filter(function (toDo) {
    //이때 사용하는 메소트가 filter이다. 말그대로 filter안에있는 함수가 지정한 조건에 해당하는 값만 return 하는 메소드이다. 더 자세한 설명은 아래에 있다
    console.log(li.id, toDo.id);
    return toDo.id !== parseInt(li.id);
  });
  toDos = cleanToDos; // 그리고 이렇게 삭제되어 없어진 원소들이 toDos array 에 업데이트되어야 하기에 toDos앞에 let을 붙여 변환가능한 변수로 만들어주고 cleantoDos와 같다고 치환하는 것이다.

  saveToDos(); // 그리고 변화를 유지하기 위해 저장해준다.

  // cleanToDos 에 대한 자세한 설명:
  // forEach 함수와 똑깥이 파이썬의 FOR 문처럼 원소하나하나를 훑는다. 그래서 toDos array안에 존재하는 원소가 4개라고 할때 4번 훑으면, delete누른 id 도 4번 훑는다.
  // array안에 존재하는 원소의 갯수만큼 나온다는 뜻.(단 , delete된 id는 하나이므로 똑깥은 숫자가 나오겠지.)
  // 예를들어, array안에 4개의 원소가 존재. 그중 2번째 원소를 삭제하면 id=2에 해당하는 원소가 없어짐. 그럼 li.id/toDos.id =(2/1,2/3,2/4) 가 되는것이다. 그럼 array안에 있는 1,3,4번째의 원소가 선택삭제된 원소의 id랑 다르므로 필터링되어 나오게 된다.
  // 근데 parseInt(정수로 변환) 하는 이유는 선택 삭제된 원소의 id 가 string 형태로 인식되기 때문에 array 원소 id랑 비교가능해지기 위해서 정수로 변환해주는 것이다.

  // 요약: 쪼까 이해하기 어려운 함수다. 삭제해서 없애고 그 상태를 저장하는 함수다.

  //그리고 아래의 코드를 'function paintToDo (text) {}' 안에 추가해줌으로써 이모지를 눌렀을때 삭제 함수로 이동해 클릭된 데이터가 삭제되도록 한다.
  delBtn.addEventListener("click", deleteToDo);
}

to do.id / li.id

위의 그림처럼 application 에 들어가서 보면 key: toDos 이고 value: tuple 형태로 저장 되어있는 것을 볼 수 있다.

to do list 에서 4개중 첫번째것을 지웠다. 그리고 콘솔을 눌러보니(console.log(li.id,toDo.id)에 의해 삭제된 아이디와 array에 남은 id 가 출력된다.) 삭제된 id 가 1로 나와있고 밑에 2,3,4 가 아직 array에 남은 데이터의 id 임을 알 수 있다. 즉 2,3,4번째의 데이터 = toDos array 가 되는 것이다.

profile
'과연 이게 최선일까?' 끊임없이 생각하기

0개의 댓글