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.6 Deleting To Dos part One) 이번엔 ToDo를 삭제하면 localStorage에 반영되도록 만들어보기전에 먼저 ToDo들이 id와 text 두가지를 갖는 object의 형태로 변경해보도록 하자. toDos array안에 object들이 각자 id가 부여된다면 좀 더 제어하기 편할것이다.[{id:12345, text:"anything}] 이러한 형태로 만들기 위해서는 랜덤한 ID가 필요하다. 랜덤 ID를 만드는 방법은 바로Date.now()를 사용하는 것이다. 정말 랜덤한 숫자가 부여되는 것은 아니고 현재시간을 밀리초로 반환하는 함수를 사용하는 것이다. 거의 랜덤처럼 보이기 때문에(?) 아주 좋다. element가 만들어..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기 (7.5 Loading To Dos part Two) 지난 포스팅에 이어 TO DO LIST를 localstorage에 저장하는 방법에 대해 계속 이어나가보겠다. if(savedToDos !== null) { const parsedToDos = JSON.parse(savedToDos); parsedToDos.forEach((item) => console.log("this is the turn of", item)); } 예시로 작성하였던 마지막 줄의 코드는 쉽게 변경 가능하다. forEach(item) 여기의 item은 결국 newToDO이다. ex) a, b, c, d 그렇기 때문에 간단하게 paintToDo 함수를 호출해주기만 하면 된다. if..

[ 노마드코더 학습 기록 ] 바닐라 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..