[JS] local storage를 이용한 user login 최종 복습

[ 노마드코더 학습 기록 ]

바닐라 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 {
    // show the greetins
    paintGreetings(savedUsername);
};

해당 부분에서도 paintGreetings에 따로 인자를 받을 필요가 없다.

왜냐하면 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);
    localStorage.setItem(USERNAME_KEY, loginInput.value);  //유저의 이름을 저장함.
    paintGreetings();  //저장하자마자 함수호출
} 

function paintGreetings() {
    const username = localStorage.getItem(USERNAME_KEY); //호출하자마자 유저를 찾음.
    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();
};

paintGreetings 함수를 호출할 때 적어놨던 인자들을 지워주고

onLoginSubmit 함수 안에 username 변수도 지워준다.

 

paintGreetings 함수안에 username이라는 변수를 만들어주고

local storage에 있는 username을 찾도록 작성한다.

 

우리가 여기서 하는 일은 유저의 이름을 저장하고 저장하자마자 paintGreetings 함수를 호출하고

호출하자마자 유저를 찾는 것이다.

 

이렇게 실행시키면 똑같이 작동하고 있지만 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);
};

이것이 고치기 전의 코드인데 니코쌤은 이 코드로 할 것이라고 한다.

왜냐하면 local storage를 두 번 열어볼 필요가 없다고 생각하시기 때문!

 

그렇다면 나도 그렇게 한닿ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ