2021.09.29
JS #4.4~#4.7 수강

Login

#4.4 - Getting Username

유저가 이름을 입력하면, form 이 없어지는 것을 구현해보자.

CSS 활용법

• Html 에 id="greeting", class="hidden" 을 가진 h1 을 입력한다.
• CSS 에는 .hidden 에 대해 display: none; 해준다.
• 이제 자바스크립트에서 id="greeting" 을 불러와 준뒤,
  
• 현재 function 은 .preventDefault(); 로 인해 기능을 멈춘 상태
• form 은 없어져야 하므로 .classList.add("hidden") 값으로 CSS 가 적용되도록 해주자.
  
• 우리는 input 값(=username) 이라는 것을 안다. 변수명을 설정하고,
• h1 id="greeting" 의 innerText 에 들어갈 값을 설정해준다.
• innerText가 출력되려면 h1 class="hidden" 이 없어져야 하므로 .classList.remove("hidden"); 값을 입력해준다.
  

+

1#

"hidden" 이라는 string 이 두 번 반복되니, 하나의 const 로 묶어주자.
이때의 내용이 별다른 것이 아닌, string 뿐이니 다른 것과 구별할 수 있게 대문자로.

const HIDDEN_CLASSNAME = "hidden";

2#

또, innerText 를 아래와 같이 대체할 수도 있는데,
여기에는 두 가지 조건이 있다.

• 첫째, ${변수명} 이어야 한다.
• 둘째, 시작과 끝에 `` 백틱기호를 사용해주어야 한다.

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

#4.5 - Saving Username

value 를 저장하는 방법에 대해서 알아보자.

localStorage.setItem()

• function 내에 입력해준다.
• () 안에는 "저장될 값의 이름(key)", "저장할 value" 순으로 입력해준다.
• 그렇게 하면, local storage 에서 아래와 같이 값이 저장된 것을 확인할 수 있다.
  

#4.6 - Loading Username

저장된 value 를 불러와보자.

• class="hidden" 을 form 에도 추가 함으로써,
  모두 숨긴 뒤 우리가 화면에 표시할 것을 선택할 수 있게 해주자.
• 저장된 값에 대한 변수(savedUsername)를 설정해준다.
• if-else 를 활용해서, localStorage 에 유저값이 없을경우(true)
  form 의 class="hidden" 을 제거해줘서 화면에 나올 수 있게 해주고,
• localStorage 에 유저값이 있을경우(false) greeting 문구와 함께 greeting에 해당하는 h1의 class="hidden" 을 제거해줘서 화면에 나올 수 있게 해준다.
  
• 그런데, else 안의 값이 반복되므로, 이를 함수(function)로 묶어준다.
• 그리고, 반복되는 값은 functionName(받을 값) 으로 대체