I'm gonna be the BEST.

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기 (7.7 Deleting To Dos part Two ~ 7.8 Deleting To Dos part Three) 이제 본격적으로 ToDo를 삭제하는 작업을 진행해보도록 하자. Filter 함수를 이용하여 삭제 기능을 만들어볼텐데 만약 array에서 무언가를 삭제하려고 한다면 item이 실제로 삭제되는 것이 아니라 지우고 싶은 item을 뺀 새로운 array를 만들어내는 것이 실제로 일어나는 일이다. = item을 삭제하는 것이 아니라 해당 item을 제외한 새로운 array를 만드는것. 먼저 Filter 함수에 대해 알아보겠다. filter는 testFilter에 1, 2, 3, 4, 5를 넣어서 호출한다. 만약 새 array에서 이 objec..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기 (7.3 Saving To Dos ~ 7.4 Loading To Dos part Two ) 지금 크롬앱은 새로고침을 하면 작성했던 TO DO LIST가 전부 사라진다. 이번엔 작성한 TO DO LIST를 저장하는 기능을 구현해보도록 하자 ! 브라우저에 어떻게 저장할 수 있을까? 이미 로그인 기능을 구현할 때 해보았다. 바로 localStorage를 이용하는 방법 ! 시작🦩 const toDos = []; 먼저 todo를 저장해 줄 array를 만든다. function handleToDoSubmit(event) { event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기 (7.2 Deleting To Dos ) 현재까지 웹사이트는 ToDo를 추가할수만 있다. 이번엔 삭제할 수 있는 기능을 만들어보자. 먼저 삭제 버튼을 만들어줄텐데 li에 입력한 ToDo가 append되기전에 X 버튼을 만들어주자 function paintToDo(newToDo) { const li = document.createElement("li"); const span = document.createElement("span"); span.innerText = newToDo; const button = document.createElement("button"); button.innerText = "❌"; li.appendChild(span); ..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기 (7.0 Setup ~ 7.1 Adding ToDos) 바로 시작! tool.js 파일을 만들고 html에서 import 할 수 있도록 연결해주고 form과 input 태그로 todo를 적을 수 있는 작성칸을 만들어줬다. 실행하면 작성가능한 form이 만들어졌다. 을 추가하여 todo list가 담길공간을 만들어주는데 js로 li를 추가할 것이기 때문에 일단 ul만 만들고 넘어간다. const toDoForm =document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { event..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(6.1 Background) momentum 크롬앱은 배경화면이 랜덤으로 바뀐다. 랜던 배경화면을 만들어보자 ! 먼저 JS 폴더안에 background.js 파일을 만들어주고 html에서 import 시켜준다. 그리고 img폴더 생성 뒤 원하는 이미지를 넣어준다. 이러면 준비는 끝났다. 랜덤 배경화면 작업은 랜덤 명언과 작업과 거의 같다고 볼 수 있다. const images = ["0.png", "1.jpeg", "2.jpg", "3.png", "4.jepg"]; const chosenImage = images[Math.floor(Math.random() * images.length)]; console.log(chosenImage); 먼저 im..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(6.0 Quotes) momentum 크롬앱에는 랜덤으로 명언과 배경화면이 나온다. 이번엔 랜덤 명언을 구현해보도록 하자 js 파일을 새로 만들고 명언이 들어있는 Array를 생성한다. 먼저 잊지말고 index.html에서도 js파일을 import 할 수 있도록 연결해준다. 그리고 와 태그를 이용해 랜덤 명언이 생성될 자리를 만들어준다. div id는 quote로 하고 span은 명언과 작가가 들어갈 수 있게 2개를 만든다. document.querySelector로 id가 quote인 element의 첫번째 span과 마지막 span을 가져오면 설정은 끝난다. (실행 후 console에 error 표시가 없다면 잘되어가고 있다.) randomn..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(5.2 PadStart) 지난 시간에 시계를 만들어보았는데 잘 잘동되지만 0~9까지의 숫자가 00, 01, 02 같은 두자리로 표시되지 않고 한자리로 표시되는 불편함이 생겼다. 해결해보자! padStart & padEnd padStart는 너무 편리하고 간단하고 강력한 기능인 것 같다. 바로 예시로 넘어가보자. "1"은 현재 길이가 1이다. 이 string(문자열)의 길이를 2로 만들고, 만약 string(문자열)의 길이가 2가 아니라면 앞자리에 "0"을 채워라 ! 라는 것을 이렇게 "1".padStart(2, "0") 작성하면 된다. string의 길이를 5로 변경하면 1 앞에 0이 4개가 붙어 총 5개의 문자열로 변환하는 것을 볼 수 있다. ..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(5.1 Timeouts and Dates) function sayHello() { console.log('hello'); } sayHello(); Javascript는 sayHello(); 라인을 보자마자 Function을 실행시킨다. 하지만 내가 만들 프로그램은 Function이 5초뒤에 실행되어야 한다면 어떻게 해야할까? 이럴 땐 timeouts을 이용할 수 있다. timeouts setTimeout은 setInterval과 비슷하게 생겼지만 동작은 완전히 다르다. function sayHello() { console.log('hello'); } setTimeout(sayHello, 5000); setTimeout은 두 개의 argument를..