[javascript] 자바스크립트를 이용한 로그인 기능 테스트하기

08 Dec 2023

javascript

이번 글에서는 자바스크립트를 사용하여 간단한 로그인 기능을 테스트하는 방법에 대해 알아보겠습니다.

로그인 화면 만들기

먼저, HTML과 CSS를 사용하여 간단한 로그인 화면을 만듭니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>로그인</title>
</head>
<body>
  <div class="login-container">
    <h1>로그인</h1>
    <input type="text" id="username" placeholder="아이디">
    <input type="password" id="password" placeholder="비밀번호">
    <button onclick="login()">로그인</button>
    <p id="message"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

/* styles.css */
body {
  font-family: Arial, sans-serif;
}

.login-container {
  max-width: 300px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

input, button {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

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

이제, 자바스크립트 파일을 만들어 로그인 기능을 구현해봅시다.

// script.js
function login() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;

  if (username === 'user' && password === '1234') {
    document.getElementById('message').innerText = '로그인 성공!';
  } else {
    document.getElementById('message').innerText = '아이디 또는 비밀번호가 일치하지 않습니다.';
  }
}

테스트

이제 웹 브라우저에서 HTML 파일을 열어보고, 잘 동작하는지 테스트해보세요.

간단한 자바스크립트를 사용하여 로그인 기능을 테스트하는 방법에 대해 알아보았습니다. 이제 이를 활용해 실제 프로젝트에서 로그인 기능을 구현해볼 수 있을 것입니다.

참고 문헌: MDN web docs