[JS] 로그인 페이지 만들기

✔️ HTML

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

Input을 감싸고 있는 form과 h1의 class명을 hidden으로 설정해주었다.

🪄 Input에 required 요소를 추가하여 필수입력을 표시하게 할 수 있다.
또한 maxlength="15"로 작성하여 Input에 입력수 제한을 둘 수 있다.

✔️CSS

.hidden {
display: none;
}

Input을 감싸는 form과 h1의 class인 hidden을 display 속성을 none으로 설정하여 보이지 않도록 했다.

✔️SCRIPT

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(); // 기본동작은 실행되지 않게 하는 함수  _ 기본동작 : submit 후 새로고침되는 동작
loginform.classList.add(HIDDEN_CLASSNAME); //hidden이라는 class name을 더해줘서 form을 숨김 
const username = loginInput.value; //loginInput에 작성한 값을 username 으로 저장 
localStorage.setItem(USERNAME_KEY, username); //key와 value값을 지정 (미니데이터베이스 느낌)
 }

함수값이 제출되면 실행되는 함수명을 onLoginSubmit 으로 지정했다. 실행되는 동작들은 아래와 같다.

event.preventDefault();

기본 동작이 실행되지 않게하는 함수이다.
값이 submit되면 자동으로 새로고침 되는 것이 기본동작인데 preventDefault로 자동으로 새로고침 되는 현상을 막았다.

loginform.classList.add(HIDDEN_CLASSNAME);

loginform에 HIDDEN_CLASSNAME의 함수를 추가해서 form을 숨긴다.

const username = loginInput.value;

username을 loginInput에 작성된 값으로 설정해준다.

localStorage.setItem(USERNAME_KEY, username);

localStorage은 브라우저의 storage에 key값과 value값을 저장할 수 있게하는데, setItem으로 ket값과 username을 설정해준다.

function painGreeting(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME); //h1로부터 Hidden 시킴
painGreeting(username); //apingreeting 함수 호출

로그인이 되고 인사말을 띄우게 하는 함수를painGreeting로 지정했다. 실행하는 동작은 아래와 같다.

greeting.innerText = Hello ${username}

greeting 함수에 innerText로 위와같은 텍스트를 값으로 가져온다.

greeting.classList.remove(HIDDEN_CLASSNAME);

HIDDEN_CLASSNAME을 remove, 제거함으로서 greeting, 즉 h1을 보여지게 한다.

painGreeting(username);

username을 입력해서 apinGreeting 함수를 호출한다.

const savedUsername = localStorage.getItem(USERNAME_KEY);

saveUsername

logcalStorage에 USERNAME_KEY값으로 username을 storage에 저장 할 수 있게한다.

if (savedUsername === null) {
loginform.classList.remove(HIDDEN_CLASSNAME);
loginform.addEventListener("submit", onLoginSubmit);
} else {
painGreeting(savedUsername);
}

if (savedUsername === null)

Storage에 저장된 saveUsername이 null 값이라면,

loginform.classList.remove(HIDDEN_CLASSNAME);

HIDDEN_CALSSNAME 함수를 실행시켜서 h1과 form을 지우지 않는다.

loginform.addEventListener("submit", onLoginSubmit)

이벤트를 등록하는 addEventListener로 submit, 제출이 실행되면 onLoginSubmit 이벤트를 실행하도록 한다.

정리해보자면,

실행되는 동작을 값이 입력되기 전의 동작, 로그인 실행된 후 동작, 2가지로 나눌 수 있다.
✔️ 로그인 전에는 add(HIDDEN_CLASSNAME)로 login-form을 보이지 않게 했고, ✔️로그인이 성공하면remove(HIDDEN_CLASSNAME) 로 h1을 보이게했다.

너무 간단하게 뚝딱뚝딱했지만 아직 코드를 작성하다가 헷갈려서 다시 거슬러 올라가서 이해할려고하는 과정이 있다.. 다들 그런거겠지 ...?