- Published on
✨ 바닐라 JS 크롬 앱 만들기 #7 강의 정리
- 글쓴이
📌 목차

💁🏻
- INTRODUCTION
- WELCOME TO JAVASCRIPT
- JAVASCRIPT ON THE BROWSER
- LOGIN
- CLOCK
- QUOTES AND BACKGROUND
- TO DO LIST
- 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들이 없어지지 않게 저장하기!
- array에 new ToDo push하기
- localStorage에 array 저장하기
근데! localStorage에는 array를 저장할 수 없고 text만 저장할 수 있다.
근데 우리는 array로 저장하고 싶어
-> JavaScript object나 array나 어떤 것이든 string으로 바꿔주는
JSON.stringify()를 사용할거야.
그러면 localStorage에 배열 모양으로 item들을 저장할 수 있어!
7.4 Loading To Dos
JavaScript는 array에 있는 각각의 item에 대해 function을 실행하게 해줘.
수업 목표 : array의 item을 가지고 뭔가 만들 수 있게 되기!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)