로그인 기능을 구현했는데 mvc모델이 아니라 크롬한 페이지에서 javascript랑 css를 이용해서 태그 숨기고 값을 저장해줬다. 자바스크립트의 기본개념을 공부하면서 만드는 거라서 기본이 약했던 나에게는 좋았다!
사용자가 로컬스토리지에 저장되어 있지 않으면 form태그가 나오게하고 로컬스토리지에 사용자 이름이 저장되어 있으면 hello '이름'의 값만 보이게 한다.
1. 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 type="text" placeholder="What is your name?">
<input type="submit" value="Log In">
</form>
<h1 id="greeting"></h1>
<script src="app.js"></script>
</body>
</html>
먼저 이름을 입력해서 전송하는 form태그를 만들었다.
2. javascript 만들기
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
function onLoginSubmit(event){
event.preventDefault(); //자동 새로고침하는 기본기능을 막음
const username = loginInput.value;
greeting.innertext=`Hello ${username}`; //"Hello " + username
console.log(greeting.innertext);
}
loginForm.addEventListener("submit", onLoginSubmit);
h1태그의 내용을 입력받은 이름을 넣어줬다. 오류를 줄이기위해 변수를 이용했다.
오늘 알게 된 문법(?)은 항상 "Hello " + username을 백틱기호(`)를 이용해 값을 넣어 줄 수 있다는 것이었다.
`Hello ${username}`으로 적으면 javascript가 알아서 변경해주는 것이다. 아주 간편하다!
이름을 입력하고 전송하면 콘솔에 h1태그에 넣어준 값이 나올것이다.
3. 페이지에 h1태그내용을 나타내기
html h1태그에 hidden이라는 클래스를 지정해준다.
<h1 id="greeting" class="hidden"></h1>
hidden클래스의 css를 정해주자. 페이지에 나타나지 않게하는 display:none; 설정했다.
.hidden{
display: none;
}
페이지를 실행하면 이름을 입력하는 form태그는 보이고 h1태그는 보이지않는다.
자바스크립트에서 submit이벤트의 함수를 고쳐준다.
이름을 전송하면 폼태그는 화면에서 사라지고 h1태그가 나타나게 해주기위해 classList를 사용했다.
폼태그는 add(hidden)을 h1태그는 remove(hidden)을 추가해줬다.
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event){
event.preventDefault(); //자동 새로고침하는 기본기능을 막음
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
greeting.innerText=`Hello ${username}`; //"Hello " + username
greeting.classList.remove(HIDDEN_CLASSNAME);
}
이름을 입력하기전에는 폼태그에 hidden클래스는 없고 h1태그에만 hidden클래스가 있다.
이제 이름을 적고 전송하면!
폼태그에 클래스가 생성되면서 입력창이 사라졌다.
h1태그에는 클래스가 없어지고 hello joso라고 값이 들어가며 페이지에서도 볼 수 있게됐다.👍🏻👍🏻
이제 이름을 받았으면 페이지 내부에 저장해줄 건데 localStorage를 사용해준다. 다양한 함수를 가지고 있지만 setItem(), getItem()]를 사용해서 값을 저장, 가져오기를 해줄 것이다.
4. 이름 저장하기
localStorage.setItem(USERNAME_KEY, username)을 입력해서 키와 값을 저장해준다.
const USERNAME_KEY = "username";
function onLoginSubmit(event){
event.preventDefault(); //자동 새로고침하는 기본기능을 막음
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
greeting.innerText=`Hello ${username}`; //"Hello " + username
greeting.classList.remove(HIDDEN_CLASSNAME);
}
페이지를 실행시키면 로컬스토리지에 잘 저장되어있다.
마지막으로 스토리지에 값이 저장되어있으면 hello joso만 페이지에 나타내고 값이 저장되어 있지않으면 이름을 입력해서 값을 저장해주게 하는 페이지를 만들 것이다. if문을 사용할 것이고 폼태그와 h1태그에 hidden클래스를 먼저 지정해 줄것이다.
그리고나서 로컬스토리지에서 값을 얻어와 null인지 값이 있는지 확인하는 로직을 만들면 끝!
5. 페이지 완성하기
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" class="hidden">
<input type="text" placeholder="What is your name?">
<input type="submit" value="Log In">
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>
</html>
css
.hidden{
display: none;
}
javascript
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();
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}
function paintGreetings(name){
greeting.innerText=`Hello ${name}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
//로컬스토리지에 저장된 값 가져오기
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername==null){//폼태그에 이름입력해 값 저장하게 하기
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
}else{
paintGreetings(savedUsername);
}
벨로그? 난 켈로그