노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다
모든 것들은 HTML 에서 시작되야 한다
HTML을 작성한 다음 거기 있는 element 들을 끌고 오는 것
user.value값 얻기
app.js:39 Uncaught TypeError: Cannot set properties of null (setting 'innerText')
처음 보는 생소한 오류 코드라 당황했다
영상을 보며 혼자 코드를 쓴건데 뭐가 틀린걸까 하고 오류를 확인해보니
null 설정 'innerText'의 속성을 설정할 수 없습니다 라고 한다
innerText 쪽을 살펴보니 변수 greeting에서
querySelector로 id를 찾아오는데 # 을 적지 않은 것이었다...🥲
오류 코드도 잘 기억해두자.!✍️
js 35번째 줄에 클래스 hidden 의 변수는 왜 대문자 일까 ?
다수로 사용되고 있는 hidden 클래스 이름을 변수로 저장한 것
변수 이름이 왜 대문자일까 ? 일반적으로 string 만 포함된 변수는
대문자로 표기하고, string을 저장하고 싶을 때 사용한다
다만 여기서 1번 코드는 Hello 뒤에 스페이스를 직접 입력 해줘야한다
string과 변수의 합한 형태를 더 편리하고 보기좋게 바꿔보자
greeting.innerText = "Hello " + username; ->
greeting.innerText = `Hello ${username}`;아래의 코드 처럼
백틱(``) 안에 string과 ${변수}를 함께 넣은 형태이다
뒤에 string을 계속 추가 해도 되는 형태이다
user에게 "Hello" 인사는 할 수 있지만
새로고침 할 때마다 새로 로그인 해줘야 하는 형태이다
다음은 새로고침 해도 user 이름이 저장 되어 있게 해보자
user 저장하기
user 에게 항상 질문 할수 없다
뭔가를 저장하는 것은 아주 자주 사용되는 것이다
아이디 뿐만 아니라 유튜브의 사용자가 지정한 볼륨을
새로고침 해도 유튜브가 기억하고 있듯이 기억하기 는 아주 중요한 기능이다
위에서 확인 했듯이 "hidden" 클래스명을 갖고 있는것은 form 이다
여기서 브라우저에 뭔가를 기억할 수 있게 해주는 기능인 api를 살펴보자
그것은 local storage 이다
네이버 개발자도구를 열어 application-local storage를 확인해보자
local storage - api :
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
setItem 은 local storage에 정보를 저장할 수 있다
local storage.setItem() 으로 브라우저의 작은 db에 username이 저장되있는 것을 확인할 수 있다 이제 username의 값을 불러보자
getItem 으로 불러올 수 있다
그리고 removeItem으로 username을 제거할 수도 있다
localStorage.setItem("key", value);
key:"username" , value:username
localStorage.setItem("username", username);
user의 key,value가 저장 되어 있는 것이 확인 된다
그렇다면 localStorage의 user 유무를 확인을 어떻게 확인 할까?
if 조건문으로
hidden 되어 있는 form을 localStorage 가 user 정보가 없을 때 remove 메서드로 hidden클래스를 제거 시킨 뒤 form을 보여주고
그 외의 경우는 greeting 인 "Hello" string과 함께 username이 보여지도록 한다
이처럼 처음 입력 하였을 때 localStorage에 key, value가 저장되어
새로고침을 여러번 하여도 form이 나타나지 않는다
이 후 key, value를 삭제시킨 뒤 다시 새로고침 하면
form이 다시 나타나는 것을 확인 할 수있다
여기서 같은 동작을 반복 하고 있다는 걸 발견했을 것이다
기능은 동일하나 기존 문법을 편리하게 읽을 수 있는것 ->
편의 문법인class로 같은 동작을 묶어 함수로 만들어 적용해보자
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);greeting인 h1 태그에 텍스트와 변수 username을 할당 하는 동작과
greeting에 "hidden" 클래스를 제거하는 동작이 반복 되고 있다
이것을 class 함수로 만들어 코드를 좀더 편의성있고 가독성 좋게 만들어보자
username을 인자로 받는 paintGreetings() 함수를 만들어 중복 되는 일을 동작하게 만들었다
아래 if else문의 인자가 다른 이유는
localStorage 유저 정보는 변수 saveUsername에 있으니 거기서 유저 정보를 받아 인자로 넣기 때문에 다른 것이다
