📌 목차

✨ 바닐라 JS로 크롬 앱 만들기

💁🏻

1. INTRODUCTION
2. WELCOME TO JAVASCRIPT
3. JAVASCRIPT ON THE BROWSER
4. LOGIN
5. CLOCK
6. QUOTES AND BACKGROUND
7. TO DO LIST
8. WEATHER

To Do List

7.0 Weather Setup

수업 목표: todo list 만들기 시작! Form 만들기. list 만들기

JS에서 li 만들거야.
greetings.js에서처럼 form 구현하기

7.1 Adding ToDos

수업 목표: li에 span넣고 li를 todo list에 추가해서 할일 목록 만들기

7.2 Deleting To ToDos

수업 목표: 할 일 목록에서 할 일 항목 삭제되게 만들기
todo를 삭제하는 button을 만들거야.

button은 JS에서 만들거야. button은 click event를 기다리고 있어야해.

appendChild는 순서대로야. 그러니 li먼저, button은 그 다음에 와야해.

어떤 button이 클릭되었는 지 어떻게 알지?

target으로 알 수 있어. parentElement와 Parentnode로 button의 부모(li)가 누군지 알 수 있어.

7.3 Saving To ToDos

수업 목표: 새로고침해도 등록해놓은 To Do들이 없어지지 않게 저장하기!

1. array에 new ToDo push하기
2. localStorage에 array 저장하기 근데! localStorage에는 array를 저장할 수 없고 text만 저장할 수 있다.
   근데 우리는 array로 저장하고 싶어
   -> JavaScript object나 array나 어떤 것이든 string으로 바꿔주는
   JSON.stringify()를 사용할거야.
   그러면 localStorage에 배열 모양으로 item들을 저장할 수 있어!

7.4 Loading To Dos

수업 목표 : array의 item을 가지고 뭔가 만들 수 있게 되기!
JavaScript는 array에 있는 각각의 item에 대해 function을 실행하게 해줘.

JSON.parse()

()안에 string을 넣으면 배열로 바꿔준다.

forEach

forEach는 array의 각 item에 대해 function을 실행하게 해줘

7.5 Loading To Dos part Two

수업 목표 : parseToDos array 내부의 item들을 가지고 그 item들을 나타내자.

localStorage에 이전 값까지 저장한 상태에서 새로운 값 넣기

7.6 Deleting To Dos part One

수업 목표 : 브라우저에서 item 삭제할 때, localStorage에서도 item 삭제하기

데이터 베이스에게 id를 저장하는 option주기

• 랜덤 id만들기 -> Date.now()로
• Todo를 id를 가진 objfh aksemfrl

const newToDoObj = {
    text: newToDo,
    id:Date.now(),
};

## 7.7 Deleting To Dos part Two

### 수업 목표 : filter 함수 사용 -> array
PaintToDo에서 무슨 일이 일어나는지 알아야해!
- forEach 함수는 이 PaintToDo를 PaintToDos 배열의 요소마다 실행

<mark>filter() 함수</mark><br />
지우고 싶은 item들을 제외한다.<br />
return값이 true면 값 유지.

7.8 Deleting To Dos part Three

수업 목표 : filter함수를 이용해 id가 있는 todo를 제외하기

const arr = [1, 2, 3, 4]
arr.filter((item) => item > 2)
//->[3,4]
const newArr = arr.filter(item > 2)