노마드코더 클론코딩 크롬앱 만들기 #1 로그인화면

*Form은 submit이라는 이벤트를 가짐

<변수명>

var: 통합(구), const:바뀌면 안되는 변수명일 때(신), let: 바뀔 수도 있는 변수명일 때 (신)

var  
const
let

<element가져오기>

getElementById는 Id명 hello인 element가져오기
querySelector는 CSS notation으로 가져옴 (첫번째 것만 가져옴 -> h2태그의 id hello인 것 가져옴)
querySelectorAll은 모든 값 가져옴 -> class name이 hello인 모든 값 가져옴)

.getElementById(hello);
.querySelector(h2#hello);
.querySelectorAll(.hello);

변수 hahaha를 string으로 바꿔주고 싶을 때

`${hahaha}`

<스트링 변수에 저장>

중복 사용되는 string은 오타방지를 위해 변수에 넣어줌. 이때 변수명은 중요한 역할을 하는 변수가 아니므로 대문자로 해주는 것이 일반적.

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

<class값 추가 삭제>

Greeting이라는 변수에 HIDDEN_CLASSNAME변수라는 이름으로 클래스를 추가해줌:add, 삭제해줌:remove

loginForm.classList.add(HIDDEN_CLASSNAME);
greeting.classList.remove(HIDDEN_CLASSNAME);

<값 저장 / 이벤트 감지>

username이라는 변수에 loginInput변수의 값을 할당해줌
submit이라는 Event를 감지하여 onLoginSubmit이라는 함수를 실행시켜주기

const username = loginInput.value;
loginForm.addEventListener("submit", onLoginSubmit);

<localStorage 저장/ 불러오기/ inner 텍스트추가>

localstorage에 키,값 저장하기:setItem, 불러오기:getItem
greeting이라는 변수 안에 "Hello "+ username 이라는 텍스트 추가해주기 (username 변수는 String으로 바꿔주기)

localStorage.setItem(USERNAME_KEY, username);
const savedUsername = localStorage.getItem(USERNAME_KEY);
greeting.innerText = `Hello ${username}`;