[TIL-45] 노마드코더 크롬앱(JS) 클론코딩 #4.4~#4.7

#4 로그인

getting username

• username 입력받고 나면 form 없애기
  
  1. html 요소 자체를 없앰.
  2. css를 통해 없앰.
     • .hidden {display: none;}
     • form에 submit event 발생 시 작동하는 함수에 hidden 클래스 추가하는 코드 작성.
• 표시할 텍스트(username)가 있으면 h1이 표시되게 하기
  • h1은 hidden 클래스 있어서 숨겨진 상태.
  • h1에 greeting 아이디 추가해서 JS에서 찾음.
    • 변수로 정의해둠. const greeting = document.querySelector("#greeting");
    • h1 안에 텍스트 입력. greeting.innerText = "Hello " + username;
  • hidden 클래스는 여러 번 사용되었으므로 변수로 지정.
    
    • const HIDDEN_CLASSNAME = "hidden";
    • "hidden"처럼 string만 포함된 변수는 대문자 표기. loginForm처럼 중요한 정보를 담은 게 아니기도 함.
• 문자열과 변수 하나로 합치기 : 변수를 string 사이에서 사용하는 법.
  1. "Hello " + username
     • 공백은 ""안에 포함하고, +로 연결함.
  2. `Hello ${username}`
     • ` `(백틱 기호)는 문자열 구간. 변수는 그 안에서 ${변수명}으로 표현하면 됨. 

 

saving username : 저장, 기억하기

• localStorage
  • 기억하는 기능은 많이 쓰이기 때문에 API 있음.
  • 이미 존재하고 있음. 브라우저에 뭔가를 저장할 수 있게 해줘서 필요할 때 가져다 쓸 수 있는 작은 DB.
  • 개발자 도구 > application 탭 > storage 안에 있음.
• local storage API
  • setItem : local storage에 정보 저장. localStorage.setItem("key", "value")
  • getItem : 저장된 값 불러옴. localStorage.getItem("key")
  • removeItem : 저장된 정보를 지움. localStorage.removeItem("key")

 

loading username

• 유저 정보가 없다면 form을 보여주고, 유저 정보가 있다면 form 표시되지 않고 바로 h1 띄우기
  
  • form과 h1 모두 hidden 상태로 시작하는 게 나음.
  • username 있는지 확인하는 법 : 저장된 username 없으면 localStorage.getItem("username") = null
    • 콘솔에서 localStorage.getItem("username") 확인해보면 null인 것 알 수 있음.
  • 변수 지정
    • const USERNAME_KEY = "username"
    • const savedUsername = localStorage.getItem(USERNAME_KEY)
  • if (savedUsername === null) {
      폼 보여주기
      loginForm.addEventListener("submit", onLoginSubmit);
    } else {
      폼 숨기고, 텍스트 넣은 h1 보여주기
    }
• 겹치는 부분을 함수로 만들자!
  • function onLoginSubmit(event) {
      const username = loginInput.value;
      localStorage.setItem("USERNAME_KEY", username);
      event.preventDefault();
      loginForm.classList.add(HIDDEN_CLASSNAME);
      greeting.innerText = `Hello ${username}`;
      greeting.classList.remove(HIDDEN_CLASSNAME);
    }
    if (savedUsername === null) {
      loginForm.classList.remove(HIDDEN_CLASSNAME);
      loginForm.addEventListener("submit", onLoginSubmit);
    } else {
      greeting.innerText = `Hello ${savedUsername}`;
      greeting.classList.remove(HIDDEN_CLASSNAME);
    }
  • function paintGreeting(username) {
      greeting.innerText = `Hello ${username}`;
      greeting.classList.remove(HIDDEN_CLASSNAME);
    }
    • username을 인자로 받는 함수를 만들어서 else { }에서는 인자로 savedUsername 넣어서 호출.
  • function onLoginSubmit(event) {
      localStorage.setItem("USERNAME_KEY", loginInput.value);
      event.preventDefault();
      loginForm.classList.add(HIDDEN_CLASSNAME);
      paintGreeting();
    }
    function paintGreeting() {
      const username = localStorage.getItem("USERNAME_KEY");
      greeting.innerText = `Hello ${username}`;
      greeting.classList.remove(HIDDEN_CLASSNAME);
    } 
    • 사실 username은 로컬 스토리지에 저장돼있기 때문에 함수가 사용되는 두 상황에서 각각 다른 인자를 받을 필요 없음. 함수 안에서 로컬 스토리지에 저장된 값을 알아서 가져오게 해주면 됨.
    • onLoginSubmit 함수에서 loginInput.value을 username으로 정의할 필요도 없음. 한 번만 쓰이기 때문에.
    • 하지만 이러면 로컬 스토리지를 두 번 열어보게 됨.
  • [질문] function은 쓰기 전에 미리 만들어져있어야 하는 거 아닌가?