노마드 코더 바닐라 JS 챌린지 8일차

어제 4챕터 4강 정리하고 오늘은 나머지 4강을 정리하려고 한다

코드챌린지는 미리 해뒀으니 오늘은 가볍게 챌린지 넘어가고

리액트 공부해야한다...ㅠ

---

#4.4 Getting Username

-CSS에서 hiden이라는 클래스를 만들어서 display:none을 해두고 JS에서 클래스이름에 hidden을 추가해주면 해당 html요소들을 숨길 수 있다. form태그를 숨기고 미리 hidden클래스를 줬던 h1에 form태그에 걸어놓은 event의 value값을 innerText()해주면서 form태그에 hidden 클래스를 add()해주면  form 형식은 없어지고 h1태그에 event.value값을 띄워줄 수 있다.

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event){
	loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

-String과 변수를 같이 사용할 때는 "string" + 변수 와 같이 사용하는 것보다 백틱으로 `string {변수}`와 같이 사용하는 것이 더 효율적이다(노마드의 의견)

 

#4.5 Saving Username

-브라우저에는 무언가를 기억할 수 있게 해주는 localStorage라는 기능이 존재한다. localStorage에 저장하고 나중에 가져다 사용할 수도 있다.

-F12(검사) - application - 왼쪽 탭에 보면 Storage - Local Storage를 확인할 수 있다

-localStorage에 메서드 중 setItem()이 있는데 localStorage.setItem(key, value)와 같은 형태로 사용되며 브라우저에 저장된다

-localStorage의 값을 불러올때는 getItem(key), 지울때는 removeItem(key)와 같은 형태로 사용한다

 

#4.5 Loading Username

-localStorage에 getItem(key)로 결과를 확인할 때 있다면 해당 value가 없으면 null을 결과로 받는다

 -localStoragae에 값이 있는지 확인하려면 localStorage.getItem(key)를 변수에 담아서 if(localStorage.getItem(key)를 담은 변수===null)인지 확인 한 후에 실행문을 넣으면 된다

 

 

-string을 반복해서 사용하는 경우에는 변수에 고정시켜서 사용하는 것이 좋다(오타로 인한 오류 방지)