momentum 로그인화면 만들기

클론코딩

momentum 로그인화면 만들기

변기원 2021. 12. 31. 17:16

일단 type="text"인 input이 필요하고 로그인 버튼이 필요하다.

이름을 넣고 버튼을 누르거나 엔터를 쳤을때 submit이 되어야 하니까 form태그 안에 넣어주자.

form 태그를 사용하면 input에서 유효성검사를 사용할 수 있다.(required나 maxlength)

그리고 로그인 했을때 welcome ${username}이 필요하니까 그 공간이 들어갈 h1태그를 만들자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="prac.css" />
    <title>Momentum practice</title>
  </head>
  <body>
    <form id="login-form" class="hidden">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="what is your name?"
      />
      <button>login</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="prac.js"></script>
  </body>
</html>

처음에 유저가 접속하면 로컬스토리지도 비어있고 form 과 h1이 둘다 hidden 클래스로 가려져있다.

css -> .hidden{display:none;}

아무것도 없는상태에서 자바스크립트가 실행된다.

const loginform = document.querySelector("#login-form");
const loginInput = loginform.querySelector("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);
  paintGreeting(username);
}

const savedUserName = localStorage.getItem(USERNAME_KEY);

if (savedUserName === null) {
  //show the form
  loginform.classList.remove(HIDDEN_CLASSNAME);
  loginform.addEventListener("submit", onLoginSubmit);
} else {
  //show the greeting
  paintGreeting(savedUserName);
}

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

다른건 함수나 변수 선언이므로 if 부터 보면된다. 만약 savedUserName이 null이면(이전에 로컬스토리지에 username을 저장한적이 없다면) form태그에서 hidden클래스가 없어지면서 form이 보인다. 그리고 이벤트리스터 함수가 submit 이벤트를 기다린다. submit이벤트가 생성되면 onLoginSubmit 함수가 실행된다.

1. onLoginSubmit함수는 submit 이벤트의 디폴트값을 막는다. submit해도 새로고침되지 않고 통제가능하다.

2.보여졌던 form을 다시 hidden클래스를 추가해서 가린다.

3. input의 value를 username변수로 저장한다.

4. 그 변수를 로컬스토리지에 저장한다.

5.paintGreeting함수를 실행한다.

이때 paintGreeting함수는 방금 input에서 입력받은 value를 인자로 받아온다. h1 태그에서 hidden클래스를 제거해서 눈에 보이게 하고 그 태그 안에 Hello ${username} text를 넣는다. 유저는 인삿말을 보게된다.

두번째는 예전에 username을 입력해서 로컬스토리지에 데이터가 남아있는 경우.

if문의 두번째 조건으로 실행된다. savedUserName이 null이 아니기 때문이다. 이때는 바로 paintGreeting함수가 실행되고 인자로는 저장되어 있는 바로 그 username이 전달된다. 어차피 form의 디폴트는 hidden이기 때문에 따로 처리할건 없고 paintGreeting 함수가 실행되면서 h1태그의 hidden이 없어지고 눈에 보인다. 그리고 마찬가지로 받아온 인자인 savedUserName을 넣어서 태그 안에 Hello ${username} text를 넣는다.