로그인폼 Recap
이름을 입력하고 로그인하면 Hello, {이름}이 뜨는 로그인 폼 만들기
로그인을 하기 위한 유효성 검사
1. 이름이 비어있지 않은 상태여야 함
2. 입력하는 값이 15자를 넘지 않아야 함
추가기능
:사용자 이름 정보를 기억해서 매번 로그인 해야하는 불편함을 없앤다.
<body>
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?">
<button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="js/greetings.js"></script>
</body>form태그로 감싼 input 태그의 속성으로 유효성 검사 2가지를 간단하게 할 수 있게 했다.
-> required, maxlength = 15
form과 h1 태그에는 .hidden을 넣어 js로 화면에 나타나는 것을 조절할 수 있게 했다.
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";#login-form을 보였다 안 보였다 해야하기 때문에 loginForm으로 선언했다.
사용자가 입력한 값을 확인하게 위해 #login-form > input을 loginInput으로 선언했다.
사용자가 로그인을 했거나, 이전에 로그인한 기록이 있으면 Hello {사용자명}을 보여줘야 하기 때문에 h1#greeting을 geeting으로 선언했다.
이 외에 클래스명인 "hidden"과 로컬저장소의 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);
}//함수 onLoginSubmit
브라우저는 함수를 실행할 때 어떤 정보를 가지게 되는데,
매개변수 event를 첫번째 인자로 넣어 확인하거나 활용할 수 있게 된다.
(변수명인 event는 컨벤션에 따랐다)
submit의 기본 동작인 새로고침을 event.preventDefault()를 통해서 막아주고
loginForm에 클래스 명 hidden을 추가 해 로그인폼이 보이지 않게 해준다.
로그인할 때 사용자가 입력한 값을 로컬 저장소에 저장하기 위해
loginInput.value를 username으로 선언한 뒤 로컬 저장소에
USERNAME_KEY("username") = loginInput.value로 저장한다.
그리고나서 username를 매개변수로 가지는 함수 paintGreetings를 실행한다.
//함수 paintGreetings
username을 인자로 받아
id명 greeting인 h1태그에 Hello username을 넣고
이 태그의 hidden 클래스를 지워 화면에 보여준다.
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedUsername);
}
savedUsername은 로컬 저장소에서 USERNAME_KEY("username")을 가져온다.
//if 함수
조건
: username으로 저장된 값이 null인 경우,
명령문1
: loginForm이 hidden클래스를 지워 로그인폼이 보이게 한다.
loginForm에 사용자가 submit이벤트를 실행하면 onLoginSubmit을 실행하는 이벤트리스너를 실행한다.
명령문2
: (username으로 지정된 값이 null이 아닌 경우.)
paintGreetings 함수가 실행되게 한다.
니꼬쌤 유튜브에서 왜 인기 좋은지 알겠다.
재밌고 이해도 잘 된다.
남한테 설명을 못하면 제대로 아는 것이 아니라고 그랬는데,
자바스크립트를 계속 공부하면서도 모르겠는 이유가
정말 제대로 아는 것이 아니기 때문이었다....ㅎ
명칭도 잘 모르겠고 어떤 원리로 작동하는지 설명하는데 하루 종일 걸린다.
왜 영웅님이 개발 블로그를 쓰라고 하셨는지 정말 잘 이해가 된다.
발전 좀 하자..!
