[JS ES6] Log-in 효과

📌 KEY POINT

💚 input 속성 : required(필수입력), maxlength="15"(최대 글자수)
💚 input으로 입력한 이름/아이디 값을 키-값 구조로 localStorage에 저장하여 새로고침하여도 유지될 수 있도록 저장값 활용

---

👉🏻 마크업은 이렇게! (HTML5)

🩵 이름/아이디를 입력할 input 생성
🔹 login 버튼은 button 태그로 생성해도 된다. 참고로 form 태그 안에서 button 태그는 기본 타입속성이 submit이다.

🩵 그리고 이름/아이디를 입력하고 'Welcome, ~' 문구를 대신 띄울 것이기 때문에 텍스트를 노출시킬 요소도 생성한다.

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

---

👉🏻 스타일은 이렇게! (CSS3)

🩵 이름/아이디 입력 전과 후를 나누어 입력폼과 텍스트를 각각 노출시켜야 하는데, hidden 이라는 클래스를 스크립트로 컨트롤 할 것이고 따라서 hidden 클래스에 대한 style만 설정해주면 된다.

<style>
.hidden{
    display: none !important;
}
</style>

---

👉🏻 스크립트는 이렇게! (JS ES6)

🩵 onLoginSubmit() 함수 설명

🔹 이름/아이디가 입력된 후 submit 상태가 되었을 때, form 영역을 감추고 'Welcome, ~' 문구를 노출시켜야 한다. 따라서 form 태그에 hidden 클래스를 추가한다.

🔹 form에 submit이라는 이벤트가 실행되었을 때, 입력한 이름/아이디 값 (=input.value)을 변수와 localStorage에 저장한다.

🩵 paintGreetings() 함수 설명

🔹 입력한 이름/아이디 값을 'Welcome, ~'라는 텍스트로 노출시키기 위한 함수
🔹 localStorage.getItem()를 통해 localStorage에 저장된 값을 불러오는 로직
🔹 기존에 설정되어있던 hidden 클래스를 제거

🩵 localStorage란?

🔸 localStorage는 웹 브라우저에서 제공하는 저장소로, 키-값(Key-Value) 쌍 형식으로 데이터를 브라우저에 영구적으로 저장할 수 있는 기능
🔸 localStorage에 저장된 데이터는 세션을 종료해도 계속해서 브라우저를 닫고 다시 열어도 유지된다!
🔹 localStorage.getItem(USERNAME_KEY) : 주어진 key에 해당하는 값을 localStorage에서 가져옴
🔹 localStorage.setItem(USERNAME_KEY, username) : 주어진 key에 value 값을 localStorage에 저장

🩵 localStorage에 저장된 데이터가 없다면(null) form 노출, 있다면 text 노출

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

//동일한 텍스트를 입력할 일이 많다면 이렇게 KEY 변수로 설정하면 오타 방지, 효율성 짱짱
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  // preventDefault : 브라우저가 기본 동작을 실행하지 못하게 막아줌
  event.preventDefault();

  loginForm.classList.add(HIDDEN_CLASSNAME);

  const username = loginInput.value; // input에 입력한 이름/아이디(=value)값을 변수에 저장

  // username 값을 username_key와 함께 local storage에 저장
  localStorage.setItem(USERNAME_KEY, username);

  paintGrettings();
}

function paintGreetings(
  // local storage에 저장된 데이터를 username 변수에 저장
  const username = localStorage.getItem(USERNAME_KEY);
  
  greeting.innerText = `Welcome, ${username}!`; // 데이터보간법을 활용하여 요소의 텍스트로 반환
  greeting.classList.remove(HIDDEN_CLASSNAME); // 앞서 설정되어있던 hidden 클래스 제거
)


// localStorage에 저장된 데이터가 없다면(null) form 노출, 있다면 text 노출
const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  
  // input 요소는 텍스트 입력 필드일 뿐, 폼 제출 이벤트를 처리하는 역할을 하지 않기 때문에 submit 이벤트를 input에 바인딩하는 것보다는 폼 자체인 loginForm에 바인딩하는 것이 일반적인 방식
  loginForm.addEventListener('submit', onLoginSubmit);
  
} else {
  // hide the form
  paintGreetings();
}