[Front-end๐ฆ] #21 TIL
1. ๋ฉ์ฌ ์์
JavaScript ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ํ ๊ธ์ ํ๋ฒ์ ์ ๋ฆฌํ๊ธฐ ์ํด์ ๊ธ์ ๋๋ด๋ค.
์ค๋์ ์ฒ์์ผ๋ก JavaScript๋ฅผ ๋ค์ ๋ ์ธ๋ฐ, ์ฌ์ค ๊ธฐ์ด๋ผ์ ๊ฐ๋จํ๊ฒ ํธ๋ก๋ก ์ง์ด์ฃผ์ค ์ค ์์๋๋ ์ฌ๋ฌ๊ฐ์ง ์ค์ต ํด๋ณด๋ฉด์ ์ฒ์ ์ ํ๋ JavaScript type์ ๋ํ ๋
ผ๋(?) ์ด๋ผ๊ฑฐ๋, ==๊ณผ ===์ ์ฐจ์ด, ๋ถ๋์์์ ์ด์ผ๊ธฐ๊น์ง๋ ์ธ๊ธ์ด ๋ผ์ ์๋นํ ๋๋๋ค. JS๋ ์ ํด๋ณธ ์ ์ด ์์ด์ ๋ถ๋ ์์์ ๋นผ๊ณ ๋ ๋ค ์ฒ์ ๋ฃ๋ ์๊ธฐ์๋ค
2. JS Challenge
์ ๋ ฅ๋ฐ์ ๊ฐ์ ul ์์ li๋ฅผ ์์ฑํด์ ๋ฃ๋ ์์ ์ ํด๋ณด์๋ค.
์ค๋์ ํ์ด๋ผ์ดํธ.
// element ์์ฑํด์ appendChild๋ก ๋ฃ๊ธฐ. const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); li.appendChild(button); toDoList.appendChild(li);
// forEach ์ฌ์ฉ. parsedToDos.forEach(paintToDo); parsedToDos.forEach(element => { //๋ญ๊ฐ ์ฌ๊ธฐ์ element ๋ฅผ ๊ฐ์ง๊ณ ๋ ์์ ํ ๊ฑฐ๋ผ๋ฉด ์ด๋ ๊ฒ ์ฐ๋ฉด ๋จ. paintToDo(element); });
const str_arr = JSON.stringify(arr); cosnt arr = JSON.parse(str_arr);
filter ๋ ์กด์ฌํ๋ array์์ ๋ญ๊ฐ๋ฅผ ์ง์ฐ๋๊ฒ ์๋๋ผ, ๊ทธ๊ฒ๋ง ๋บ ์ array๋ฅผ ๋ง๋ค์ด์ ํ ๋นํ๋ ๊ฒ์ด๋ค.
// list๋ฅผ filter ํ๋๋ฐ list ์ ๊ฐ item ์ funcFilter ์ ๋ฃ์ด์ ๋์จ return์ด true ์ด๋ฉด ์๋ก์ด list์ ๋ค์ด๊ฐ๊ณ , false ์ด๋ฉด ์๋ค์ด๊ฐ๊ณ . list.filter(funcFilter) toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
<form id="todo-form"> <input type="text" placeholder="Write To Do and Press"> </form> <ul id="todo-list"> </ul>
// 0. ํ๋ฉด์ ์๋ ์์ ๋ถ๋ฌ์ค๊ธฐ. const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "todos";
4
let toDos = []; //toDo ๋ฐฐ์ด // // 4. toDos ํจ์๋ฅผ localStorage์ String ์ผ๋ก ์ ์ฅํ๋ ํจ์. // ์ ์ฅ์ ๋๋๋ฐ ์๋ก๊ณ ์นจํ๋ฉด ์ ์ ๊ฒ์ ์๋จ๊ณ ์๋ก ์ด ๊ฒ๋ง ๋จ์... (5๋ฒ์ผ๋ก) function saveToDos() { // Array๋ localStorage์ ์ ์ฅํ ์ ์์. // String์ผ๋ก ์ ์ฅํ๋ค๊ฐ, ๊ฐ์ ธ์์ ๋ณํํด์ ์ฐ์. // JSON.stringify, JSON.parse localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); }
3, 7, 8
// 3. ๋ฒํผ์ ๋๋ฅด๋ฉด TODO๋ฅผ ์ญ์ ํ๋ ํจ์. // li.remove()๋ง ์น๋ฉด ์ญ์ ๋ ์ ๋๋๋ฐ ์๋ก๊ณ ์นจํ๋ฉด ๋ค์ ์๊น (4๋ฒ saveToDos๋ก) function deleteToDo(event) { // event.target์ ํ๋ฉด ์ด๋ค ๊ฒ์ด ์ด ์ด๋ฒคํธ๋ฅผ ์ผ์ผ์ผฐ๋์ง ์ ์ ์์. // ๊ทธ์น๋ง button ๋ง์ผ๋ก๋ ํ ์ค ์ ์ฒด๋ฅผ ์ญ์ ํ ์๊ฐ ์์. parentElement const li = event.target.parentElement; // 7. filter๋ก ์ญ์ ๋ฒํผ ๋๋ฅธ ์์ list์์๋ ์ญ์ . toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); li.remove(); // 8. ์ญ์ ํ list๋ฅผ ๋ค์ localStorage์ ์ ์ฅ์ ํด์ค์ผํจ!!! saveToDos(); }
2
// 2. todo๋ฅผ ํ๋ฉด์ ๋ณด์ด๊ฒ ๋ง๋๋ ํจ์ function paintToDo(newToDo) { const li = document.createElement("li"); li.id = newToDo.id; const span = document.createElement("span"); span.innerText = newToDo.text; const button = document.createElement("button"); button.innerText = "โ"; // ์ฐ๋ฆฌ๊ฐ ๋ง๋ ์ญ์ ๋ฒํผ์ ๋๋ฅด๋ฉด ๋์ํด์ผํจ. (3๋ฒ deleteToDo๋ก) button.addEventListener("click", deleteToDo); li.appendChild(span); li.appendChild(button); toDoList.appendChild(li); }
1, 6
//1. input์ด submit ๋ ๋ todo๋ฅผ ๋ฐฐ์ด์ ์ ์ฅํ๊ณ ํ๋ฉด์ ๋ณด์ด๊ฒ ํ์. // ๊ทผ๋ฐ ํ๋ฉด์ ๊ทธ๋ฆฌ๋ ํจ์๋ ๋ฐ๋ก ๋ง๋ค์. (2๋ฒ paintToDo๋ก ๊ฐ์์ค.) function handleToDoSubmit(event) { event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; // 6. ์ญ์ ํ ๋ filter๋ฅผ ์ธ๊ฑด๋ฐ, list element๊ฐ string์ด๋ฉด ๊ฐ์ ๋ด์ฉ์ธ๊ฑฐ ๋ค ๋ ์๊ฐ๋ฒ๋ฆฐ๋ค. id๋ฅผ ์ฃผ์. // ๊ทธ๋์ ์ญ์ ๋ ์ด๋ป๊ฒ ํ ๊ฑด๋ฐ??(-> 7๋ฒ์ผ๋ก) const newToDoObj = { id: Date.now(), text: newToDo }; toDos.push(newToDoObj); paintToDo(newToDoObj); saveToDos(); } toDoForm.addEventListener("submit", handleToDoSubmit);
5
// 5. ์ ์ ์ด ๊ฒ์ localStorage์์ toDos์ ๋ถ๋ฌ์ค๋ ํจ์. // ๊ทผ๋ฐ ์๊ฐํด๋ณด๋๊น ์ญ์ ํ ๋ toDos ์์ ์ญ์ ๋ ์ด์ฉ์ง? (-> 6๋ฒ์ผ๋ก) const savedToDos = localStorage.getItem(TODOS_KEY); if (saveToDos) { const parsedToDos = JSON.parse(savedToDos); toDos = parsedToDos; //todo๊ฐ ๋น array๋ก ์์ํด์ ์ ์ data๊ฐ ์๋จ๊ณ ๋ฎ์ด์ฐ๊ธฐ ๋๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐ. parsedToDos.forEach(paintToDo); }
3. ์์ ํ๊ณ
1. ์์ ์์ JavaScript์ ๋ค์ด๊ฐ๋ค.
feelings/ findings : ์ฒซ ๋ ์ด๋ผ ๊ฐ๋จํ๊ฒ ํ ์ค ์์๋๋ฐ ์๋ฃํ์ด๋ ๋ถ๋์์์ ์ด๋... ๊ณต๋ถํ ๊ฒ์ ์ ๋ง ๋ฌด๊ถ๋ฌด์งํ๋ค๋ ๊ฒ์ ๋๋ผ๊ฒ ๋์๋ค. ๊ทธ๋ฆฌ๊ณ js๊ฐ ์คํฌ๋ฆฝํธ ์ธ์ด๋ผ๋ ๊ฑฐ.. ์๊ฐ๋ ๋ชปํ๋๋ฐ ๋ค์ผ๋๊น ์ ๋ง๋ค!! ํ๊ณ ์ฒด๊ฐํ๊ฒ ๋์๋ค.
action plan :
- ๋ฌธ๋ฒ์ ๋ค๋ฅธ ์ธ์ด์ ๋ค๋ฅธ ์ ์์ฃผ๋ก ์ ๋ฆฌํ๊ณ ,
- JS Chaellenge ์์ ๋์ค๋ HTML/CSS ์ ์ฐ๊ฒฐํด์ ์ฐ๋ ํํธ๋ ๋ณต์ตํ๊ธฐ.
2. ์ ์๋๊ป ์ด๋ ฅ์ ๊ฒํ ๋ฅผ ๋ถํ๋๋ ธ๋ค.
feelings/ findings : ์ ๋ฌธ๊ฐ๊ฐ ๋ด์ฃผ์๋ ๊ฒ์ ์ฒ์์ธ๋ฐ.. ๋ด ํ๋ก์ ํธ๋ค์ด ์์ง ๋ง์ด ๋ฏธ๋นํ ๊ฒ์ ๋๋ ์ ์์๋ค. ๋, ๊ฒฝ์๋ ฅ ์๋. ๋ดค์ ๋ ์ค ๋ฝ๊ณ ์ถ์๋ฐ? ํ๊ฒ ๋ง๋๋ ์ด๋ ฅ์๊ฐ ์์ง์ ์๋ ๊ฒ ๊ฐ๋ค. ์ด๋ ๋ถ๋ถ์ ๊ฐ์กฐํ ์ง์ ๋ํด์ ์๊ฐ์ ๋ ํด๋ด์ผ๊ฒ ๋ค.
ํ๋ก์ ํธ๋ฅผ ๋ฐ์ ์ํค๋๊ฒ ๊ฐ์ฅ ์ข๊ฒ ์ง๋ง ํ๋ก์ ํธ๋ ๋จ๊ธฐ๊ฐ์ ์์ฑํด์ ์ถ์! ์ง์! ํ ์ ์๋๊ฒ ์๋๋ฏ๋ก... ์ฒด๊ณ์ ์ธ Github ๊ด๋ฆฌ๊ฐ ์ ๋ง ์ ์คํ๋ค๋ ๊ฒ์ ๋๊ผ๋ค.
action plan :
- 1128 ์๋ฃ :
my ๋์ฅ๊ณ README.md ์์ธํ๊ฒ ๋ถ์ด๊ธฐ (์ด๋ฒ์ฃผ ๋ด๋ก) - ํ๋ก์ ํธ ์๋ฆผ ๊ธฐ๋ฅ ๋ถ์ด๊ณ ์ถ์ํ๊ธฐ + ๋ฆฌํฉํ ๋ง ํ๊ธฐ (3๋ฌ ๋ด๋ก...)
- 1129 ์๋ฃ :
์ผ๋จ ํ ์ ์๋ ๊ณณ๊น์ง๋ง์ด๋ผ๋ ๊ณ ์ณ์ ์ด๋ ฅ์ ์ ์ถํ๊ธฐ.
3. JS Chaellenge ์์ localStorage์ ์ ์ฅํ ์ ์๋ TO-DO ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ๋ฒ์ ๋ฐฐ์ ๋ค.
feelings/ findings : ๋์ฝ์ค์ ์ฝ๋ฉ ํ๋ก์ธ์ค๋ฅผ ๋ฐ๋ผ๊ฐ ๋๋ ์์ฐ ์ดํด๊ฐ ๋ ์๋๋ค ์์ฐ~~ ํ๋ฉด์ ์ ๋ดค๋๋ฐ, ์ ์ฒด ์ฝ๋๋ฅผ ๋ค์ ๋ณด๋๊น ์ค์? ๊ฐ์๊ธฐ ์ฝ๋๊ฐ ์์ฒญ ๊ธธ์ด์ก์ด์. ๊ฐ ๋๋ค.. ๊ทธ๋ฆฌ๊ณ ๋ค์ ์ฝ๋ฉ์ ํ ๋, ์ฌ์ํ ๋ฌธ๋ฒ์ด๋ ๋ฉ์๋ ์ด๋ฆ ๊ฐ์๊ฒ ๊ธฐ์ต์ด ์ ์๋ฌ๋ค.
๋์ฝ์ค ํจ์ ๋๋๋๊ฒ ์ง์ง.. ์์ ์ ์ด์๋ค. ๋๊ฐ์ผ๋ฉด ๊ทธ๋ฅ ๋ง ๋ค ๋๋ ค๋ฃ๊ณ ์ ๋ชฐ๋ผ ์ผ๋จ ๋์๊ฐ๋ฉด ๋์ง ํ๊ณ ๋์ค์ ๊ณ ์น์ง ๋ญ ํ๊ณ ์๊ณ ์ณค์ ๊ฒ ๊ฐ์๋ฐ.
action plan :
- ๋ฌธ๋ฒ๊ณผ ๋ฉ์๋๋ ์์ผ๋ก ์น๋ถํด์ ์ต์ํด์ง๋๊ฒ ์ข์ ๊ฒ ๊ฐ๊ณ
- ํจ์๋ ์ต๋ํ ์ด ์ฝ๋๊ฐ ๋ญ ์๋ฏธํ๋์ง๋ฅผ ์๊ฐํด์ ๋ง๋ค์. ์ด๋ฆ๋ ์ ๊ฒฝ์จ์ ์ง๊ณ !
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Front-end๐ฆ] #21 TIL), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ddosang/Front-end-21-2์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค