[Front-end๐Ÿฆ] #21 TIL

20151 ๋‹จ์–ด frontCSShtmlJavaScriptCSS

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 :

  • ๋ฌธ๋ฒ•๊ณผ ๋ฉ”์„œ๋“œ๋Š” ์–‘์œผ๋กœ ์Šน๋ถ€ํ•ด์„œ ์ต์ˆ™ํ•ด์ง€๋Š”๊ฒŒ ์ข‹์„ ๊ฒƒ ๊ฐ™๊ณ 
  • ํ•จ์ˆ˜๋Š” ์ตœ๋Œ€ํ•œ ์ด ์ฝ”๋“œ๊ฐ€ ๋ญ˜ ์˜๋ฏธํ•˜๋Š”์ง€๋ฅผ ์ƒ๊ฐํ•ด์„œ ๋งŒ๋“ค์ž. ์ด๋ฆ„๋„ ์‹ ๊ฒฝ์จ์„œ ์ง“๊ณ !

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ