(Nomad Coder) 바닐라 JS를 사용하여 Momentum 클론 코딩하기 (2)_Login

쉬운 목차

입력 값

이름을 받을 입력과 버튼을 생성한 후 버튼 클릭을 감지하고 입력의 입력 값을 console.log 파일에 기록합니다.

// HTML
<body>
  <div id="login-form">
    <input type="text" placeholder="Whai is your name?" />
    <button>Log In</button>
  </div>

  <!-- html보다 js가 먼저 로드될 경우 js에서 지정한 요소를 못찾을 수 있어, body의 맨 마지막에 작성한다. -->
  <script src="http://oliviakim.m/app.js"></script>
</body>

// JavaScript

/*
const loginForm = document.querySelector('#login-form');
const loginInput = loginForm.querySelector('input');
const loginButton = loginForm.querySelector('button');
*/

// * 위의 코드를 더 짧게 바꿔보기
// 이와 같이 document 또는 하나의 element를 통해서 검색이 가능하다.
const loginInput = document.querySelector('#login-form input');
const loginButton = document.querySelector('#login-form button');

// 사용자가 버튼을 클릭했을 때를 감지해서 console.log에 찍는 이벤트 만들어보기
function onLoginBtnClick() {
  console.log(loginInput.value);
}

loginButton.addEventListener('click', onLoginBtnClick);

양식 제출

사용자 이름 유효성 검사를 진행합니다.

'추천 관련글,

사용자 이름은 비워둘 수 없습니다.
사용자 이름은 너무 길면 안 됩니다.

사용자가 입력한 값을 검증하는 것이 좋습니다. 사용자를 믿지 마세요!

조건에 따라 유효성을 검사하기 위해 다음과 같이 JS를 작성할 수 있습니다.

  if(username === '') {
    alert('Please write your name.');
  } else if(username.length > 15) {
    alert('Your name is too long.');
  }

위와 같이 JS로 검증하는 것이 좋다. 이미 가지고 있는 기능일단 사용하기 좋아요 최대 길이를 추가하고 입력에 필요함만들다!

단계, 입력 유효성 검사가 작동하려면 입력이 다음 범위 내에 있어야 합니다.

– 태그가 있습니다. 입력이 없으면 maxlength 및 required가 작동하지 않습니다.

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

  <script src="http://oliviakim.m/app.js"></script>
</body>

위와 같이 유효성 검사를 HTML로 설정한 후 로그인 버튼을 클릭하면, ‘업데이트’ 페이지문제 발생 업데이트 시 입력에 쓰여진 값이 사라집니다. 그 이유는 양식이 제출되었기 때문입니다.

입력에서 버튼을 누르거나 제출 유형의 입력을 클릭하면 양식이 제출됩니다.
양식에서 Enter 키를 누르고 더 이상 입력이 없으면 양식이 제출됩니다.

우리가 원하는 것은 브라우저가 사용자 정보를 업데이트하지 않고 저장하는 것입니다. 내가 어떻게 해

이벤트

위 코드에서 문제 상황인 submit 이벤트가 발생하지 않도록 하거나 중간에 개입하여 submit 이벤트가 발생했는지 확인하고자 합니다.

해결책을 찾기 위해 먼저 브라우저가 우리가 작성한 코드를 호출하고 전달하는 방법을 살펴보겠습니다.

loginForm.addEventListener('submit', onLoginSubmit);

위의 코드는 다음과 같은 순서로 진행됩니다.

제출 이벤트를 인식하는 브라우저는 지정된 onLoginSubmit을 호출합니다.
이 시점에서 브라우저는 and 함수를 호출합니다. 싸움(인자, 전달인자: 메서드 호출 시 실제로 전달된 값)with call 즉, onLoginSubmit은 onLoginSubmit()처럼 empty라고 하지 않고, () 안에 추가 정보가 있는 전화만들다!
이 정보의 핵심은 “일어난 일에 대해 필요할 수 있는 정보”전달되는 것이다 EventListen 함수의 첫 번째 인수는 항상 ‘방금 발생한 일에 대한 정보’입니다.

따라서 파라미터 부분에 정보를 읽을 수 있는 공간을 마련해 놓으면 읽을 수 있습니다. 어떤 종류의 정보가 전달되는지 확인하기 위해 다음 코드를 작성해 보겠습니다. onLoginSubmit()의 첫 번째 매개변수 이름은 아무 단어나 입력하여 확인할 수 있습니다.

function onLoginSubmit(olivia) {
    // 새로고침을 막는다.
    olivia.preventDefault();
    console.log(olivia);
}

loginForm.addEventListener('submit', onLoginSubmit);

요청된 업데이트를 차단하는 코드도 인수로 받아 콘솔에 기록되었습니다. 기본금지됨preventDefault의 역할로 확인할 수 있는 것은 각 이벤트의 기본 동작입니다.(기능에 대해 브라우저가 기본적으로 수행하는 작업)이것은 방지되어야 합니다. 따라서 폼을 제출할 때 기본 동작은 새로 고침이므로 적절한 코드를 작성하여 새로 고침을 차단할 수 있습니다.

사용자 이름 얻기

이제 사용자가 이름을 입력하면 폼(입력, 버튼)을 직접 제거(=== HTML 요소를 제거하여 화면에 보이지 않게)하는 구현을 합니다.

// HTML
<body>
  <form id="login-form">
    <input type="text" maxlength="15" placeholder="Whai is your name?" required />
    <button>Log In</button>
  </form>
  <h1 class="hidden" id="greeting"></h1>

  <script src="http://oliviakim.m/app.js"></script>
</body>

// CSS
.hidden {
  display: none;
}

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

// 'hidden'을 두 번 사용하고 있으니 아예 변수로 선언해서 오류 발생의 위험을 줄인다.
// string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용한다.
const HIDDEN_CLASSNAME = 'hidden';

function onLoginSubmit(event) {
  event.preventDefault();

  // 1. username을 입력했을 때, className 'hidden'을 부여해 화면에서 보이지 않게 한다.
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);

  // 2. 화면에 숨겨뒀다가 username이 입력되면 화면에 보여주는 HTML 요소를 추가한다.
  greeting.innerText = `Hello, ${username}!`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener('submit', onLoginSubmit);

사용자 이름 설정

매번 입력할 필요가 없도록 사용자가 입력한 사용자 이름을 저장해 두겠습니다. 저장소는 로컬 저장소를 사용합니다.

로컬 저장소를 사용하면 브라우저에 항목을 저장할 수 있습니다. 그래서 나중에 사용할 수 있습니다. 저장된 내용은 Application > Local Storage에서 개발자 도구를 연 후 확인할 수 있습니다.

로컬 저장소에 항목 저장

localStorage.setItem(‘키’, ‘값’);

로컬 저장소에 저장된 데이터 가져오기

localStorage.getItem(‘키’, ‘값’);

로컬 저장소에 저장된 데이터 삭제

localStorage.setItem(‘키’, ‘값’);

위의 코드를 사용하여 몇 가지 코드를 작성해 보겠습니다.

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

// 'hidden'을 두 번 사용하고 있으니 아예 변수로 선언해서 오류 발생의 위험을 줄인다.
// string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용한다.
const HIDDEN_CLASSNAME = 'hidden';

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  // localStorage에 사용자가 입력한 username 저장해두기
  localStorage.setItem('username', username);
  loginForm.classList.add(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello, ${username}!`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener('submit', onLoginSubmit);

사용자 이름 로드 중

사용자 이름이 로컬 저장소에 존재하는지 확인하고 존재하는 경우 양식을 화면에 보이지 않게 하고 h1을 표시합니다.

// HTML
<body>
  <form class="hidden" id="login-form">
    <input type="text" maxlength="15" placeholder="Whai is your name?" required />
    <button>Log In</button>
  </form>
  <h1 class="hidden" id="greeting"></h1>

  <script src="http://oliviakim.m/app.js"></script>
</body>

// JavaScript

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

// 본인이 생성한 string을 반복하게 사용하게 될 경우에는
// 반복되는 string들을 대문자 변수에 저장해놓는 것이 좋다.
// 추후 오타가 났다면 js가 감지해서 오류 알림을 띄워주기 때문이다.
const HIDDEN_CLASSNAME = 'hidden';
const USERNAME_KEY = 'username';

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  // localStorage에 사용자가 입력한 username 저장해두기
  localStorage.setItem(USERNAME_KEY, username);
  loginForm.classList.add(HIDDEN_CLASSNAME);
  paintGreetings(username);
}

// h1을 보여주기
function paintGreetings(username) {
  greeting.innerText = `Hello, ${username}!`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}


// localStorage에 username값이 있는지 확인하기
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null) {
  // form을 보여주기
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener('submit', onLoginSubmit);
} else {
  paintGreetings(savedUsername);
}

(참고 자료)

https://nomadcoders.co/javascript-for-beginners

Vanilla JS로 Chrome 앱 빌드 – Nomad Coders

초보자를 위한 자바스크립트

nomadcoders.co