카드 바인딩 기능 구현

소개

이 프로젝트에서는 jQuery 와 AJAX 를 사용하여 카드 바인딩 기능을 구현하는 방법을 배우게 됩니다. 이 프로젝트는 프론트엔드 개발에서 중요한 기술인 데이터 동적화의 기본 사항을 이해하는 데 도움이 되도록 설계되었습니다.

👀 미리보기

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

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

🎯 과제

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

• JSON 파일에서 데이터를 검색하기 위해 jQuery 의 ajax 함수를 사용하는 방법
• 사용자 입력과 검색된 카드 데이터를 비교하는 방법
• 비교를 기반으로 성공 또는 실패 메시지를 표시하는 방법

🏆 성과

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

• jQuery 와 AJAX 를 사용하여 카드 바인딩 기능을 구현합니다.
• 프론트엔드 개발에서 중요한 기술인 데이터 동적화의 기본 사항을 이해합니다.
• AJAX 요청을 통해 서버에서 데이터를 검색합니다.
• 동적 콘텐츠를 표시하기 위해 jQuery 를 사용하여 DOM 을 조작합니다.
• Bootstrap 클래스를 사용하여 알림의 표시 및 숨김을 제어합니다.

프로젝트 구조 설정

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

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

├── index.html ## 카드 바인딩 페이지
├── bootstrap.min.css ## Bootstrap 파일
├── js
├───────cardnolist.json  ## JSON 파일
├───────index.js ## 완성될 코드가 있는 JavaScript 파일
├───────jquery-3.6.0.min.js ## jQuery 파일

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

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

카드 데이터 가져오기

이 단계에서는 jQuery 의 ajax 함수를 사용하여 js/cardnolist.json 파일에서 카드 데이터를 검색하는 방법을 배우게 됩니다.

1. js/index.js 파일을 엽니다.
2. bind 함수 내에서 다음 코드를 추가하여 cardnolist.json 파일에 AJAX 요청을 보냅니다.

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // The card data is now available in the 'data' variable
    console.log(data);
  });
}

이 코드는 js/cardnolist.json 파일에 AJAX 요청을 보냅니다.

카드 연동 기능 구현

이 단계에서는 사용자의 입력을 검색된 카드 데이터와 비교하는 카드 바인딩 기능을 구현합니다.

1. js/index.js 파일 내에서 bind(cardno, password) 함수를 찾습니다.
2. // TODO 주석을 다음 코드로 바꿉니다.

$.get("js/cardnolist.json", (data) => {
  let flag = data.cardnolist.some(
    (value) => value.cardno == cardno && value.password == password
  );
  if (flag) {
    $("#tip1").removeClass("fade").addClass("show");
    $("#tip2").removeClass("show").addClass("fade");
  } else {
    $("#tip2").removeClass("fade").addClass("show");
    $("#tip1").removeClass("show").addClass("fade");
  }
});

이 코드는 JSON 파일에서 카드 데이터를 검색하고, 사용자의 입력이 카드 번호 및 비밀번호와 일치하는지 확인한 다음, Bootstrap 클래스를 사용하여 적절한 성공 또는 실패 메시지를 표시합니다.

카드 연동 기능 테스트

1. js/index.js 파일을 저장하고 브라우저에서 index.html 페이지를 새로 고칩니다.

2. 유효한 카드 번호와 비밀번호 (예: "001431562123561238" 및 "123456") 를 입력하고 "submit" 버튼을 클릭합니다.

   • 성공 메시지가 표시되어야 합니다.

   

3. 유효하지 않은 카드 번호와 비밀번호를 입력하고 "submit" 버튼을 클릭합니다.

   • 실패 메시지가 표시되어야 합니다.

   

축하합니다! 카드 바인딩 기능을 성공적으로 구현했습니다.

요약

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