Today I Learned #8

loopbacksealยท2021๋…„ 1์›” 5์ผ
0

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
8/16
post-thumbnail

delBtn์„ ํ†ตํ•ด ๋“ฑ๋ก๋œ <li> ์‚ญ์ œํ•˜๊ธฐ

์˜ค๋Š˜์€ ์ถ”๊ฐ€์ ์œผ๋กœ, "โŒ"๋ชจ์–‘์˜ delBtn์„ clickํ•˜๋ฉด ํ•ด๋‹น <li>๊ฐ€ ์‚ญ์ œ๋˜๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ฒ ๋‹ค. ๋จผ์ € paintToDo() ๋‚ด๋ถ€์—์„œ delBtn.addEventListener("click",deleteToDo)๋ฅผ ํ†ตํ•ด click ์ด๋ฒคํŠธ ๋ฐœ์ƒ์‹œ deleteToDo()๊ฐ€ ๋ฐœ์ƒํ•˜๋„๋ก ํ•˜๊ณ , ๋™๋ช…์˜ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ–ˆ๋‹ค.

deleteToDo()

To Do List์˜ ๊ฐ ํ•ญ๋ชฉ์˜ delBtn์ด click๋œ ๊ฒฝ์šฐ ์ž‘๋™ํ•˜๋Š” deleteToDo()ํ•จ์ˆ˜๋Š” ๊ธฐ์กด์˜ To Do List๋ฅผ ๊ฐฑ์‹ ํ•˜์—ฌ click๋œ ํ•ด๋‹น ๊ฐ์ฒด๊ฐ€ ์—†๋Š” To Do List๋ฅผ returnํ•˜์—ฌ paintToDo()๋ฅผ ์‹คํ–‰ํ•ด์•ผํ•œ๋‹ค. click๋œ ํ•ด๋‹น ๊ฐ์ฒด๋Š” event.target์„ ํ†ตํ•ด ์ง€์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, console.dir(event.target)์„ ์‹คํ–‰ํ•˜๋ฉด, ์•„๋ž˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด ํ•ด๋‹น element์˜ ๋ชจ๋“  ํ•ญ๋ชฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

console.dir๋Š” HTML์˜ ๊ตฌ์กฐ๋กœ ์ถœ๋ ฅ๋˜๋Š” console.log์™€ ๋‹ฌ๋ฆฌ JSON ํ˜•ํƒœ์˜ ํŠธ๋ฆฌ๊ตฌ์กฐ๋กœ ์ธ์ž๋ฅผ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค. ์ด ์ค‘, parentNode: li๋ฅผ ํ™•์ธํ•˜์˜€๋‹ค๋ฉด, event.target.parentNode ๊ฐ€ ์‚ญ์ œ๋˜์–ด์•ผํ•˜๋Š” ์š”์†Œ์ž„์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const btn = event.target;
const li = btn.parentNode;

์ด์ฒ˜๋Ÿผ ์„ ์–ธํ•ด์ฃผ๊ณ , li๋ฅผ ์‚ญ์ œํ•ด์ฃผ๋ฉด ๋˜๋Š”๋ฐ, delete child MDN๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ, toDoList.removeChild(li);๋ฅผ ํ•จ์ˆ˜์— ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด, ์ •์ƒ์ ์œผ๋กœ ์‚ญ์ œ๋จ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ˜„์žฌ ์‚ญ์ œ๋œ ๊ฒƒ์€ HTML์ƒ์˜ ๋งˆํฌ์—… ๋ฟ์ด๊ณ , ๋ฐ์ดํ„ฐ๋Š” Local Storage์— ๊ทธ๋Œ€๋กœ ์ €์žฅ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ์ถ”๊ฐ€ ์ž‘์—…์„ ํ†ตํ•ด Local Storage๋„ ๊ฐฑ์‹ ํ•ด์ฃผ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ, ์ƒˆ๋กœ๊ณ ์นจ ํ•  ๊ฒฝ์šฐ ์‚ญ์ œ๋˜์—ˆ๋˜ li๊ฐ€ ๋‹ค์‹œ ๋ณต์›๋จ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Array.filter()

Array.filter() <- list์— ์žˆ๋Š” ๋ชจ๋“  ์›์†Œ๋ฅผ ์‹คํ–‰ ํ›„, ๊ทธ ๊ฒฐ๊ณผ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” array๋ฅผ return, forEach()์™€ ๋น„์Šทํ•จ

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

์œ„์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ด์ฃผ๋ฉด, ๊ธฐ๋Œ€ํ•œ ๊ฒฐ๊ณผ๋Š” ํ•ด๋‹น ๋ชฉ๋ก์„ ์ œ์™ธํ•œ toDos๊ฐ€ return๋˜๋Š” ๊ฒƒ์ด์—ˆ์œผ๋‚˜, toDos๊ฐ€ ๊ทธ๋Œ€๋กœ return๋˜์—ˆ๋‹ค.

console.log(toDo.id,li.id)๋ฅผ cleanToDos๋‚ด๋ถ€์— ์ถ”๊ฐ€ํ•œ ํ›„ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด, toDo.id๋Š” 1์ด์ง€๋งŒ li.id๋Š” "1"์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

parseInt()

์ด๋Š” ํ˜•ํƒœ์˜ ์ฐจ์ด (1์€ ์ˆซ์ž, "1"์€ ๋ฌธ์ž์—ด) ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๋Š” ํ˜„์ƒ์œผ๋กœ, !==๋ฅผ !=๋กœ ์ˆ˜์ •ํ•ด์ฃผ๊ฑฐ๋‚˜, li.id๋ฅผ parseInt(li.id)๋กœ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด return๋œ array cleanToDos๋ฅผ toDos = cleanToDos๋ฅผ ํ•ด์คŒ์œผ๋กœ์„œ toDos ๋˜ํ•œ ์ˆ˜์ •ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , (const๋กœ ์„ ์–ธ๋œ toDos๋ฅผ let์œผ๋กœ ์„ ์–ธํ•˜๋„๋ก ์ˆ˜์ •ํ–ˆ๋‹ค) saveToDos()๋ฅผ ํ†ตํ•ด ์ˆ˜์ •๋œ toDos๋ฅผ Local Storage์— ์ €์žฅํ•ด์ฃผ๋ฉด, delBtn์„ clickํ•˜์—ฌ To Do List์˜ ํ•ญ๋ชฉ์„ ์‚ญ์ œํ•˜๊ฒŒ๋˜๊ณ , ๊ฐฑ์‹ ๋œ To Do List๊ฐ€ Local Storage์— ๋ฐ˜์˜๋˜์–ด ์ƒˆ๋กœ๊ณ ์นจํ•˜์—ฌ๋„ ์œ ์ง€๋จ์„ ํ™•์ธํ–ˆ๋‹ค.

profile
CAU Business Administration

0๊ฐœ์˜ ๋Œ“๊ธ€