중요 키워드

event.preventDefault()

event.preventDefault();

기본적인 이벤트의 동작을 막아주는 코드이다.

classList

  greetingForm.classList.add(USER__HIDDEN);
    greetingName.classList.remove(USER__HIDDEN);

자바스크립트를 사용하여 불러온 html에 class 를 추가하거나 제거해준다.

localStorage

localStorage.setItem(USER__CLASSNAME, newName);
localStorage.getItem(USER__CLASSNAME);

브라우저내에 사용자가 정한 데이터를 저장해준다. setItem
또한 getItem을 사용하여 데이터를 꺼내서 쓸수 있다. 첫번째에는 데이터의 저장 이름을 선택하고
두번째에는 저장할 데이터를 설정한다. 아이템을 꺼낼때에는 데이터의 키값만 넣으면 된다.

사용자 로그인 화면 만들기

/** Variables **/

const loginForm = document.getElementById("login-form");
const loginInput = document.getElementById("greeting__text");
const greeting = document.getElementById("greeting");
const loginUser = document.getElementById("loginUser");


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


/* Function  */

function onloginSumbit (event) {
  event.preventDefault(); <-- 1. 이벤트 동작을 막아준다.
  loginForm.classList.add(HIDDEN_CLASSNAME); <-- 2.Form에 hidden 클래스를 추가한다. 
  const userName = loginInput.value; <-- 3. input에 적어둔 value를 변수에 저장
  localStorage.setItem(USERNAME_KEY, userName); <-- 4. 적어둔 input을 스토리지에 저장.
  paintGreetings(userName); 5. paintGreetings 함수에 userName 변수를 넣어 실행한다. 
}

function paintGreetings (username) {
    greeting.innerText = `Good day ${username}`; <-- 1. h1에 텍스트에 Good day 와 
    전 함수에서 가져온 userName을 넣는다. 
    greeting.classList.remove(HIDDEN_CLASSNAME); <-- 2. hidden 클래스 를 제거한다.
    greeting.classList.add("login-form__title") 
    loginForm.classList.add(HIDDEN_CLASSNAME); <-- 3. form에 hidden 클래스를 넣는다.
 }


 const savedUsername = localStorage.getItem(USERNAME_KEY); <-- 스토리지에 저장된 데이터를 불러와서 변수로 만든다. 


if(savedUsername === null) { <-- 만약 저장된 이름이 아무것도 없다면
   loginForm.classList.remove(HIDDEN_CLASSNAME); <-- form에 hidden 클래스를 제거한다.
   loginForm.addEventListener("submit", onloginSumbit) <-- submit 함수를 실행한다.
   } else {  <-- 만약 저장된 이름이 있다면 
   paintGreetings(savedUsername); <-- paintGreetings 함수에 스토리지에 저장된 이름을 담아 실행한다. 
   }
   

1. index.html에 form을 만들고 그안에 input과 button을 만든다.
2. index.html에 h1을 추가하여 사용자가 input 에 이름을 적으면 h1에 Goodday 와 함께 사용자 이름이 나온게 한다.
3. greetings.js 를 만들고 html에 있던 form,input,button,h1을 변수로 저장해둔다.
4. localStorage에 이름이 없을경우 사용자가 새로 입력하여 submit하면 onLoginSubmit 함수가 실행 된다.
5. onLoginSubmit에서 이벤트 동작을 막고 form에 hidden 클래스 를 넣어서 form 을 숨긴다.
6. 사용자가 적은 이름을 담는 username 변수를 만들어 저장해준다.
7. localStorage.setItem()을 이용하여 username 변수를 저장한다.
8. paintGreetings(username) 을 담아 함수를 실행한다.
9. paintGreetings에서는 받아온 함수를 innerText에 넣는다.
   10.classList.remove 로 hidden을 제거 해준다.

1. savedUsername 변수에 전에 유저가 적었던 이름이 저장되 있을경우
2. paintGreetings(이미 저장된 유저이름) 을 넣어 실행한다.
3. paintGreetings를 반복한다.