로그인은 많은 웹 애플리케이션에서 필수적인 기능 중 하나입니다. 이번 글에서는 자바스크립트를 사용하여 간단한 로그인 기능을 구현하는 방법에 대해 알아보겠습니다.

HTML 구조 작성

먼저, 로그인 폼의 HTML 구조를 작성해야 합니다. 다음은 로그인 폼의 기본 구조입니다.

<form id="loginForm">
  <input type="text" id="username" placeholder="아이디" required>
  <input type="password" id="password" placeholder="비밀번호" required>
  <button type="submit">로그인</button>
</form>

위 코드에서는 로그인을 위한 아이디와 비밀번호 입력 필드, 그리고 로그인 버튼을 포함한 폼을 작성하였습니다.

자바스크립트 코드 작성

폼의 HTML 구조를 작성했다면, 이제 자바스크립트 코드를 작성해야 합니다. 자바스크립트 코드를 사용하여 입력된 아이디와 비밀번호를 확인하고 로그인 동작을 수행합니다.

const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');

loginForm.addEventListener('submit', (e) => {
  e.preventDefault();
  
  // 입력된 아이디와 비밀번호 가져오기
  const username = usernameInput.value;
  const password = passwordInput.value;
  
  // 로그인 동작 수행
  if (username === 'admin' && password === 'password') {
    alert('로그인 성공!');
    // 로그인 성공 후 처리할 내용
  } else {
    alert('아이디 또는 비밀번호가 올바르지 않습니다.');
    // 로그인 실패 후 처리할 내용
  }
});

위 코드에서는 getElementById 메소드를 사용하여 HTML 요소와 자바스크립트 변수를 연결합니다. addEventListener 메소드를 사용하여 폼의 submit 이벤트를 감지하고 로그인 동작을 수행합니다. e.preventDefault()를 호출하여 폼의 기본 동작을 방지합니다.

로그인 동작에서는 입력된 아이디와 비밀번호를 확인한 뒤, 조건에 따라 로그인 성공 또는 실패를 알립니다. 조건문에는 임의의 아이디(‘admin’)와 비밀번호(‘password’)를 사용하였습니다. 필요에 따라 이 부분을 실제 사용자 정보와 비교하는 로직으로 변경해야 합니다.

실행 및 테스트

작성한 자바스크립트 코드를 실행하고 테스트해봅시다. 작성한 코드가 포함된 HTML 파일을 웹 브라우저로 열거나, 간단한 웹 서버에서 실행해서 동작을 확인할 수 있습니다.

아이디와 비밀번호 입력 후 로그인 버튼을 클릭하여 로그인 동작을 수행하면, 입력한 내용을 확인한 뒤 로그인 성공 또는 실패 알림이 팝업으로 표시됩니다.

자바스크립트를 사용한 로그인 기능 구현은 이렇게 간단합니다. 실제 웹 애플리케이션에서는 보안과 사용자 경험을 고려하여 더욱 복잡한 구현이 필요할 수 있습니다.