Today I Learned #6

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

Javascript

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

createElement(), appendChild()๋ฅผ ํ™œ์šฉํ•ด To Do List ๋งŒ๋“ค๊ธฐ

์ง€๊ธˆ๊นŒ์ง€ ์™„์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด, momentum์—๋Š” ์‹œ๊ณ„, Local Storage์— currentUser์„ ํ™•์ธํ•˜์—ฌ ์—†๋Š” ๊ฒฝ์šฐ input์œผ๋กœ ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์„ ํ™•์ธํ•˜๊ณ , ์žˆ๋Š” ๊ฒฝ์šฐ Hello, ${currentUser}!์„ ์ถœ๋ ฅํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

์ด momentum์— ์ถ”๊ฐ€์ ์œผ๋กœ To Do List๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

Divide & Conquer

๊ฐ€์žฅ ๋จผ์ € ํ•˜๋Š” ๊ฒƒ์€ ์—ญ์‹œ๋‚˜ Divide, index.html์— <script src="todo.js"></script>๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๊ณ  todo.js๋ฅผ ์ƒ์„ฑํ•ด์ฃผ์—ˆ๋‹ค.

๋˜ํ•œ html ํŒŒ์ผ๋‚ด์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ todo.js์—์„œ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€๋‹ค.

<form class="js-toDoForm">
	<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList"></ul>

์œ„ ์ฝ”๋“œ๋ฅผ todo.js์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos"; // ์˜คํƒ€ ๋ฐฉ์ง€๋ฅผ ์œ„ํ•ด ์„ ์–ธ.

์ƒ์„ฑ๋œ todo.js์—๋Š” init() function์„ ์„ ์–ธ ํ›„ ๊ฐ€์žฅ ๋จผ์ € ์‹คํ–‰๋˜๋„๋ก ํ•˜์˜€๊ณ , ๋‚ด๋ถ€์—๋Š” loadToDos()๋ฅผ ์‹คํ–‰ํ•˜๋„๋กํ•˜๊ณ , toDoForm.addEventListener("submit",handleSubmit)์„ ํ†ตํ•ด toDoForm์—์„œ submit์ด ๋ฐœ์ƒํ•  ๊ฒฝ์šฐ handleSubmit์ด ์‹คํ–‰๋˜๋„๋ก ํ•˜์˜€๋‹ค.

loadToDos()

init()์ด ์‹คํ–‰๋œ ์งํ›„ ์‹คํ–‰๋˜๋Š” loadToDos()์—์„œ๋Š” ์•ž์„œ ์ •์˜ํ•œ TODOS_LS๋ฅผ const toDos = localStorage.getItem(TODOS_LS);๋ฅผ ํ†ตํ•ด "toDos"๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋„๋ก ํ•˜์˜€๋‹ค. Local Storage ์ €์žฅ์„ ํ†ตํ•ด ์ƒˆ๋กœ๊ณ ์นจ๋˜์–ด๋„ ๊ณ„์† ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•œ To Do List๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์€ ๋‹ค์Œ TIL์—์„œ ๋‹ค๋ฃจ๋„๋ก ํ•˜๊ฒ ๋‹ค.

handleSubmit()

์‚ฌ์šฉ์ž๊ฐ€ input์— To Do List๋ฅผ ์ž…๋ ฅํ•œ ํ›„ Enter๋ฅผ ์ž…๋ ฅํ•˜์—ฌ submit์ด ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ, handleSubmit()์ด ์‹คํ–‰๋˜๋„๋ก eventlistener๋ฅผ ์„ค์ •ํ•ด๋‘์—ˆ๋Š”๋ฐ, ์ด ํ•จ์ˆ˜์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•˜๋‹ค.

  • submit์˜ ํŠน์ง•์ธ page reload๋ฅผ event.preventDefault()๋กœ ๋ฐฉ์ง€
  • submit ๋‹น์‹œ์˜ input์˜ text๋ฅผ currentValue๋กœ ์ €์žฅ
  • ์ €์žฅ๋œ currentValue๋ฅผ To Do List์— ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด paintToDo(currentValue)๋ฅผ ์‹คํ–‰
  • event.preventDefault()๋กœ ์ธํ•ด ๋น„์›Œ์ง€์ง€ ์•Š์€ input์„ ๋น„์›Œ์ฃผ๊ธฐ

์ด ๋„ค๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ณ ์ž ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

function handleSubmit(event) {
    event.preventDefault();
    // ํŽ˜์ด์ง€ ๊ฐฑ์‹ ์„ ๋ง‰๊ธฐ ์œ„ํ•ด, cancelable ํ•œ ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = "";
    // ๊ธฐ์กด submit event๋Š” input์ด ๋ณด๋‚ด์ง„ ํ›„ ๋น„์›Œ์ง€์ง€๋งŒ,
    //preventDefault()์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง์ ‘ ๋น„์›Œ์ค˜์•ผํ•จ
}

paintToDo()

๊ทธ๋ ‡๋‹ค๋ฉด, submit์ด ๋ฐœ์ƒํ•œ ๋’ค์— handleSubmit()์„ ํ†ตํ•ด ์‹คํ–‰๋˜๋Š” paintToDo()๋Š” ์–ด๋–ป๊ฒŒ ์ง„ํ–‰๋˜์–ด์•ผํ• ๊นŒ?


function paintToDo(text) {
    console.log(text);
}

๋จผ์ €, ์ •์ƒ ์ž‘๋™์„ ์œ„ํ•˜์—ฌ console.log()๋ฅผ ํ†ตํ•ด ๋™์ž‘ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜์˜€๊ณ , submit์„ ํ•  ๋•Œ๋งˆ๋‹ค, input์˜ ๋‚ด์šฉ์ด ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•˜์˜€๋‹ค.

function paintToDo(text) {
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerText = "โŒ";
    const span = document.createElement("span");
    span.innerText = text
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
}

์ดํ›„์—๋Š” createElement("li")๊ณผ createElement("button")์„ ํ†ตํ•ด ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ๋งˆ๋‹ค <li>์™€ <button>์ด ์ƒ์„ฑ๋˜๋„๋ก ํ•˜์˜€๊ณ , ํ•ด๋‹น ๋ฒ„ํŠผ์€ "โŒ"๋ฅผ ํฌํ•จํ•˜๋„๋ก ํ•˜์˜€๋‹ค. ์ดํ›„, ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ <span>์„ ์ƒ์„ฑํ•˜์—ฌ currentValue๋กœ์„œ ๋ฐ›์•„์˜จ text๋ฅผ span์˜ ๋‚ด์šฉ์œผ๋กœ ์ง€์ •ํ•˜์˜€๊ณ , ๊ทธ ํ›„์—๋Š” <span>๊ณผ <button>์„ <li>์— ์ €์žฅํ•ด์คŒ์œผ๋กœ์„œ <li>์•ˆ์— ๋ชจ๋“  ๋‚ด์šฉ์ด ๋‹ด๊ธฐ๋„๋ก ํ•˜์˜€๊ณ , ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ toDoList๋กœ ์ •์˜๋œ <ul>์— appendChild()๋ฅผ ์ด์šฉํ•˜์—ฌ ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๋‹ค.

์ด ์ƒํƒœ๋กœ ์‹คํ–‰์„ ํ•ด๋ณด๋ฉด,,๋‹ค์Œ๊ณผ ๊ฐ™์ด โŒ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋˜์ง€ ์•Š์Œ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•ด์•ผํ• ๊นŒ?

meta charset

vscode์—์„œ txtํŒŒ์ผ์„ ์ฝ์–ด์˜ค๊ฑฐ๋‚˜, rstudio์—์„œ ํ•œ๊ธ€ ์ฃผ์„์ด ์ž…๋ ฅ๋œ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„ ์—ด๋žŒํ•  ๋•Œ, โ€˜๏ฟฝ๋ช…๋€›/ๆ€จโ‘ฆ๋ดฝโ€™ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ํ•œ๊ธ€์ด ์ •์ƒ์ ์œผ๋กœ ์—ด๋žŒ๋˜์ง€ ์•Š์•˜๋˜ ๊ฒฝํ—˜์„ ํ•ด๋ณธ ์ ์ด ์žˆ์„ ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ ๊ฒฝ์šฐ ๊ฐ๊ฐ์˜ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์ด ๋‹ค๋ฅด์ง€๋งŒ, ๋ณธ์งˆ์ ์œผ๋กœ ๋ฌธ์ œ๊ฐ€ ๋˜๋Š” ๋ถ€๋ถ„์€ ๋ณดํ†ต ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹์˜ ์ฐจ์ด๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ธ๋ฐ, html์—์„œ ํ•ด๋‹น ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ <meta charset="UTF-8">์„ ์‚ฝ์ž…ํ•ด์คŒ์œผ๋กœ์„œ ๊ฐ„๋‹จํžˆ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

์ดํ›„ ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋จ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค!

profile
CAU Business Administration

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