getting username
바로 전 포스팅에 로그인 시스템을 만들었다.
우리는 유저 이름을 받을 때, 폼에 적혀있는 이름이 사라지지 않고 계속 떠 있는 것을 볼 수 있다.
따라서 이 부분을 없애려 한다.
방법은 크게 두 가지가 있다.
1. Html 요소 자체를 없애는 것
<form id="login-form">위 요소를 아예 통째로 날리는 것이다.
별로 좋은 방법은 아닌 것 같아 보인다.
2. css를 이용하여 없애는 것 ✨
css 파일안에 hidden을 정의하여 classname에 추가해 사용하는 것이다.
// css
.hidden {
display: none;
}
---
// Html
<!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="style.css" />
<title>Momentum</title>
</head>
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="what is your name?"
/>
<input type="submit" value="Log in"></input>
</form>
<h1 id="greeting" class="hidden"> i'm hiding !</h1>
<script src="app.js"></script>
</body>
</html>
---
// JS
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
greeting.innerText = `Hello~! ${username}`; // string이랑 변수 합치는 법 - 백틱 사용 시 string으로 처리 됌
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
순서로 정리해보자 !
1️⃣ css 안에 hidden 지정하기
2️⃣ html에 또 다른 클래스를 hidden으로 지정해주기
3️⃣ JS에서 숨겨놓은 클래스를 가져온 후,
원래 form은 classname에 hidden을 추가시켜 가려주고
숨겨놨던 h1은 classname에 원래 있던 hidden을 제거시켜 노출되도록 코딩
localStorage
쉽게 말하면, 브라우저에서 제공하는 기억 능력이다.
예를 들어서 유튜브에서 볼륨 조절 후, 새로고침을 해도 기억을 해주는 API 다.
태그의 예로는 localStorage.removeItem / .getItem / .setItem 등이 있다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem("username", username); // 한 줄 추가 ✅
greeting.innerText = `Hello~! ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
이렇게 localStorage.setItem 옆에 값을 입력해주면 로그인을 할 때, 자동으로 정보를 브라우저에 저장해준다.
하지만 이 코드는 새로고침 시, 초기 로그인 화면으로 돌아온다.
그래서 우리는 이 상황을 막으려고 한다.
if 함수로 hidden의 경우를 나누면 되겠다. 이렇게 말이다.
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();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}
function paintGreetings(username) {
greeting.innerText = `Hello~! ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
// TODO, 새로고침 시, 데이터 유지
if (savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedUsername);
}
좀 복잡하긴 한데 순차적으로 해석하면 이해하기 쉽다.
먼저 app.js 폼에 hidden을 추가하여 처음부터 보이지 않도록 설정하였다.
로그인 정보를 submit 하지 않았을 시, 당연히 localStorage 안은 null 값이다.
따라서 if 문을 이용해 이 경우에 form에 있는 hidden을 지워주고 submit을 기다리게 한다.
다음 로그인 정보를 입력하면 greeting에 innerText를 넣어주고, hidden을 지워 화면에 노출되도록 만들어준다.
❗️ 주의할 점 - onLoginSubmit와 savedUsername의 username은 다르다.
onLoginSubmit 의 username 값은 로그인 값을 입력한 loginInput.value 값이고,
savedUsername의 username 값은 localStorage 안에 있는 username 값이다.
이 둘은 명확히 다르니 햇갈리지 않도록 하자.
