[크롬 앱] 로그인 기능 구현

자바스크립트에서 Form 만들기

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

function btnClick() {
  const username = loginInput.value;
  if (username === "") {
    alert("Please write your name");
  } else if (username.length > 15) {
    alert("Your name if too long.");
  }
}

loginButton.addEventListener("click", btnClick);

하지만 이미 html에서 form 기능 구현이 가능하다.

<form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log In</button>
</form>

html에서 form을 구현하기 위해서 input이 form 안에 들어가 있어야 한다.

html에서 값을 입력하면 새로고침 되면서 값이 사라져버림

유저에게 인사하기

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

function submitForm() {
  const username = loginInput.value;
  console.log(username);
}

loginForm.addEventListener("submit", submitForm);

// // 브라우저 자체 기능을 사용할 수도 있다.

값이 사라지지 않도록 중간에 print문을 찍어주었지만, 새로고침 되면서 값이 사라져버림

-> 해결방법?
바로 사라지지 않도록 동작을 멈춘다.
우리는 addEventListener에 function을 설정하고(왜냐하면 event 설정에 있어서 함수를 실행시키는 것이 아니라 event가 발생했을 때 함수를 실행시켜주기 때문이다.) 이때 function의 실행은 브라우저에 의해서 실행된다. 때문에 새로고침 하기전에 브라우저 동작을 멈추게 하면 된다.

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

function submitForm(event) {
  
  event.preventDefault();
  console.log(loginInput.value);
}

loginForm.addEventListener("submit", submitForm);

form의 기본 동작은 submit이다.

addEventListener에 두번째 인수로 들어가는 함수의 첫번째 인수는 암묵적으로 event의 정보가 담긴 객체가 입력된다.

이때 그 이벤트의 동작을 멈추면, 브라우저의 기본 동작을 멈추게 된다.

브라우저의 기본 동작이 멈추게 되면서 입력 정보 값을 얻을 수 있다.

로그인 입력이 일어나면 다음으로 로그인 form이 없어져야 한다.

첫번째 방법은 classList.add를 사용하여 hidden class를 생성하여 display = none으로 설정하는 방법이다.

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

function submitForm(tomato) {
  tomato.preventDefault();
  console.log(tomato);
  const username = loginInput.value;
  loginForm.classList.add("hidden");
  console.log(username);
}

loginForm.addEventListener("submit", submitForm);

hidden으로 숨겨진 값을 다시 가져오는 방법은 hidden을 적용한 h1의 태그를 가져오고, ClassList를 활용하여 hiddend을 remove해주어 저장된 값을 다시 나타나게 해준다.

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

const HIDDEN_CLASSNAME = "hidden";

function submitForm(tomato) {
  tomato.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  // greeting.innerText = "Hello " + username;
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", submitForm);

user의 이름을 localstorage에 저장하기

function submitForm(tomato) {
  tomato.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem("username", username);
  // greeting.innerText = "Hello " + username;
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

새로고침 해도 정보를 남아있게 하는 방법

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", submitForm);
} else {
  // show the greetings
  greeting.innerText = `Hello ${savedUsername}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

정보가 저장된 경우는 함수로 만들어서 코드 길이 줄이기

function submitForm(tomato) {
  tomato.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username);
  // greeting.innerText = "Hello " + username;
  paintGreetings(username);
}

function handleLinkClick(event) {
  event.preventDefault();
  console.dir(event);
}

// loginForm.addEventListener("submit", submitForm);

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

if (savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", submitForm);
} else {
  // show the greetings
  paintGreetings(savedUsername);
}