https://nomadcoders.co/javascript-for-beginners/lobby
클론코딩 노마드코더 강의를 듣고 작성한 TIL 입니다.
TIL에 들어가기 앞서 나는 이 강의를 통해 DOM제어에 익숙해지고 싶었다.
DOM제어 정리를 TIL을 통해 정리하였지만, 실전에 적용해 보아야 한다는 생각이 들었다. 그러나 강의를 들을 수록 새롭게 알게 된 것들이 많아 TIL로 기록하려 한다.
👉🏻 실시간 시계 나타내기
const clock = document.querySelector("#clock");
function getClock(){
const time = new Date();
const hours = String(time.getHours()).padStart(2,"0");
const minutes = String(time.getMinutes()).padStart(2,"0");
const seconds = String(time.getSeconds()).padStart(2,"0");
clock.innerText = `${hours} : ${minutes} : ${seconds}`
}
getClock();
setInterval(getClock,1000);✍🏻 new Date()
현재 날짜와 시간을 가져오는 내장 함수이다.
참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
시간만을 가져오기 위해 getHours()
분만을 가져오기 위해 getMinutes()
초만을 가져오기 위해 getSeconds()
✍🏻 padStart()
str.padStart(targetLength [, padString])
문자열을 목표한 길이에 미달되면 목표한 길이만큼 설정한 값으로 채워 반환시켜준다.
✍🏻 setInterval()
setInterval(func|code, [delay], [arg1], [arg2], ...)
setTimeout과 비슷한 개념으로 일정 시간 간격을 두고 함수를 실행한다
👉🏻 로그인한 이름, Todo-list localStorage에 저장하여 보여주기
브라우져를 새로고침해도 로그인 한 사용자의 이름과 사용자가 저장한 Todo-list를 보여주기위해서는 localStorage에 데이터를 저장한다.
localStorage.setItem(USERNAME_KEY,username);
현재 도메인의 localStorage 객체에 접근한 후, Storage.setItem() 을 사용해 항목 하나를 추가한다.
const username = localStorage.getItem(USERNAME_KEY);
위에서 추가한 localStorage 항목을 읽는 법
개발자 도구에서 localStorage를 확인 할 수 있다.
👉🏻 새로고침 막아주기
function onToDoSubmit (event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
printToDo(newTodo);
}a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나,
창이 새로고침하여 실행된다.
preventDefault 를 통해 이러한 동작을 막아줄 수 있다.
👉🏻 이미지 랜덤으로 나타내기
const imgs = ["img0.jpg","img1.jpg","img2.jpg"];
const randomImg = imgs[Math.floor(Math.random() * imgs.length)];
const bgImg = document.createElement("img");
bgImg.src = `images/${randomImg}`;
document.body.appendChild(bgImg);✅ Math객체
Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다.
✍🏻 Math.random()
Math.random() 메소드는 0보다 크거나 같고 1보다 작은 무작위 숫자를 반환한다. (0 ~ 1사이의 값을 무작위로 반환)
✍🏻 Math.floor()
Math.floor() 메소드는 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환 (내림, 주어진 수 이하의 가장 큰 정수, 소수점 이하의 수 버림)
✅ DOM 제어
✍🏻 document.createElement("html tag")
js를 통해 html 태그를 생성한다.
()안에는 html태그가 들어간다.
✍🏻 body.appendChild();
createElement를 통해 만든 html태그를 body 제일 마지막에 추가해 준다.
appendChild() <-> prependChild() 이다.
210711 update
👉🏻 ToDoList
✅ event.target
function deleteToDo(event){
const li = event.target.parentElement; // 삭제하고 싶은 li
li.remove();
}target은 내가 클릭한(이벤트가 일어난) 태그를 알려준다. ul>li와 같은 마크업에서 li안에 있는 button을 클릭했을때, 어느 li를 클릭했는지 알 수 없다.
이를 알려주는 것이 target이다. 그 target의 부모를 삭제해줘야 하니까, parentElement를 사용하여 부모의 태그를 삭제해준다.
✅ todo를 배열의 형태로 localstorage에 저장하기
localstorage에 저장되는 데이터 형태는 string만 가능하다.
todo를 배열로 만들었던 것을 ""를 붙여 string으로 만들어준다.
이러한 기능을 해주는 것이 JSON.stringify(toDos)
function saveToDos(){
localStorage.setItem("todos",JSON.stringify(toDos)); // 배열을 텍스트로 바꿔줌 ([] => "[]")
}반대로 string를 배열로 만들어 주는것이 JSON.parse(savedToDos);
const savedToDos = localStorage.getItem("todos");
if(savedToDos) { // 만약에 savedToDos가 Null이 아니면
const parsedToDos = JSON.parse(savedToDos); // 문자열을 배열로 바꿔줌
toDos = parsedToDos;
parsedToDos.forEach(paintToDo);
}✅ todo 추가 시, localstorage를 업데이트 하기 (기존 todo유지하며)
todo를 입력하고 새로고침 한 뒤, 다시 todo를 입력하면 localstorage가 초기화 되는 현상이 발생했다.
기존에 const로 선언했던 toDos를
const toDos = [];업데이트를 할 수 있도록 let으로 바꾸고
let toDos = [];getItem을 통해 가져왔던 localstorage value값을 조건문을 걸어주었다
만약에 savedToDos가 null이 아니면,
배열의 시작값에 이전 배열값을 넣고 시작하는 것이다
const savedToDos = localStorage.getItem("todos");
if(savedToDos) { // 만약에 savedToDos가 Null이 아니면
const parsedToDos = JSON.parse(savedToDos); // 문자열을 배열로 바꿔줌
toDos = parsedToDos // 배열 시작값을 이전의 배열(값)을 넣고 시작하기
parsedToDos.forEach(paintToDo);
}✅ todo localstorage에서 삭제하기
위에서 target을 통해 클릭한 li을 알아내어 삭제 해 주었다.
그런데, todo를 배열로 받아 localstorage에 저장했기 때문에 화면에서는 li가 사라졌을지 몰라도 localstorage에는 그대로 데이터가 남아있다.
li에 id값을 주어 해당 li를 찾아 내기 위해,
newToDo를 객체로 만들어준다
function handleToDoSubmit(event){
event.preventDefault();
const newTodo = {
text : toDoInput.value,
id : Date.now()
}
toDoInput.value = "";
toDos.push(newTodo);
paintToDo(newTodo);
saveToDos();
}function deleteToDo(event){
event.preventDefault();
const li = event.target.parentElement; // 삭제하고 싶은 btn의 부모태그(li)
li.remove();
toDos = toDos.filter((todo)=> todo.id !== parseInt(li.id)); // 배열에서 삭제 , li의 id는 문자열이니까 parseInt를 통해 Number로 바꿔줌
saveToDos(); // 바뀐 배열을 다시 저장을 해줌
}filter을 통해 true값만을 모아 다시 배열을 만들어주고, 그 배열을 saveToDos로 다시 저장을 해준다. (filter메서드 참고)
