4-4
목적: 유저가 이름을 입력하면, form 이 사라지는거

loginForm.classList.add("hidden");

css classname 추가,삭제하는거
hidden은 classname.
console.log(username);

이렇게 되면 user가 이름을 입력한 후 폼 자체는 사라지고, 이름은 기록됨.

html 추가
const greeting = document.querySelector("#greeting");

h1에 표시할 텍스트가 있을 때만.
hidden classname 추가> form 숨기고>

string이 두번 반복되면, 변수로 따로 만들어서 저장해줌
string만 있는 변수의 이름은 다 영대문자로 하는 관습이 있다.

문자열하고 변수 합치는 방법
"Hello " + username
'Hello ${username}'

주로 두번째 방법을 쓸 것 같음.

4-5
목적: value(여기서는 username)을 저장,기억하는 방법 배우기

localStorage.
브라우저에 뭔가를 저장할 수 있게 해줌. 그래서 나중에 가져다 쓸 수 있음.

localStorage에 뭐가 들어있는지 보고 싶으면,
개발자 도구. 검사. application. localStorage. 확인

저장하기:
localStorage.setItem("username","nico")

불러오기:
localStorage.getItem("username")

삭제하기:
localStorage.removeItem("username")

4-6
목적: user정보가 있다면, form을 보여주지 않음.
user 정보가 없다면, form을 보여줌.

const savedUsername=localStorage.getItem("username");
const USERNAME_KEY="username"; >username string반복,실수를 만들고 싶지 않은 string이라는 것을 기억하기 좋음.

화면에 form을 먼저 숨기고 시작. class를 앞에 넣어줌.

코드가 똑같은 게 2번 반복되면>함수로 만들자.
함수를 받는걸 뭘로 해야할지 헷갈린다.

username을 인자로 받는 함수를 만듦.

function을 만들때 왜 savedUsername이 아니라 username으로 받는지..?

const savedUsername을 더 앞쪽에 선언해서 그걸로 받으면 안되나.

헷갈려ㅕㅕㅓㅓ어ㅓㅓㅓㅓㅓ

greeting에 텍스트 Hello ${username}을 추가 후 HIDDEN_CLASSNAME을 지워주는 일을 함.
하지만 우리가 함수를 호출하는 위치에 따라 유저 정보는 다른 곳에서 오게 됨(?)
local storage에 유저 정보가 있으면, 거기서 유저정보를 받아서 인자로 넣어줌.
만약 local storage에 유저정보가 없다면, 우리는 form의 submit을 기다리고,
form이 submit이 되면 우리는 input으로부터 유저정보를 받고.
input에서 받은 user를 가진 paintGreetings를 호출할거임.

4-7
작동 원리

첫번째 단계: savedUsername 확인. 자바스크립트가 들어와서 제일먼저 local storage를 확인할거.
local storage에 key를 입력하면 해당하는 value를 string으로 불러옴.
일단 local storage에 저장되어있는 값은 null(사용자가 아무것도 입력하지 않았을 때)
두번째 단계: if문으로 감.
(사용자가 아무것도 입력하지 않았을 때)
hidden class를 제거함>폼이 나타남.
addEventListener를 추가해서 submit을 기다림.(제출함)onloginSubmit함수 호출
세번째 단계: onloginSubmit함수 실행, function으로 감.
브라우저의 기본동작(페이지 새로고침) 을 막아줌.
hidden class추가. 폼 숨겨줌
username은 loginInput.value 라는거 명시. 인풋한 값이다~
localStorage가 저장해줌.
paintGreetings(username)함수 호출
비어있는 h1태그에 텍스트추가해줌.
h1요소로부터 "hidden"이라는 클래스명 제거.
(새로고침하면) 폼이 다시 등장함.