4.0
입력받는 창을 만들기 위해 html을 다음과 같이 작성.
js에서 input과 button을 가져오는 방법은 두가지가 있다.
1)
const loginForm = document.getElementById("login-form");
const loginInput=loginForm.querySelector("input");
const loginInput=loginForm.querySelector("button");2)
const loginInput=document.querySelector("#login-form input");
const loginButton=document.querySelector("#login-form button");->이렇게 해서 버튼과 로그인 창은 생성.
목표: 입력값을 콘솔창에 그대로 뜨게 하고 싶음.
-> 위에서 변수로 지정한 loginInput에 대하여
console.dir(loginInput);하면 뜨는 object를 보면, value 항목에서 그 값이 뜸을 알 수 있음. 따라서
해결
const loginInput=document.querySelector("#login-form input");
const loginButton=document.querySelector("#login-form button");
function loginClick(){
console.dir(loginInput.value);
}
loginButton.addEventListener("click", loginClick);4.4
1.hidden class에 대해 배웠다.
우선 hidden class는 css파일에서 다음과 같이 정의해준다.
.hidden{
display:none;
}(1) 로그인 창을 입력하는 순간 창이 사라지도록 하고 싶을 때 -> "hidden"을 form classList.add를 통해 추가해준다.
(2) 숨어져있던 hidden text가 로그인 창을 입력함으로써 나타나게 하고싶다.
->index.html에서
<h1 id="greeting" class="hidden"></h1>h1태그의 hidden class를 추가한 다음, js에서 이를 remove한다.
2. `` 백틱 기호와 ${}에 대해 배웠다.
innerText에 원하는 문구를 작성하는데 이와 같이 string과 변수를 결합하는 방법은 두가지 방법이 있다.
greeting.innerText="Hello "+ username;
greeting.innerText=`Hello ${username}`;
후자가 앞뒤 문구를 넣기가 편하기때문에 더 선호되는 방식이다. 여기서 백틱 기호 ``와 작은 따옴표 ''를 헷갈리지 않도록 주의한다.
4.5 Saving
유저의 정보를 saving하는 기능은 자주 쓰이기때문에 이미 내장되어있다.
localStorage.setItem("username","jo");하면 관리자항목(F12)->Application탭에서 username이라는 key와 jo라는 value가 저장되어있음을 볼 수 있다. 그리고
localStorage.removeItem("username");이렇게 하면 값이 삭제된다. 또한
localStorage.getItem("username");을 하면 "jo"를 불러올 수 있다.
Problem: 유저값은 저장되지만 새로고침을 하면 여전히 폼이 표시된다. 다음 강의에서 이미 username이 저장되어있는 경우, 폼이 아닌 h1태그부터 보이도록 할 것이다.
4.6 Loading
만약, localStorage에 username이 존재하지않으면, localStorage.getItem("username")을 했을 때 null값을 반환한다. -> 이 점을 이용한다.
우선 html에서 form과 greeting 모두 hidden 클래스를 적용해준다. 그리고 기존 loginForm.addEventListener에서 if문으로 조건을 추가해준다. 만약 getItem을 했을 때 null값이면 form에 있는 hidden class를 제거하고 addEventListener을 불러온다. null이 아니면 greeting 메세지에 걸린 hidden class를 제거하고 문구를 추가해준다. 여기서 greeting 메세지에 걸린 hidden class를 제거하고 문구를 추가해주는 동작이 여러번 사용되기 때문에 따로 함수로 빼내서 관리한다. 그 외에 string 값들도 반복되는 값이 있으면 변수로 만들어서 사용하는 것이 편하다. (오타났을 때 에러를 바로바로 알아내기 위해서) 개인적으로, 노마드코더를 통해 js를 조금이나마 알아가는 것도 재밌지만, 이렇게 코딩할 때 들이는 작은 습관들을 보고 많이 배우게 되는 것 같다.
문제를 해결한 코드를 다음과 같이 첨부한다.
js code
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 loginSubmit(event){
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
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", loginSubmit);
}
else{
paintGreetings(savedUsername);
}
html code
<!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 App</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 code
.hidden{
display:none;
}4.7
4장 총복습.
