[JS] 로그인 구현 (logcalStorage)

로그인 페이지 만들기

2023년 4월 6일

✔️ HTML

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을 보이게했다.