이제 할 것은 form을 보여주기 전에, 그리고 addEventListener를 하기 전에, local storage를 확인 해줘야한다. local storage가 비어있으면 form부터 보여주면서 지금까지 해오던 것을 하면 된다.
하지만 local storage에 유저 정보가 있으면 form을 보여주면 안 된다. h1 요소를 보여줘야 한다.
그럼 이제 우리가 할 일은, local storage에 유저 정보 유무를 확인하는 것이다. 유저 정보가 없으면 위에서 말했듯, form을 보여주고 하던대로 하면 된다. addEventListener, submit, ....
그럼 유저 정보 유무를 어떻게 확인할까? 이전 시간에서 보여줬다. 콘솔에서 다음과 같이 해보자.
⬆️ 저장된 값인 nico가 나왔다.
이제 local storage에서 nico를 지우고 다시 실행해보자.
⬆️ clear all
⬆️ local storage에 username이 없으면 null 값을 결과로 받고 있다.
local storage에 유저 정보의 유무를 확인하고 싶은 것이 우리가 원하는 것이다.
이제 할 일은, app.js에 확인하는 것이다.
⬆️ local storage에 유저정보의 유무를 확인하기 위해 변수값 하나를 만들어 준다.
const savedUsername = localStorage.getItem("username"); 작성.
⬇️ console.log(savedUsername);으로 확인해주면,
We get null. that's good news.
⬇️ 만약 savedUsername의 값이 null인 경우에는 form을 보여주도록 할 것이다. 그 외의 경우에는 greeting을 보여줄 것이다.
로직이 정해졌다. 아주 간단하다.
하지만 "username"이 반복되고 있다. 이렇게 string을 반복해서 사용하는 경우에, 그리고 그것들이 '무조건' 같아야 할 때, ("hidden"을 변수로 고정시켜놓은 것처럼) 변수로 고정시켜 줄 수 있다. (변수로 고정시켜 놓는 것이 좋다.)
"username" 을 USERNAME_KEY로 교체해주자.
이것은 매우 중요하다. 우리는 "username" 이 string을 한 번만 작성하고 싶기 때문이다. 만약 string을 작성하다가 오타가 나면 JS는 이것을 지적하지 않을 것이다. 하지만 변수명이 오타가 나면, JS는 아래와 같이 지적해줄 것이다. ⬇️
본인이 생성한 string을 반복해서 사용하게 될 경우, (앞서 만든 class name "hidden", local storage key "username"처럼) 대문자 변수로 저장해놓는 것이 좋은데, 실수를 만들고 싶지 않은 string이라는 사실을 기억하고 상기시키기에 좋기 때문이다.
⬆️ 여기 있는 코드는 우리 프로그램의 제어 흐름이다.
"만약 savedUsername 값이 null일 경우, form을 표시해라."
⬇️ 문제는 지금 이 if 구문과 상관없이 form이 표시되고 있다는 것이다.
form과 greeting 모두 숨긴 채로 시작해야 한다.
⬆️ form 에도 class="hidden"을 해주면, form과 h1 이제 둘 다 숨겨진다. 이제 form도 없고 greeting(타이틀)도 없다.
⬇️ HTML에는 있지만 화면에는 표시되지 않고 있다.
이제 우리는 무엇을 표시할지 선택할 수 있기 때문에, 이 부분은 정말 중요하다.
다시, savedUsername 값이 null인 경우, 즉 local stroage에 유저정보가 없을 때, if문에 loginForm.classList.remove(HIDDEN_CLASSNAME); 그리고 윗줄에 적었던 코드인 addEventListener를 추가해주자.
다시 정리하자면, 만약 유저정보가 local stroage에 없다면 local stroage는 null 값을 반환할 것이다. 만약 savedUsername 값이 null이라면 form의 hidden class명을 지워줄 것이다.(hidden class명을 지워주면, 화면에 form을 보여주게 될 것이다.) (loginForm.classList.remove(HIDDEN_CLASSNAME);) (지금은 form과 h1 모두 hidden이라는 class를 가지고 시작하기 때문!)
⬆️ 잘 작동하고 있다. form은 표시되고, h1은 숨겨진 상태가 유지되고 있다.
⬇️ (왜냐하면 지금 local storage에는 유저 정보가 없기 때문이다.)
로그인을 하면, 이전이랑 똑같이 작동한다. (Hello nico가 뜬다.) 이제 차이점은 local storage에 유저정보가 저장되어 있다는 것이다. ⬇️
이제 다시 새로고침을 하면 else 이하의 코드가 작동되어야 한다. (show the greetings) 이제 greeting을 보여주는 일을 해보자. greeting을 보여주기 위해서는 hidden class 명을 제거해줘야 한다. greeting.classList.remove(HIDDEN_CLASSNAME); 작성.
⬆️ greeting에 이제 hidden class명은 없지만, greeting에 텍스트도 없다. greeting.innerText = 백틱 Hello ${savedUsername} 백틱; 작성. (지금 존재하는 것은 savedUsername이다.) < 이 코드를 위로 올려주자.
먼저 greeting 안에 텍스트를 추가하고, 그 다음 greeting한테서 HIDDEN_CLASSNAME을 제거해 줄 것이다.
⬆️ 작동했다! 이제 우린 새로고침을 해도 유저정보를 기억하고 있다. local storage에서 유저이름을 지우고 새로고침하면 다시 form이 표시 된다. perfect!
잘 작동했지만, 아주 작은 문제가 하나 있다. 똑같은 동작을 두 번 반복하고 있다는 것이다.
⬆️ onLoginSubmit function과 else문에서
greeting.innerText와 greeting.classList.remove를 반복하고 있다. 이것을 함수로 만드는 것이 나을 것이다. if문 위에 paintGreetings라는 함수를 만들어보자.
⬆️ username은 argument에서 가져올 것이고 (paintGreetings(username)) 함수를 만든 뒤,
⬆️ paintGreeting 함수를 호출하면 되도록 바꿔준다. 인자는 savedUsername을 넣어준다.
⬆️ 인자는 username으로 해서 두 줄의 코드를 함수로 대체해준다.
function paintGreetings(username) {
greeting.innerText = 백틱Hello ${username}백틱;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
이렇게 하면 코드를 두 줄 더 적게 쓸 수 있게 된다! 우리는 방금 username을 인자로 받는 함수를 만들었고, 이것은 원래 해오던 일을 할 것이다. greeting에 텍스트 Hello ${username}을 추가 후, hidden class명을 지워 주는 일. 하지만 우리가 함수를 호출하는 위치에 따라 유저 정보는 다른 곳에서 오게 될 것이다.
local storage에 유저정보가 있으면, 그곳에서 유저 정보를 받아서 인자로 넣어줄 것이고,(savedUsername)
만약 local storage에 유저정보가 없다면, 우리는 form의 submit을 기다리고(loginForm.addEventListener("submit", onLoginSubmit);) form이 submit되면 우리는 input으로부터 유저정보를 받고,(onLoginSubmit 함수의 const로 지정한 변수 username⬇️)
input에서 받은 user를 가지고 paintGreetings를 호출할 것이다. (paintGreetings(username);)
