[JavaScript] 중복되는 string 값들은 하나의 변수로 관리하자/ innerText()

반복되는 문자열의 경우 대문자 변수로 저장해서 사용하는게 좋다. 그래야 오타로 인한 실수를 줄일 수 있고 무엇보다 변수로 선언해서 활용하면 좋은 이유는 실수가 나더라도 콘솔창에서 오류를 발생시켜 준다는 것이다.

 

대문자 변수로 저장해 놓는다면, 실수를 만들고 싶지 않은 문자열 변수라는 것을 명목적으로 표기해 줄 수도 있는 것이다.

 

태그 안에 string을 넣어주고 싶을때, Element.innerText를 사용해준다.

 

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

const savedUsername = localStorage.getItem(USERNAME_KEY);

function paintGreetings() {
  const username = localStorage.getItem(USERNAME_KEY);
  greeting.innerText = `HELLO! ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, loginInput.value);
  paintGreetings();
}

if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings();
}