노마드 코더 - 바닐라 JS로 크롬 앱 만들기 #11
💻 오늘 실습한 코드
<!-- HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <title>Momentum</title> </head> <body> <form id="login-form" class="hidden"> <input required maxlength="15" 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();
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);
if(savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedUsername);
}실행 결과 화면
localStorage에 저장된 키값이 없을 때
localStorage에 저장된 키값이 있을 때
✔ preventDefault()
- 브라우저의 기본 동작을 막아주는 함수
- EventListener 함수의 첫
argument안에 있는 함수로 지금event에 대한 정보를 담고 있음 - 이번 예제의 경우엔 submit의 동작 → 즉 새로고침을 막아주도록 방지하기 위해서
preventDefault()를 써주었다.
✔ backtick (｀)
function paintGreetings(username) { greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME); }
"Hello " + username===｀Hello ${username}｀- 백틱은
${}를 사용해string과 변수를 조합해서 사용할 수 있게 해줌
✔ localStorage
- 브라우저에 내장된 작은 DB 같은 역할
form에서 입력받은 값을 키-값의 형태로 받아서 저장
localStorage.setItem("Key", "value"); localStorage.getItem("Key");
setItem:localStorage에Key에 해당하는Value를 저장getItem:localStorage에서Key에 해당하는Value를 가져옴
FE 개발 공부중...💫