마스터 API 통합: DummyJSON 및 JSONPlaceholder를 사용하여 사용자 가져오기 및 표시

소개
이 게시물에서는 DummyJSON 및 JSONPlaceholder와 같은 API를 사용하여 동적으로 데이터를 가져오는 전문적이고 대화형 사용자 데이터 뷰어를 구축하겠습니다. 이 단계별 가이드는 HTML, CSS, JavaScript, 애니메이션 및 키프레임을 사용하여 멋진 UI를 만드는 데 도움이 됩니다. . 이 실용적인 예를 통해 면접관에게 깊은 인상을 남기거나 프로젝트 포트폴리오를 강화하세요.

1. API 개요:
사용자 데이터를 가져오기 위해 두 가지 API를 사용합니다:

• DummyJSON: 이름, 성별, 회사, 주소 등의 세부정보가 포함된 모의 사용자 데이터를 제공하는 다목적 API입니다. 여기에서 DummyJSON API를 살펴보세요.
• JSONPlaceholder: 모의 사용자 데이터를 테스트하기 위한 또 다른 훌륭한 API입니다. 여기에서 JSONPlaceholder API를 확인하세요.

2. 프로젝트 설정:
전제 조건:
HTML, CSS, JavaScript에 대한 기본 이해
코드 편집기(예: VS Code).
최신 웹 브라우저.
단계:
프로젝트 폴더를 만들고 다음 파일을 포함합니다.
index.html
스타일.css
script.js
index.html에서 CSS와 JavaScript 파일을 연결하세요.

3. 사용자 인터페이스 구축:
다음 섹션을 사용하여 반응형 UI를 만듭니다.

헤더: 프로젝트 제목을 표시합니다.
필터: 성별이나 부서별로 사용자를 필터링하는 버튼입니다.
사용자 목록: API에서 동적으로 로드된 사용자 이름을 표시합니다.
팝업: 이름을 클릭하면 사용자 정보가 표시됩니다.

4. API에서 데이터 가져오기:
JavaScript에서 Fetch API를 사용하여 데이터를 가져옵니다.

fetch('https://dummyjson.com/users')
  .then((response) => response.json())
  .then((data) => {
    const users = data.users;
    console.log(users); // Display the user data in the console
  });

5. 필터링 및 팝업 기능 구현:
필터링:
성별, 부서별 사용자 필터링 버튼을 추가합니다. 필터링된 데이터를 동적으로 표시하려면 JavaScript를 사용하세요.

팝업:
HTML 및 CSS 애니메이션을 사용하여 팝업 창을 만들어 개인 정보, 회사, 경력 연수 등 자세한 사용자 정보를 표시합니다.

6. 결론 및 다음 단계:
축하해요! 필터링 및 팝업 기능을 갖춘 전문적인 사용자 데이터 뷰어를 구축하셨습니다.

다음 단계:
사용자 정렬 옵션을 추가합니다(예: 알파벳순, 부서별).
더 많은 애니메이션과 테마로 더욱 강화하세요.
프로젝트를 온라인으로 배포하세요(Netlify 또는 GitHub 페이지).

리소스:
더미JSON 문서
JSON자리 표시자 API
CSS 키프레임 가이드

프로젝트 자원
GitHub 저장소: 동적 사용자 데이터 뷰어 프로젝트
라이브 데모: 여기에서 라이브 프로젝트를 확인하세요

위 내용은 마스터 API 통합: DummyJSON 및 JSONPlaceholder를 사용하여 사용자 가져오기 및 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!