์ง๊ธ๊น์ง ์์ฑ๋ ์ฝ๋๋ฅผ ํตํด, momentum์๋ ์๊ณ, Local Storage์ currentUser์ ํ์ธํ์ฌ ์๋ ๊ฒฝ์ฐ input์ผ๋ก ์ฌ์ฉ์์ ์ด๋ฆ์ ํ์ธํ๊ณ , ์๋ ๊ฒฝ์ฐ Hello, ${currentUser}!
์ ์ถ๋ ฅํ๋๋ก ํ์๋ค.
์ด momentum์ ์ถ๊ฐ์ ์ผ๋ก To Do List๋ฅผ ๋ง๋ค์ด ๋ณด๋๋ก ํ๊ฒ ๋ค.
๊ฐ์ฅ ๋จผ์ ํ๋ ๊ฒ์ ์ญ์๋ 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์ด ์คํ๋๋๋ก ํ์๋ค.
init()
์ด ์คํ๋ ์งํ ์คํ๋๋ loadToDos()
์์๋ ์์ ์ ์ํ TODOS_LS
๋ฅผ const toDos = localStorage.getItem(TODOS_LS);
๋ฅผ ํตํด "toDos"๋ฅผ ๋ถ๋ฌ์ค๋๋ก ํ์๋ค. Local Storage ์ ์ฅ์ ํตํด ์๋ก๊ณ ์นจ๋์ด๋ ๊ณ์ ์ฌ์ฉ์๊ฐ ์์ฑํ To Do List๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฒ์ ๋ค์ TIL์์ ๋ค๋ฃจ๋๋ก ํ๊ฒ ๋ค.
์ฌ์ฉ์๊ฐ input์ To Do List๋ฅผ ์
๋ ฅํ ํ Enter
๋ฅผ ์
๋ ฅํ์ฌ submit์ด ๋ฐ์ํ ๊ฒฝ์ฐ, handleSubmit()
์ด ์คํ๋๋๋ก eventlistener๋ฅผ ์ค์ ํด๋์๋๋ฐ, ์ด ํจ์์์๋ ๋ค์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ด ํ์ํ๋ค.
event.preventDefault()
๋ก ๋ฐฉ์ง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()์ด ์๊ธฐ ๋๋ฌธ์ ์ง์ ๋น์์ค์ผํจ
}
๊ทธ๋ ๋ค๋ฉด, 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()
๋ฅผ ์ด์ฉํ์ฌ ์ถ๊ฐํด์ฃผ์๋ค.
์ด ์ํ๋ก ์คํ์ ํด๋ณด๋ฉด,,๋ค์๊ณผ ๊ฐ์ด โ๊ฐ ์ ์์ ์ผ๋ก ์ถ๋ ฅ๋์ง ์์์ ์ ์ ์๋ค. ์ด๋ป๊ฒ ํด๊ฒฐํด์ผํ ๊น?
vscode์์ txtํ์ผ์ ์ฝ์ด์ค๊ฑฐ๋, rstudio์์ ํ๊ธ ์ฃผ์์ด ์
๋ ฅ๋ ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ์ ์ด๋ํ ๋, โ๏ฟฝ๋ช
๋/ๆจโฆ๋ดฝโ ๊ฐ์ ํํ๋ก ํ๊ธ์ด ์ ์์ ์ผ๋ก ์ด๋๋์ง ์์๋ ๊ฒฝํ์ ํด๋ณธ ์ ์ด ์์ ๊ฒ์ด๋ค. ๊ทธ๋ฐ ๊ฒฝ์ฐ ๊ฐ๊ฐ์ ํด๊ฒฐ๋ฐฉ๋ฒ์ด ๋ค๋ฅด์ง๋ง, ๋ณธ์ง์ ์ผ๋ก ๋ฌธ์ ๊ฐ ๋๋ ๋ถ๋ถ์ ๋ณดํต ์ธ์ฝ๋ฉ ๋ฐฉ์์ ์ฐจ์ด๊ฐ ์๋ ๊ฒ์ธ๋ฐ, html์์ ํด๋น ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ ๊ฒฝ์ฐ <meta charset="UTF-8">
์ ์ฝ์
ํด์ค์ผ๋ก์ ๊ฐ๋จํ ํด๊ฒฐํ ์ ์๋ค.
์ดํ ์ ์์ ์ผ๋ก ์ถ๋ ฅ๋จ์ ์ ์ ์๋ค!