I'm gonna be the BEST.

[ 노마드코더 학습 기록 ] 바닐라 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로 크롬 앱 만들기(4.7 Super Recap) 그동안 작성했던 코드들을 좀 더 고쳐보도록 하자. function paintGreetings(username) { greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME); } 생각해보면 paintGreetings 함수는 따로 인자를 받을 필요가 없다. if (savedUsername === null) { // show the form loginForm.classList.remove(HIDDEN_CLASSNAME); loginForm.addEventListener("submit", onLoginSubmit); } else..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.6 Loading Username) 이번 시간에는 form을 보여주기 전에, addEventListener를 하기 전에 local storage가 비어있으면 form부터 보여주면서 지금까지 해왔던 대로 프로그램이 진행되고(이전 포스팅 참고) local storage에 유저 정보가 있으면 form을 보여주지 않고 h1을 보여주는 프로그램을 만들어보도록 하자! 그럼 먼저 local storage에 유저 정보가 있는지 없는지 확인해야 할 것이다. const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form inp..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.4 Getting Username) 이번에는 User가 이름을 제출하면 form을 없애보자. 이걸 구현하기 위한 방법들이 있다. 1. HTML 요소 자체를 없애기 2. CSS를 이용하여 숨기기 2번 방법을 이용해서 없애보자. .hidden { display: none; } CSS파일에 hidden이라는 classname을 만들어준다. display: none을 준다. 이게 끝. 이제 어떤 요소에게 이 clssnames을 주면 그 요소는 숨겨진다. Log In html의 form에 class="hidden"을 추가했더니 요소들이 사라져 흰 화면만 표시되는 것을 볼 수 있다. 하지만 우리는 User가 이름을 제출한 뒤 사라지는 것을 원하기 때문에..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.2 Events) 지난 강의를 통해 form을 배웠고 그로인해 이제 button이 필요하지 않다는 것을 알았다. form의 submit에 대해 알아보도록 하자. 먼저 submint이라는 event가 발생하는 걸 아에 막거나 중간에 개입해서 submit event가 발생했다는 걸 파악하고 싶다. const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); function onLoginSunmit() { const username = loginInput.value; console.log(user..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.1 Form Submission) 이번엔 username에 대한 유효성 검사를 할 것이다. username은 공백일 수 없고 너무 긴 이름이어도 안된다고 정하자. const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnClick() { const username = loginInput.value; if (username === "") { alert("Please write your name"); } else if (username.le..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.0 Input Values) Log In 먼저 HTML을 작성한다. div id를 지정해주고 (class도 상관없음) input과 button을 만들어준다. const loginForm = document.getElementById("login-form"); // or querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); 이제 JS.app으로 넘어가 input과 button을 찾아보자! ducument 메서드를 통해 HTML에 접근하고 getElemen..