JavaScript 및 jQuery 를 이용한 사용자 로그인 기능 구현 방법

소개

이 프로젝트에서는 JavaScript 와 jQuery 를 사용하여 사용자 로그인 기능을 구현하는 방법을 배우게 됩니다. 이 프로젝트는 데이터 동적화 (data dynamization) 분야를 포함하여 필수적인 프론트엔드 개발 기술을 개발하는 데 도움이 되도록 설계되었습니다.

👀 미리보기

성공적인 결과는 다음과 같습니다.

성공적인 로그인 인터페이스

실패한 결과는 다음과 같습니다.

실패한 로그인 시도 결과

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

jQuery 의 AJAX 기능을 사용하여 JSON 파일에서 사용자 데이터를 가져오는 방법
입력된 사용자 이름과 비밀번호를 사용자 데이터와 비교하여 유효성을 검사하는 방법
로그인 시도에 따라 적절한 성공 또는 실패 메시지를 표시하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

jQuery 의 AJAX 메서드를 사용하여 HTTP 요청을 하고 응답을 처리할 수 있습니다.
jQuery 를 사용하여 DOM 을 조작하여 로그인 결과에 따라 UI 를 업데이트할 수 있습니다.
사용자 입력을 로그인 기능과 통합하고 로그인 프로세스를 처리할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── bootstrap.min.css ## Bootstrap 파일
├── index.html ## 사용자 로그인 페이지
├── jQuery-3.6.0.min.js ## jQuery 파일
├── userlist.json  ## JSON 파일
├── login.js   ## 사용자 로그인을 위한 JavaScript 코드
├── index.html ## 사용자 로그인 페이지

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

사용자 데이터 가져오기

이 단계에서는 jQuery 의 ajax 함수를 사용하여 userlist.json 파일에서 사용자 데이터를 가져오는 방법을 배웁니다.

login.js 파일을 열고 login 함수를 찾습니다.
login 함수 내에서 다음 코드를 추가하여 userlist.json 파일에 AJAX 요청을 보냅니다.

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // The user data is now available in the 'data' parameter
      console.log(data);
    }
  });
}

이 코드는 userlist.json 파일에 GET 요청을 보냅니다.

사용자 로그인 검증

이 단계에서는 입력된 사용자 이름과 비밀번호를 AJAX 요청으로 얻은 사용자 데이터와 비교하는 방법을 배웁니다.

AJAX 요청의 success 콜백 함수 내에서 다음 코드를 추가하여 입력된 사용자 이름과 비밀번호가 사용자 레코드와 일치하는지 확인합니다.

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    let judge = data.userlist.some((item) => {
      return item.username == username && item.password == password;
    });
    // ...
  }
});

이 코드는 some 메서드를 사용하여 data.userlist 배열의 사용자 레코드 중 입력된 사용자 이름과 비밀번호와 일치하는 것이 있는지 확인합니다.

some 메서드 호출 후, 적절한 성공 또는 실패 메시지를 표시하기 위해 다음 코드를 추가합니다.

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    // ...
    if (judge) {
      $("#tip1").removeClass("fade");
      $("#tip2").addClass("fade");
    } else {
      $("#tip2").removeClass("fade");
      $("#tip1").addClass("fade");
    }
  }
});

이 코드는 jQuery 를 사용하여 페이지의 성공 및 실패 메시지 요소의 가시성을 조작합니다.

로그인 기능 통합

이 마지막 단계에서는 페이지의 사용자 입력 요소와 로그인 기능을 통합하는 방법을 배웁니다.

$(document).ready() 함수 내에서 "login" 버튼에 대한 클릭 이벤트 핸들러를 찾습니다.

$("#btnsubmit").click(function () {
  // TODO
});

클릭 이벤트 핸들러 내에서 다음 코드를 추가하여 입력된 사용자 이름과 비밀번호 값을 가져와 login 함수를 호출합니다.

$("#btnsubmit").click(function () {
  // TODO
  let username = $("#exampleInputUsername").val();
  let password = $("#exampleInputPassword").val();
  login(username, password);
});

이 코드는 사용자 이름 및 비밀번호 입력 필드에 사용자가 입력한 값을 검색한 다음, 이러한 값으로 login 함수를 호출합니다.

login.js 파일을 저장하고 브라우저에서 index.html 페이지를 새로 고칩니다. 다양한 사용자 이름과 비밀번호 조합을 입력하고 login 버튼을 클릭하여 성공 및 실패 메시지를 확인해 보세요.

성공적인 결과는 다음과 같습니다.

Successful login message display

실패 효과는 다음과 같습니다.

축하합니다! 사용자 로그인 기능 구현을 완료했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.