노마더코더 크롬 앱 만들기 : Login

소스

html

<form id="login-form" class = "hidden">
    <input 
    required 
    maxlength="15" 
    type="text" 
    placeholder="what is your name?"
    /><br>
    <input type="submit" value="Check"/>
</form>
<h1 id="greeting" class = hidden></h1>

CSS

.hidden {
   display: none;
}

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) { // 함수 onLoginSubmit에 매개변수 event(실행? 작동?)을 넣음
    event.preventDefault();   // event의 새로고침을 막음
    loginForm.classList.add(hidden_classname); // loginform에 username 클래스 추가
    const username = loginInput.value;  
    localStorage.setItem(username_key, username); //localStorage에 username 키와 value 저장
    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); //login-form에 있는 hidden을 제거한다.
    loginForm.addEventListener("submit", onLoginSubmit); // submit 사용?실행시 onLoginSubmit이라는 함수 실행
} else { 
    paintGreetings(savedUsername);  // 함수 paintGreetings에 매개변수 username을 받아서 실행
}

배운 것들!!

• document.cument.querySelector를 이용해 html에 있는 form과 input, greeting을 끌어 왔다
• 문자열 합치고 표현 방식

greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`;

• classList를 이용하여 클래스를 추가 및 제거하여 다양한 메서드를 만들수 있다.
• addEventListener은 이벤트(동작?,실행?)를 등록하는 가장 권장되는 방식
• preventDefault는 a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.
• localStorage는 Document 출처의 Storage 객체에 접근할 수 있게 해준다.