개발자 99% 커뮤니티에서 수다 떨어요!
클론 코딩을 독학으로 수강하고 있는 수강생입니다
우선 전체적인 코드 들입니다.
< app.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";
function onLoginSubmit(event){
event.preventDefault(); // browser가 기본 동작을 실행하는 것을 막아준다. 이 경우 submit은 새로고침이 기본 동작인데 이를 막음
loginForm.classList.add(HIDDEN_CLASSNAME); //submit동작이 실행되었을 때 로그인 form을 안보이게 하기 위함
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}
function paintGreetings(username){
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
// loginForm.classList.add(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedUsername);
}
< index.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?"
/>
<button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>
</html>
< style.css >
.hidden {
display: none;
}app.js 파일에서 궁금한 부분이 있습니다.
코드 구동 순서가 localstorage에서 getItem을 받아와 savedUsername 변수에 저장하고
if/else문을 통해 localstorage 값이 null인 경우, loginForm을 없애지 않고 submit 이벤트를 계속 기다리고, 아닌 경우(else) greeting의 h1 태그 문구가 보이고 loginForm은 hidden이 적용되어 문구만 보이게 하는 순서로 이해하고 있습니다. 강의의 코드를 비교해보아도 app.js의 코드와 주석된 부분 말고는 다른게 없었습니다ㅜㅜ
첫 화면이고, 우선 이 브라우저는 위 코드의 app.js의 주석처리가 되어 있는 코드를 실행 시켰습니다.
정보를 입력하고 엔터를 누르면 바로 localstorage에 username으로 저장이 되어야 하는데
이렇게 localstorage에는 filter옆의 새로고침을 해주어야지만 데이터가 표시되고 엔터를 쳤을 때 갱신이 되지 않는 것을 볼 수 있습니다. 또한 loginForm은 hidden처리가 되어야 하고 greeting의 h1태그가 표시가 되어야 하는데 둘 다 표시가 됩니다.
위 전체 코드의 app.js의 주석코드 한 줄을 주석 해제하고 실행하였을 때는 loginForm이 잘 사라지고 새로고침을 하여도 똑같이 유지되지만 역시 localstorage에는 filter 옆의 refresh버튼을 눌러야 정보가 DB에 올라가는 것을 확인할 수 있습니다. 어떤 부분이 잘 못되었는지 같이 해결하고 싶습니다ㅜㅜ 도와주세요!!