노마드 코더님의 자바스크립트 강의를 보고 정리한 글입니다.
index.html
- 이모지를 제대로 출력하기 위해서 인코딩 설정
<meta charset="utf-8" />
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList">
</ul>
<script src="clock.js"></script>
<script src="greeting.js"></script>
<script src="todo.js"></script>
</body>
</html>todo.js
- 자바스크립트를 이용해서 새로운 태그를 만들고 가공해서 index.html의 특정 태그의 자식 태그로 삽입.
- push 메소드를 사용하여 Array에 특정 요소를 넣음.
- 특정 태그의 id 속성을 자바스크립트를 이용해 설정.
- local storage에는 자바스크립트의 데이터 형식으로 저장할 수 없기 때문에, string으로 저장해야 한다.
- JSON : JavaScript Object Notation의 약어.
- JSON.pares() 함수를 이용해서 JSON 형태의 데이터를 자바스크립트 Object 형태로 변형.
- forEach : array에 담겨 있는 것들에 각각 한 번씩 함수를 실행함.
- 즉, forEach는 array를 위한 함수임.
- 이와 비슷하게 filter 함수도 있음.
- 이 함수는 array를 통해 모든 요소의 함수를 설정할 수 있고, 값이 true인 것들만 가지고 새로운 array를 만들어 반환한다.
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const TODOS_LS = "toDos";
let toDos = [];
function deleteToDo(event){
// console.dir(event.target) // 이 방법으로 event.target의 부모 노드를 확인할 수 있음.
// event.target.parentNode // event.target.parentNode는 여러 개의 버튼 중 어느 버튼이 클릭됐는지 알려준다. 정확히는, 클릭된 버튼 태드의 부모 태그를 불러온다.
const btn = event.target; // 클릭된 버튼을 할당.
const li = btn.parentNode; // 그리고 그 부모 태그(li)를 할당.
toDoList.removeChild(li); // 해당 태그를 지움.
// filter 함수는 array의 모든 요소들에 함수를 실행하고, 값이 true인 것들만 가지고 새로운 array를 만들어 반환함.
const cleanToDos = toDos.filter(function(toDo){
return toDo.id !== parseInt(li.id);
});
toDos = cleanToDos;
saveToDos();
}
// to-do-list를 local storage에 저장하는 함수
function saveToDos(){
localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); // JSON.stringify 함수를 사용해 자바스크립트 objectfmf string으로 바꿔준다.
}
function paintToDo(text){
const li = document.createElement("li"); // li 태그를 만들어서 변수에 할당
const delBtn = document.createElement("button"); // button 태그를 만들어서 변수에 할당
const span = document.createElement("span"); // span 태그를 만들어서 변수에 할당
const newId = toDos.length + 1
delBtn.innerText = "X"; // 버튼의 텍스트는 "X"로 설정
delBtn.addEventListener("click", deleteToDo);
span.innerText = text; // 사용자가 입력한 텍스트가 span태그의 텍스트가 되도록 설정
li.appendChild(delBtn); // li 태그의 자식 태그로 버튼을 삽입
li.appendChild(span); // li 태그의 자식 태그로 span 태그 삽입
li.id = newId; // li태그의 id 속성을 object의 id와 같게 함.
toDoList.appendChild(li); // 위에서 설정한 li 태그들을 최종적으로 toDoList에 삽입.
const toDoObj = {
text : text,
id : newId
};
toDos.push(toDoObj); // toDos라는 Array 안에 toDoObj 객체를 넣음.
saveToDos();
}
function handleSubmit(event){
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value = ""; // 텍스트를 입력하고 엔터를 치면 사라지게 하기
}
function loadToDos(){
const loadedToDos = localStorage.getItem(TODOS_LS); // 로컬스토리지에서 키가 TODOS_LS인 값을 가져오기
if (loadedToDos !== null){
const parsedToDos = JSON.parse(loadedToDos); // JSON을 자바스크립트가 이해할 수 있는 object 데이터 형식으로 변형
parsedToDos.forEach(function(toDo){
paintToDo(toDo.text);
})
}
}
function init(){
loadToDos();
toDoForm.addEventListener("submit", handleSubmit);
}
init();```
모빌리티 스타트업에서 데이터를 다루고 있습니다.
감사합니다