Day28
Day28
고양이 사진 검색기 만들기
요구사항
- 검색 키워드를 입력하면 추천 검색어 API를 이용해 추천 검색어를 보여준다. 검색어 입력 후엔 엔터키 등 별도의 추가 액션이 없어도 검색어 목록을 보여주어야 한다.
- 키보드 혹은 마우스로 추천 검색어를 선택할 수 있게 한다.
- esc를 누르면 검색창이 닫힌다.
- 키보드의 위, 아래를 누르면 추천 검색어 하이라이트가 옮겨지고 엔터를 누르면 하이라이트 처리된 검색어가 반영된다.
- 마우스로 클릭한 검색어가 반영된다.
- 검색된 결과에 따라 고양이 사진이 화면에 렌더링 된다.
1
2
3
4
5
6
7
8
사용 API
https://mwu.roto-cat-search-api.programmers.co.kr/api/cats
/keywords?q={keyword} : : keyword에 해당하는 검색어를 조회한다.
/search?q={keyword} : keyword에 해당하는 고양이 사진을 검색합니다.
https://cdn.roto.codes/css/cat-search.css : 기본 마크업 구조
구현 기능
(2)
- 기본 화면 구성 및 키워드 입력 받기
(3)
- 검색 키워드를 추천해주는 API를 APP에서 호출하고 거기서 받은 데이터를 keyword라고 하는 component로 내려줘서 연관 검색어 내역을 보여주기
- 추천된 검색어 중에서 하나를 클릭하면 해당 값으로 input창의 값이 바뀌는 기능
- 추천된 검색어 창에서 key up, down을 입력했을 때 선택된 항목의 색깔이 바뀌는 기능
- 항목을 선택하고 enter를 누르면 검색창의 값이 해당 값으로 바뀌는 기능
(4)
- 키워드를 선택하면 해당 키워드로 search API를 호출하여 결과를 화면에 보여주는 기능
(5)
- debounce를 이용해서 keyword 입력 후에 API 콜을 조금 더 효율적으로 만든다.
- sessionStorage 이용하는 방법은 SPA의 기본 동작 구조를 벗어나서 this.cached라는 멤버를 생성하기 때문에 불필요하다고 느껴서 구현하지 않음.