[javascript] 자바스크립트로 로그인 기능 구현하기

08 Dec 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 간단한 로그인 기능을 구현하는 방법에 대해 알아볼 것입니다.

HTML과 CSS 작성

먼저, 로그인 화면의 HTML과 CSS를 작성합니다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Login</title>
  </head>
  <body>
    <div class="login-container">
      <h2>Login</h2>
      <form id="login-form">
        <div>
          <input type="text" id="username" placeholder="Username" />
        </div>
        <div>
          <input type="password" id="password" placeholder="Password" />
        </div>
        <button type="submit">Login</button>
      </form>
      <p id="error-message"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

styles.css

/* CSS 코드 작성 */

자바스크립트 코드 작성

script.js

이제 자바스크립트로 로그인 기능을 구현합니다.

document.querySelector("#login-form").addEventListener("submit", function (e) {
  e.preventDefault();
  
  const username = document.querySelector("#username").value;
  const password = document.querySelector("#password").value;

  // 간단한 로그인 검증
  if (username === "user" && password === "password") {
    // 로그인 성공
    alert("로그인 성공!");
  } else {
    // 로그인 실패
    document.querySelector("#error-message").innerText = "잘못된 사용자명 또는 비밀번호";
  }
});

위의 코드에서는 form submit 이벤트를 감지하여, 입력된 사용자명과 비밀번호를 확인한 후에 로그인 성공 여부를 판단하고 메시지를 표시합니다.

이제 브라우저에서 index.html 파일을 열고, 사용자명과 비밀번호를 입력하여 로그인 기능이 동작하는지 확인할 수 있습니다.

정리하자면, 자바스크립트를 사용하여 간단한 로그인 기능을 구현하는 방법에 대해 알아보았습니다. 웹 어플리케이션을 개발할 때 유용하게 활용될 수 있는 기본적인 기능이므로, 기본적인 자바스크립트 이해와 함께 로그인 처리 방법에 대해 공부해보시기를 권장합니다.

참고 문헌: