실습 과제: 랜덤 유저 카드 만들기

🎯 과제 목표

• Fetch API를 이용해 외부 데이터를 가져오는 연습을 합니다.
• DOM 조작을 통해 데이터를 화면에 출력하는 방법을 익힙니다.
• 간단한 카드 UI로 여러 데이터를 나열해 보는 경험을 합니다.

---

📌 요구사항

1. Random User API를 사용하여 20명의 사용자 데이터를 가져옵니다.

   • 요청 URL: https://randomuser.me/api/?results=20

2. 응답 데이터에서 다음 항목을 화면에 표시합니다.

   • 이름 (first + last)
   • 이메일
   • 전화번호
   • 프로필 사진 (thumbnail)

3. 각 사용자는 **카드 형태(Box)**로 표시되어야 합니다.

   • 20명의 카드가 화면에 그리드(혹은 flex) 형태로 나열되어야 합니다.
   • 카드 레이아웃은 자유롭게 디자인하되, 보기 좋게 배치해 주세요.

---

💡 실행 예시 (디자인 예시는 단순 참고용)

---

🚀 구현 단계 가이드

1. HTML 구조

   • index.html 파일을 만들고, <div id="user-list"></div> 컨테이너를 준비합니다.

2. 데이터 가져오기

   • script.js에서 fetch('https://randomuser.me/api/?results=20')를 사용하여 데이터를 요청합니다.
   • 응답을 .json()으로 변환 후 results 배열을 꺼냅니다.

3. DOM 조작

   • results 배열을 순회하며, 각 유저 정보를 카드 형태의 HTML로 만들어 #user-list 안에 추가합니다.

4. 스타일링

   • style.css를 만들어 카드가 그리드 혹은 flex 레이아웃으로 보기 좋게 배치되도록 합니다.
   • 카드에 테두리, 여백, 그림자 등을 추가해도 좋습니다.

---

🧑‍💻 심화 도전 과제 (선택)

• 검색창을 추가해서 이름으로 사용자 필터링하기
• 카드에 hover 효과 주기
• 로딩 중일 때 "Loading..." 문구 보여주기
• 에러 발생 시 "데이터를 불러올 수 없습니다." 표시하기

---

✅ 제출 방법

1. 이 Repo를 fork 뜬 후 과제를 진행합니다.
2. 브라우저에서 실행하여 20명의 카드가 잘 표시되는지 확인합니다.
3. 완성된 결과물을 과제-본인이름의 이름으로 아래 PR템플릿을 사용해 PR을 보내주시면 됩니다.

---

PR 템플릿

📛 제출자 정보

• 이름:

✅ 과제 달성 체크리스트

아래 항목들을 확인하고, 완료한 부분은 [x] 로 표시하세요.

• Random User API(https://randomuser.me/api/?results=20) 호출하기
• 20명의 사용자 데이터 화면에 표시하기
• 각 사용자 카드에 이름 출력
• 각 사용자 카드에 이메일 출력
• 각 사용자 카드에 전화번호 출력
• 각 사용자 카드에 프로필 사진 출력
• 카드 레이아웃을 flex/grid 형태로 배치
• 에러 발생 시 메시지 표시하기 (선택 과제)
• 로딩 상태 표시하기 (선택 과제)

---

📝 추가 설명 (선택)

• 과제를 하면서 배운 점:
• 구현하면서 어려웠던 점:
• 추가로 시도한 기능:
• 강사님께 하고 싶은 말:

---

📸 스크린샷 (선택)

과제 실행 화면 캡처를 첨부해 주세요.