😺 프로그래머스 고양이 사진 검색 사이트 (Vainlia JS)

본 레포에는 2020 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 고양이 사진 검색 사이트
문제 풀이 후 복기하고 업데이트한 결과물을 담았습니다.
라이브러리나 프레임워크 없이 Vanilia JS로 구현하였으며,
복기를 통해 주요 구현 과정, 개념, 코드를 정리하고 CSS 커스터마이징 및 기능을 추가하였습니다.
복기 전 첫 풀이의 원본 코드는 https://github.com/kina94/Vanila-JS-Bowl 에서 확인할 수 있습니다.

바로가기

---

기능 설명🍀

• 랜덤 고양이 움짤 출력
  • 상단 놀라는 고양이를 누르면 랜덤한 고양이 움짤을 출력합니다.
• 랜덤 고양이 사진 출력
  • 오른쪽 하단의 고양이 버튼 클릭 시 랜덤한 고양이 사진을 출력합니다.
• 키워드 검색
  • 키워드 입력 후 엔터를 누르면 원하는 고양이 종류의 검색이 가능합니다. (API 서버가 불안정하여 로딩이 안 되는 경우가 있습니다.💦)
• 최근 검색 기록 관리
  • 검색 기록 추가 및 최근 검색 기록 삭제가 가능합니다.
• LocalStorage
  • 로컬스토리지를 이용하여 새로고침해도 최근에 검색된 고양이를 다시 불러옵니다.
• 반응형
  • 반응형을 지원합니다. 작은 화면에서는 최근 검색 기록 불가능합니다.

---

구현 과정🍰

1) 구현 사항

• 시맨틱한 코드
  
• LazyLoading
  
• 다크모드
  
• 사용 API 추가
  

2) 로직

• 필요한 렌더링
  
• 폴더 구조
  

3) 구현

• SearchInput.js
  • 요구사항 정의와 구현 코드
• SearchHistory.js
  • 요구사항 정의와 구현 코드
• SearchResult.js
  • 요구사항 정의와 구현 코드
• ImageInfo.js
  • 요구사항 정의와 구현 코드
• Loading.js
  • 요구사항 정의와 구현 코드
• DarkMode.js
  • 요구사항 정의와 구현 코드
• API.js
  • 요구사항 정의와 구현 코드
• main.js

import App from './App.js'
new App(document.querySelector("#App"));

• App.js
  • 요구사항 정의와 구현 코드