2/15 바닐라 JS 크롬앱 만들기 Loading Username

---

이제 할일은 localStorage에 유저정보 유무를 확인할것이다! 

그러면 어떻게 유저정보 유무를 확인 할 수 있을까?? 

localStorage.getItem("username")  만약에 username이 없으면 null값으로 결과를 받는다! 

const savedUsername = localStorage.getItem("username");

console.log(savedUsername);

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

const link = document.querySelector("a");

const HIDDEN_CLASSNAME = "hidden";

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

}


loginForm.addEventListener("submit" , onLoginSubmit)


const savedUsername = localStorage.getItem("username");

console.log(savedUsername);

if(savedUsername === null) {
  // show the form

}else {
  //show the greetings
}

여기 처럼 string을 반복해서 사용하는 경우에는 전처럼 변수로 고정시킬수 있다. 

string 오타는 자바스크립트가 지적을 하지 않지만 변수명이 오타가 나면 JS가 말해준다! 

const savedUsername = localStorage.getItem("USERNAME_KEY");

console.log(savedUsername);

if(savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit" , onLoginSubmit)

}else {
  //show the greetings
  greeting.innerText = `Hello ${savedUsername}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

이것을 통해 localStorage에 아무것도 없으면 form 이 드러나고 데이터를입력하는 순간

h1에 있던 hidden 속성이 사라지고 Hello + input입력 이름이 드러나게 됩니다! 

그리고 입력된 정보는 local storage에 저장됩니다. 

 

문제점은 똑같은 동작을 두번 반복하고 있는것들이 많다 그래서 이것들을 함수로 만들 생각이다.

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

const link = document.querySelector("a");

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);
  greeting.innerText ="Hello " + username;
  paintGreetings(username);

}


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

const savedUsername = localStorage.getItem("USERNAME_KEY");

console.log(savedUsername);

if(savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit" , onLoginSubmit)

}else {
  //show the greetings
  paintGreetings(savedUsername);
}

paintGreetings 라는 함수를 정의 할땐 매개변수와 사용한 매개변수를 동일하게 해줘야한다 예를들면

function add(a,b) {

return a+b;

} 와 동일하다고보면된다. 

 

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

 

---

전체적으로 복습을 하자면 우리가 만든 웹사이트네는 2개의 HTML 요소가 있다.

하나는 form이고 하나는 h1이다. 

form 안에는 input이 있고 h1은 비어있다. 

이 둘은 hidden이라는 class를 가지고 있다.  CSS를 보면 .hidden이 있는데 이 class의 역할은 display: none 즉 요소를 숨기는것이다. 

자바스크립트를 불러오기 전부터 이 두 요소는 숨겨져 있다. 

자바스크립트가 

const savedUsername = localStorage.getItem("USERNAME_KEY"); 는 localstorage 정보의 유무를 확인해서 없으면 null or value가 savedUsername에 들어갈것이라는걸 알게된다.

 

savedUsername이 null 이면 loginForm으로부터 HIDDEN_CLASSNAME을 제거할것이다!

(const HIDDEN_CLASSNAME = "hidden";)

그러면 당연히 form이 표시될것이다. 

 

 loginForm.addEventListener("submit" , onLoginSubmit)

그 다음 일은 loginForm에 addEventListener를 더하고 , Submit을 기다린다. 그리고 submit 이벤트가 발생하면 onLoginSubmit함수가 실행될것이다. 

 

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem("USERNAME_KEY" ,username);
  greeting.innerText ="Hello " + username;
  paintGreetings(username);

}

우리는 event가 가지고 있는 기본동작을 맞아줄거고 그동작은 새로고침이다. 그리고 두번째로는 form을 다시 숨기고 세번째로는 loginInput.value를 username에 저장할것이다. 

그리고 username 값을 USERNAME_KEY와 함꼐 localStorage에 저장 할것이다. 

5번쨰로는 paintGreetings함수를 호출할것이다! 

paintGreetings 함수는 하나의 인자를 받고 있다.  지금 같은 경우에는 유저가 form안에 있는 input에 입력한 유저명을 받고 있다. 

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

이 함수는 username이라는 인자를 하나 받고 있고 이 함수가 하는 일은 비어 있는 h1요소 안에 `Hello $(username}`이라는 텍스트를 추가해준다 

그리고 h1요소로부터 hidden 클래스를 삭제할것이다. 

 

local Storage에 뭔가를 저장하면 paintGreetings를 호출하는 순간에  그 유저 정보는 이미 local storage에 저장되어 있을것이다.