#4.6 Loading Username

• 반복되는 string은 변수로 저장
• Username을 기억해두고 새로고침해도 사라지지 않도록 저장하기

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    const userNameType = loginInput.value;
    event.preventDefault(); //새로고침되는 기본 동작을 막음
    loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼 클래스리스트에 hidden클래스 추가해서 가리기
    localStorage.setItem(USERNAME_KEY,userNameType); //유저이름 저장하기
    paintGreetings(userNameType); //함수호출
}

function paintGreetings(){
    const username = localStorage.getItem(USERNAME_KEY); //저장된 유저이름 찾기
    greeting.innerText = `Hello ${username}`; //지금 상황에서 존재하는건 savedUsername,greeting에 텍스트 추가
    greeting.classList.remove(HIDDEN_CLASSNAME); 
} //함수를 호출하는 위치에 따라 유저 정보는 다른 곳에서 옴

const savedUsername = localStorage.getItem(USERNAME_KEY); //키로부터 데이터 읽기

if (savedUsername === null){
    // form을 표시
    loginForm.classList.remove(HIDDEN_CLASSNAME); //localStorage에 유저정보가 없으면 form의 submit을 기다림
    loginForm.addEventListener("submit",onLoginSubmit);
} else {
    //greeting을 표시
    paintGreetings(); //localStorage에 유저정보가 있으면 그곳에서 정보를 받아옴
}

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    event.preventDefault(); //새로고침되는 기본 동작을 막음
    loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼 클래스리스트에 hidden클래스 추가해서 가리기
    const username = loginInput.value; //input으로부터 유저정보 받기 
    localStorage.setItem(USERNAME_KEY,username); //키에 데이터 쓰기
    paintGreetings(username); //input에서 받은 유저정보를 가진 함수 호출
}

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`; //greeting에 텍스트 추가
    greeting.classList.remove(HIDDEN_CLASSNAME); 
} //함수를 호출하는 위치에 따라 유저 정보는 다른 곳에서 옴

const savedUsername = localStorage.getItem(USERNAME_KEY); //키로부터 데이터 읽기

if (savedUsername === null){
    // form을 표시
    loginForm.classList.remove(HIDDEN_CLASSNAME); //localStorage에 유저정보가 없으면 form의 submit을 기다림
    loginForm.addEventListener("submit",onLoginSubmit);
} else {
    //greeting을 표시
    paintGreetings(savedUsername); //localStorage에 유저정보가 있으면 그곳에서 정보를 받아옴
}

둘다 가능함