[Vanila JS로 크롬 앱 만들기] Section 3

querySelector 사용할 때는 대상이 id 인지 명확히 해줘야 한다 → querySelector("#login-form")

왜냐면 classname, tagname 모두 검색 가능하기 때문에

<div id="login-form">
    <input type="text" placeholder="What is your name?" />
    <button>Log In</button>
</div>

 

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick() {
  console.log(loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

 

 

 

input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 한다

form 안에서 엔터를 누르고 input이 더 존재하지 않는다면 자동으로 submit 되거나 form 안에 있는 버튼을 눌렀을 때도 자동으로 submit

submit될 때마다 페이지 새로고침

 

모든 EventListener function의 첫 번째 argument는 항상 지금 막 벌어진 일들에 대한 정보가 될 것이다

preventDefault()는 어떤 event의 기본 행동이든지 발생되지 않도록 막는다

기본 행동은 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작

 

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event) {
  event.preventDefault();
  console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

object는 preventDefault 함수를 기본적으로 갖고 있다

preventDefault 함수는 EventListener 함수의 첫 번째 argument 안에 있는 함수

첫 argument를 담아 함수를 호출하는데 이 argument가 기본 정보들을 제공하고 있다

ex) 누가 submit 주체인지, 몇 시에 submit 했는지

 

링크의 기본 동작은 클릭 시 다른 페이지로 이동하는 것

 

function handleLinkClick(event) {
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

 

 

중요한 addEventListener 안에 있는 함수는 직접 실행하지 않는다는 것!

이건 브라우저가 해주는 것이고 실행만 시켜주는 게 아니라 event에 대한 정보도 담아준다

우리는 자리만 만들어주면 되고 이 정보 안에는 몇 가지 함수도 같이 들어있을 것이다

 

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add("hidden");
  console.log(username);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

 

<form id="login-form">
    <input
      required
      maxlength="15"
      type="text"
      placeholder="What is your name?"
    />
    <button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>

 

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  greeting.innerText = "Hello " + username;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

 

 

 

 greeting.innerText = "Hello " + username;
 greeting.innerText = `Hello ${username}`;

 

↑ 둘 다 똑같은 동작

아래 방법의 규칙

1. 변수와 string을 결합하고 싶다거나 변수를 string 안에 집어넣고 싶다면 ${변수명} 이렇게 하면 된다
2. ` ` 이 백틱 기호를 사용해야 한다

 

local storage는 우리가 브라우저에 뭔가를 저장할 수 있게 해준다

setItem을 활용하면 local storage에 정보 저장 가능 → localStorage.setItem(key, value)

getItem(key) 키에 해당하는 저장해둔 값을 불러오기

removeItem(key) 키에 해당하는 값 삭제

  localStorage.setItem("username", username);

 

 

생성한 string을 반복해서 사용하게 될 경우에는 대문자 변수로 저장해놓는 게 좋다

local storage에 없는 정보 불러오려고 하면 null 값 받는다

local storage에서 유저 정보의 유무 확인

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username);
  paintGreetings(username)
}

function paintGreetings(username){
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings(savedUsername)
}

 

 

로컬 스토리지에 정보가 있을 때

 

로컬 스토리지에 정보가 없을 때