- THE CAT API를 이용해서 HTML, CSS, Vanilla Javascript 사용 능력을 기르기 위해 간단한 미니 프로젝트를 진행했다.
- 해당 repository를 clone 받은 후
index.html
을 열면 볼 수 있다. - 만약 안 되는 경우 visual studio code로 연 후
Live Server
extensions이 설치되어 있다는 가정 하에index.html
에서Live Server
로 열면 볼 수 있다.
- 가져올 고양이 데이터 개수를 정한 후
GET DATA!
버튼을 누르면 해당 개수만큼 고양이 정보를 볼 수 있다. - 랜덤 고양이 데이터 가져오기의
GET DATA!
버튼을 누르면 랜덤 고양이 데이터 60개를 가져오고 스크롤을 맨 아래로 내리면 자동으로 60개의 데이터를 더 가져온다.
- 입력 값이나 버튼이 눌렸을 때 데이터 가져오는 로직 수행하도록 기본 form 구성
- THE CAT API 이용해서 데이터 가져오기
- 가져온 데이터를 DOM에 그리기
- 추가로 Event Delegation을 이용해서 고양이 정보를 담은 container tag에 클릭 이벤트 리스너 부여하기
- Modal 만들기
- Modal이 보였다 안 보였다 구현하고 Modal 안의
CLOSE
버튼 누르면 Modal 닫기
- Modal이 보였다 안 보였다 구현하고 Modal 안의
- 무한 스크롤을 통해 랜덤 고양이 데이터 가져온 후 스크롤을 맨 아래로 내리면 60개의 데이터 추가로 가져오도록 구현
- 이미지에 대한 Lazy Loading 구현
- Loading Spinner 만들기
- TheCatAPI : https://thecatapi.com/