자바스크립트에서 JSON 데이터를 이용하여 로그인 페이지 생성하기

15 Sep 2023

javascript

이번 블로그 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용하여 로그인 페이지를 생성하는 방법을 알아보겠습니다.

1. HTML 구조 설계

먼저, 로그인 페이지의 HTML 구조를 설계해야 합니다. 가장 간단한 형태로 아래와 같이 작성해 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>로그인 페이지</title>
</head>
<body>
  <h1>로그인</h1>
  <form id="loginForm">
    <label for="username">아이디</label>
    <input type="text" id="username" />
    <br>
    <label for="password">비밀번호</label>
    <input type="password" id="password" />
    <br>
    <input type="submit" value="로그인" />
  </form>
</body>
</html>

2. JSON 데이터 생성

JSON 데이터를 사용하여 아이디와 비밀번호를 저장합니다. 예를 들어, 아래와 같이 JSON 데이터를 작성해 보겠습니다.

const users = [
  {
    "username": "user1",
    "password": "password1"
  },
  {
    "username": "user2",
    "password": "password2"
  },
  {
    "username": "user3",
    "password": "password3"
  }
];

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

자바스크립트 코드를 사용하여 JSON 데이터와 입력된 아이디, 비밀번호를 비교하여 로그인 기능을 구현합니다. 아래와 같이 코드를 작성해 봅시다.

document.getElementById("loginForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 폼 제출 이벤트 방지
  
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  
  // JSON 데이터와 입력된 아이디, 비밀번호 비교하기
  const user = users.find(function(user) {
    return user.username === username && user.password === password;
  });
  
  if (user) {
    alert("로그인 성공!");
  } else {
    alert("아이디 또는 비밀번호가 잘못되었습니다.");
  }
});

위의 코드에서는 addEventListener 함수를 사용하여 폼의 제출 이벤트를 처리하고, 입력된 아이디와 비밀번호를 가져와서 JSON 데이터와 비교합니다. 일치하는 사용자가 있으면 “로그인 성공!” 메시지를 표시하고, 일치하는 사용자가 없으면 “아이디 또는 비밀번호가 잘못되었습니다.” 메시지를 표시합니다.

마무리

위의 단계를 따라가면 자바스크립트를 사용하여 JSON 데이터를 이용하여 로그인 페이지를 생성할 수 있습니다. JSON 데이터를 사용해 간단한 로그인 기능을 구현해보는 것은 웹 개발에서 기본적인 기능 중 하나입니다. 다양한 기능을 추가하고 보안을 강화하는 방법 등을 추가로 공부하여 더 나은 로그인 페이지를 만들어보세요!

#JavaScript #로그인