바닐라 JS로 크롬앱 만들기 #4.3~#4.7

#4.3 Events

 

이전것의 복습

 

#4.4 Getting Username

 

이번 강의에서는 

log in 버튼으로 submit하면

input 기능이 없어지게 만들기를 원한다. 

 

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

 

classList.add와 classList.remove를 사용한다.

css파일에 

.hidden{
    display : none;
}

 

 

를 넣는다. 그렇게 되면 

hidden클래스가 추가 될 때 보이지 않게 되는 것이다. 

vaiable과 string을 합치는 다른 방법이 있다. 

그건 바로 백틱 `` 을 사용하는 방법. `(원하는 string) ${variable}`

#4.5 Saving Username

 

입력받은 user의 이름 기억하기

 

사용하려면 API의 local storage를 사용하는 것이다. 

console창에서 보려면 application탭에서 local storage를 보면 알 수 있다.

local storage 말고도 다른것이 보이는데 그것보다 이것이 제일 사용하기 쉽다. 

 

먼저 console창에서 제어하는 방법은 이렇다. 

localStorage.setItem("username", "Jana")

이후에 application탭에서 local storage에 보면 username이 Jana로 입력된 것을 알 수 있다. 

 

console창에서 불러오려면 

localStorage.getItem("username")

이라고 하면 저장된 value가 뜨게 된다. 

 

삭제하려면 

localStorage.removeItem("username")

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

#4.6 Loading Username

 

local storage에 사용자가 input에 입력한 사용자 이름을 저장하기 위해 다음과 같이 한다. 

 

get Item(입력한 값)을 사용한다. 

 

const savedUsername = localStorage.getItem(USERNAME_KEY);

사용자 이름을 넣었을 때 login form이 

함수function을 사용하기 위해 savedUsername이란 변수를 선언한다. 

 

 

로그인 한 후에 input창을 보이지 않게 하기 위해

또한 로그인 한 후에는 greeting화면이 보이게 하기 위해 

form태그와 h1태그에 hidden 클래스를 부여한다.

 

 

if (savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);    
}

 

 

#4.7 Super Recap