[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <greeting.js>

 

  // 사용자의 이름을 화면에 표시하는 함수
function paintGreetings(username) {
    const greeting = document.querySelector("#greeting");
  // HTML에 JS 객체를 연결
    if (!greeting) return; // 요소가 없으면 종료
    greeting.innerText = `Hello ${username}`;
  // HTML의 <h1 id="greeting">에 Hello [사용자 이름] 형식의 텍스트를 삽입한다
    greeting.classList.remove("hidden");
  // hidden을 지워 숨겨져 있던 인사말을 화면에 표시한다
  }
  
  function onLoginSubmit(event) {
  // event를 괄호안에 쓰는 이유는 event 객체를 통해 이용 가능한 메서드 예를 들어 바로 아래있는 event.preventDefault() 등을 사용하기 위해서이다
    event.preventDefault();
  // 폼이 제출될 때 발생하는 기본 동작, 페이지 새로고침을 막는다
    const loginInput = document.querySelector("#login-form input");
  // HTML에 JS 객체를 연결
    if (!loginInput) return;
  // 값이 없을 경우 실행하지 않음
    const loginForm = document.querySelector("#login-form");
  // HTML에 JS 객체를 연결
    loginForm.classList.add("hidden");
  // 로그인 폼에  hidden 클래스를 추가해 폼을 화면에서 숨긴다
    const username = loginInput.value;
  // input의 value를 가져와 username으로 선언한다
    localStorage.setItem("username", username);
  // 로컬 스토리지의 username에 입력한 username을 저장한다
    paintGreetings(username);
  // paintGreetings(username) 함수가 실행되어 저장된 이름으로 인사말을 표시한다
  // 로그인 폼은 표시되지 않는다
  }
  
  // 초기화 함수
  export function initializeGreetings() {
    const loginForm = document.querySelector("#login-form"); // 로그인 폼 가져오기
    const savedUsername = localStorage.getItem("username"); // 로컬 스토리지에서 저장된 사용자 이름 가져오기
  
    if (!loginForm) return;
    // 로그인 폼이 로드 안되면 함수 종료
    
    if (savedUsername === null) {
    // 저장된 이름이 없으면
      loginForm.classList.remove("hidden");
    // 로그인 폼을 표시 (22행과 연결되는 내용)
      loginForm.addEventListener("submit", onLoginSubmit);
    // 폼 제출 이벤트 연결
    } else {
    // 저장된 이름이 있으면
      paintGreetings(savedUsername); // 인사말 표시
    }
  }

 

*local storage란? : 브라우저에 데이터를 저장할 수 있는 웹 스토리지(Web Storage) API 중 하나

사용자가 데이터를 로컬에 영구적으로 저장할 수 있도록 하며, 브라우저를 닫았다가 다시 열어도 저장된 데이터를 유지한다

데이터는 사용자가 명시적으로 삭제하거나 브라우저 데이터를 지우지 않는 한 영구적으로 유지된다