✏️ TIL

To Do List를 localStorage에 저장하고, 저장된 List를 화면에 출력한다.

📚 Algorithm

1. 초반부에 'toDos' array를 생성한다

array 형태의 할 일 목록을 저장한다.
해야할 일이 하나가 아니라 여러개이기 때문.

2. 해야할 일을 생성할 때 마다 'toDos' array에 추가되도록 한다.

2-1. 그러기 위해서 'toDoObj' object를 만든다.

  const toDoObj = {
text : text,
id : toDos.length + 1 }; // 1
toDos.push(toDoObj); // 2

1. 임의의 array가 있을 때 array.length를 쓰면 array의 길이를 알 수 있다.
   그런데 **여기서는 toDos array 안에 push를 하기 전이므로(배열이 비어있는 상태)
   id에 toDos.length + 1을 해주는 것.
2. push를 써서 'toDos' array안에 'toDoObj'를 삽입한다.

3. 버튼을 클릭 했을 때 어떤 <li>를 지워야 하는지 알 수 있도록 만든다

3-1. <li>에도 id를 추가한다.

li.id = toDos.length + 1

4. localStorage에 toDos를 저장해주는 함수를 만든다.

4-1. 1의 'toDos' array를 가져와서 로컬에 저장하는 'saveToDos'를 만든다.

function saveToDos (){
`localStorage.setItem(TODOS_LS, toDos); }

4-2. 하지만 localStorage에는 JS데이터 (X) 오직 Stirng만 저장 가능하다. 그래서 js object를 string으로 바꿔주는 JSON.stringify를 사용한다.

function saveToDos (){
localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); }

💡 JSON.stringify
: JSON object 을 String으로 변환한다.

5. localStorage에 저장된 toDos를 불러온다.

5-1. 불러온 toDos가 stirng이기 때문에 string > object를 위해 JSON을 또 다시 사용한다.

const parsedToDos = JSON.parse(loadedToDos);

💡 JSON.parse
: String 을 JSON object로 변환한다.

6. localStorge에서 불러온 parsedToDos를 화면에 출력한다.

6-1. parsedToDos에서 불러온 array 안의 객체들에 paintToDos를 모두 실행하기 위해 forEach를 사용한다.

parsedToDos.forEach(function(toDo) {paintToDo(toDo.text);
} );

💡 forEach
: array를 위한 함수로, array에 담겨있는 것들 각각에 한번씩 함수를 실행한다.
array.forEach(function(callback) { function (currentValue.text)

요약하면 아래와 같다.

const parsedToDos = JSON.parse(loadedToDos);
// loadedToDos로 배열을 불러옴.
parsedToDos.forEach(function(toDo)
// array.forEach (function (callback함수명)
// 함수 이름을 function name () 이 아니라 function(name) 이라고 지정해 줬다고 생각하면 됨
{paintToDo(toDo.text);
// { 실행할 function (  currentValue . 배열의 Key);
// currentValue = 위에서 지정한 Function
// paintToDo가 화면출력함수라서 배열의 모든 요소 중 text라는 key가 forEach를 통해 출력된 것
} );