윤시의 블로그

To-Do List 만들면서 정리한 JavaScript - login 본문

JavaScript

To-Do List 만들면서 정리한 JavaScript - login

yo09 2024. 10. 6. 17:56

 

 

1. Login 

const LoginInput = document.querySelctor('#login-form input');
const loginButton = document.querySelector('#login-form button');

// 사용자가 로그인 버튼을 클릭했을 때 실행될 함수 정의
function onLoginBtnClick() {
	console.log(loginInput.value);
}

// 로그인 버튼에 'click' 이벤트 리스너를 추가하고, 클릭 시 위에서 정의한 함수 실행
loginButton.addEventListener('click', onLoginBtnClcik);

 

 

1) JavaScript에서 submit 이벤트 처리하기

 

<form> 태그를 사용하여 입력 폼을 구현할 때, 사용자가 폼을 제출(submit)할 때 페이지가 새로고침되는 문제가 발생할 수 있다. 이는 브라우저가 폼을 제출할 때 기본적으로 페이지를 새로고침하는 동작을 수행하기 때문이다. 

 

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

// form이 제출될 때 실행할 함수를 정의
function onLoginSubmit(event) {
  // preventDefault()를 호출하여 폼의 기본 동작인 새로고침을 방지
  event.preventDefault();

  console.log(event);

  const username = loginInput.value;
  console.log(`User's name: ${username}`);
}

// loginForm에 'submit' 이벤트 리스너를 추가하고, onLoginSubmit 함수가 실행되도록 설정
loginForm.addEventListener('submit', onLoginSubmit);

onLoginSubmit 함수는 submit 이벤트가 발생할 때 호출되며,

event.preventDefault()를 통해 폼의 기본 동작(페이지 새로고침)을 방지한다.

 

event.preventDefault()는 브라우저가 특정 이벤트에 대해 수행하는 기본 동작을 막는 메서드. 폼을 제출하면 기본적으로 페이지가 새로고침되지만, 이 메서드를 사용하면 새로고침을 방지할 수 있다.

 

 

1-1) event 객체의 역할

모든 EventListener 함수의 첫 번째 인자는 이벤트 객체를 전달받는다. 이 이벤트 객체는 발생한 이벤트에 대한 다양한 정보를 담고 있으며, 이를 통해 이벤트의 세부 사항을 확인하고 제어할 수 있다.

  • 주요 속성:
    • event.type: 발생한 이벤트의 종류를 나타낸다. (예: 'submit', 'click')
    • event.target: 이벤트가 발생한 대상 요소를 참조한다.
    • event.currentTarget: 이벤트 리스너가 부착된 요소를 참조한다.
    • event.isTrusted: 이벤트가 사용자에 의해 발생했는지, 스크립트에 의해 생성되었는지를 나타다.

이벤트 리스너 함수의 첫 번째 인자는 항상 이벤트 객체이므로, 매개변수 이름은 event, e와 같이 자유롭게 설정할 수 있다. 중요한 것은 이름이 아니라, 이 객체가 이벤트에 대한 다양한 정보를 담고 있다는 점이다.

 

 

2) JavaScript를 사용하여 사용자가 이름을 제출하면 form이 사라지고, 환영 메시지 표시

 

 

HMTL 코드

<body>
  <!-- 사용자 이름을 입력받는 form -->
  <form id="login-form">
    <input type="text" maxlength="15" placeholder="What is your name?" required />
    <button>Log In</button>
  </form>
  <!-- 환영 메시지를 표시할 h1 요소, 처음에는 보이지 않도록 hidden 클래스가 추가되어 있음 -->
  <h1 class="hidden" id="greeting"></h1>

  <script src="app.js"></script>
</body>

 

 

css 코드

.hidden {
  display: none; /* 숨겨진 요소는 화면에 보이지 않음 */
}

 

JavaScript 코드

// #login-form 요소와 그 내부의 input, #greeting 요소를 변수에 할당
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector('#greeting');

// 자주 사용하는 'hidden' 클래스를 상수로 선언하여 관리
// 대문자로 선언한 이유는 문자열만 저장하는 상수로 사용하기 위함
const HIDDEN_CLASSNAME = 'hidden';

// 폼이 제출되었을 때 실행되는 함수
function onLoginSubmit(event) {
  event.preventDefault(); // 기본 동작(페이지 새로고침)을 막음

  // 1. 사용자가 입력한 이름을 가져와 변수에 저장
  const username = loginInput.value;

  // 2. 폼에 'hidden' 클래스를 추가하여 화면에서 숨김 처리
  loginForm.classList.add(HIDDEN_CLASSNAME);

  // 3. 환영 메시지를 설정하고, 'hidden' 클래스를 제거하여 화면에 표시
  greeting.innerText = `Hello, ${username}!`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

// loginForm이 제출될 때(onSubmit 이벤트 발생 시) onLoginSubmit 함수 실행
loginForm.addEventListener('submit', onLoginSubmit);

 

2-1) Form 숨기기 방식 

loginForm.classList.add(HIDDEN_CLASSNAME)대신,

loginForm.style.disply = 'none'을 사용하여 form 요소 자체를 화면에서 제거하여 완전히 보이지 않게 처리도 가능

 

 

3) local Storage

localStorage는 브라우저에 무언가를 저장할 수 있게 하고, 나중에 가져다 쓸 수 있게 해준다.

저장된 내역은 개발자 도구를 열어 Application -> Local Storage에서 확인 

 

 

Local Storage에 데이터를 저장

 localStorage.setItem('key', 'value');

 

 

Local Storage에서 데이터를 가져옴

 

 localStorage.getItem('key', 'value');

 

 

Local Storage에서 저장된 데이터 삭제

 localStorage.removeItem('key', 'value');

 

 

// #login-form 요소와 그 내부의 input, #greeting 요소를 변수에 할당
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector('#greeting');

// 자주 사용하는 'hidden' 클래스를 상수로 선언하여 관리
const HIDDEN_CLASSNAME = 'hidden';

// 폼이 제출되었을 때 실행되는 함수
function onLoginSubmit(event) {
  event.preventDefault(); // 기본 동작(페이지 새로고침)을 막음

  // 사용자가 입력한 이름을 가져와 변수에 저장
  const username = loginInput.value;

  // localStorage에 입력된 이름(username)을 저장하여, 새로고침해도 값이 유지되도록 함
  localStorage.setItem('username', username);

  // form 요소에 'hidden' 클래스를 추가하여 화면에서 숨김 처리
  loginForm.classList.add(HIDDEN_CLASSNAME);

  // 환영 메시지에 username을 표시하고, 'hidden' 클래스를 제거하여 화면에 보이도록 설정
  greeting.innerText = `Hello, ${username}!`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

// loginForm이 제출될 때(onSubmit 이벤트 발생 시) onLoginSubmit 함수 실행
loginForm.addEventListener('submit', onLoginSubmit);

'JavaScript' 카테고리의 다른 글

[JavaScript] (함수, 함수 표현식, 화살표 함수 기본)  (1) 2024.11.29
To-Do List 만들면서 정리한 JavaScript - 랜덤 출력  (14) 2024.10.09
To-Do List 만들면서 정리한 JavaScript - Timer  (1) 2024.10.08
[JavaScript] 기본 문법 정리 #2  (1) 2024.08.10
[JavaScript] 기본 문법 정리 #1  (0) 2024.07.26
'JavaScript' Related Articles more