바닐라 JS를 활용해 SPA로 구현한 고양이 검색 사이트

프로그래머스 2020 Dev-Matching: 웹 프론트엔드 개발자 (상반기) 과제
Vanilla JS 고양이 사진 검색기

👀 프로젝트 빌드 및 실행 방법

1. 상단 Code 버튼을 눌러 레포지토리를 클론 받습니다.

$ git clone https://github.com/Jeong-jeong/kittySearch.git

2. 패키지를 설치합니다.

$ yarn install

3. Live Server 등의 플러그인을 통해 로컬에서 실행할 수 있습니다.

🔥 프로젝트 과정 소개

요구사항을 처리하는 과정에서 studyDocs에 기록하였으며, 특히 어려웠던 부분은 별표(⭐️) 처리하였습니다.

  💡 특정 요구사항 해결과정을 확인하고 싶다면 클릭하여 링크를 따라가 주세요!

1. 코드 구조

• ES6 모듈 형태로 코드 변경하기
• async, await 문으로 수정하기

2. HTML, CSS

• 시멘틱 코드로 변경하기
• 반응형 처리하기
• 다크모드 지원하기 with localStorage

3. 이미지 상세보기 모달

• 768px 이하일 때 모달 길이 늘리기
• 모달 close 처리하기 ⭐️
• 모달에서 고양이 정보 불러오기
  • 모달 열고 닫기에 애니메이션 적용하기

4. 검색 페이지

• 검색 페이지 진입 시 focus 처리하기
• input 클릭 시 기존 키워드 삭제하기
• 필수 검색 결과 없을 때 UI 처리
• 최근 검색어 처리 ⭐️
• 새로고침 시 마지막 화면 유지하기
• 50마리 랜덤 고양이 사진 뿌리기
• 이미지 lazy 로딩 처리하기 ⭐️
• 고양이 사진 hover 시 이름 노출하기

5. 스크롤 페이징 구현 ⭐️

6. webpack 설정 및 배포