form을 보여주기 전에, 그리고 addEventListener를 하기 전에, 확인을 해주어야 합니다.
이 때, local storage가 비어 있으면 form부터 보여주면서 지금까지 해오던 것을 하면 됩니다.
하지만 local storage에 유저 정보가 있으면 form을 보여주면 안됩니다. h1 요소를 보여주어야 합니다.
시작!
local storage에 유저정보 유무 확인하기
유저정보가 없다면 form을 보여주고 하던대로 하기
local storage에서 dukin을 지우고 다시 실행해보기
보다시피 local storage에 username이 없으면 null 값을 결과로 받고 있습니다.
이게 우리가 원하는 local storage에 유저정보의 유무를 확인하는 것입니다.
코드를 작성하고 새로고침을 하면 null이 나옵니다.
만약 savedUsername의 값이 null인 경우에는 form을 보여주도록 합니다.
그 외의 경우에는 greeting 보여줄 것입니다.
하지만 "username"이 반복되고 있습니다.
string을 반복해서 사용하는 경우에, 그리고 그것들이 무조건 같아야 할 때, 전처럼 여기에 변수로 고정을 시켜주도록 합니다.
이제 username이라고 작성한 부분을 USERNAME_KEY로 교체해주기
이것은 매우 중요합니다. 왜냐하면 우리는 이 string을 한번만 작성하고 싶기 때문입니다.
만약 string을 작성하다가 오타 나면 자바스트립트는 이걸 지적하지 않을 것입니다.
하지만 변수명이 오타가 나면 지적해주기 때문입니다.
본인이 생성한 string을 반복해서 사용하게 될 경우에는 반복되는 string들을 대문자 변수로 저장해 놓는 것이 좋습니다!
다시 코드로 돌아가서 방금 작성한 코드를 볼 때, 문제는 지금 이 if문과 상관없이 form이 표시된다는 것입니다.
form과 greeting을 모두 숨긴채 다시 해보도록 합니다.
이렇게 작성하면 둘 다 숨겨지게 됩니다.
html에는 있지만 화면에는 표시되지 않고 있는 것입니다.
만약 유저정보가 local storage에 없다면 local storage는 null 값을 반환합니다.
그래서 만약 savedUsername 값이 null이라면 form의 hidden class명을 지워줍니다.
왜냐하면 지금은 form이랑 h1 모두 hidden이라는 class를 가지고 시작하기 때문입니다.
로그인을 클릭하면 이전이랑 똑같이 작동하고 있습니다.
차이점은 이제 local storage에 유저정보가 저장되어 있다는 것입니다.
이제 우리가 할 일은 greeting을 보여주는 것입니다. greeting을 보여주기 위해서는 hidden class명을 제거해줘야 합니다.
새로고침하면 제대로 작동은 되고 있습니다.
greeting에 이제 hidden class명은 없습니다.
하지만 greeting에 텍스트도 없습니다.
왜냐하면 그 텍스트는 우리가 추가해줘야 하기 때문입니다.
위와 같이 작성해주고 실행해보도록 하겠습니다.
유저정보를 기억하고 있는 것을 볼 수 있습니다.
하지만 문제점이 있습니다. 그것은 똑같은 동작을 두번 반복하고 있다는 점입니다.
paintGreeting이라는 함수를 만들도록 해보겠습니다.
우리는 방금 username을 인자로 받는 함수를 만들었고 이건 우리가 해오던 일을 합니다.
하지만 우리가 함수를 호출하는 위치에 따라 유저정보는 다른 곳에서 오게 될 것입니다.
끝!
