[미션2] 검색 페이지 문제 해결하기

[learn-programmers]

시작하기 전에

• 이번주차에는 상대적으로 코딩량이 많습니다.
• 작업 시작 전 index.html을 열어 앱에서 사용하는 js 파일 목록을 파악하고 각 역할을 짐작해 봅니다.

<script src="src/utils/validator.js"></script>
<script src="src/api.js"></script>
<script src="src/ImageInfo.js"></script>
<script src="src/SearchInput.js"></script>
<script src="src/SearchResult.js"></script>
<script src="src/App.js"></script>
<script src="src/main.js"></script>

필수 구현사항

로딩 컴포넌트 만들기

• 데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 유저에게 알리는 UI를 추가해야 합니다.

🔥TIP

• 로딩 컴포넌트 (ex) Loading.js)를 생성합니다.
• 로딩 컴포넌트의 라이프사이클(생성~제거)을 고려하여 state를 작성합니다. ex) {show:true}
• 로딩 컴포넌트를 검색 결과 컴포넌트에 조건에 따라 배치합니다.

검색 결과 없음(empty state) UI

• 검색 결과가 없는 경우, 유저가 불편함을 느끼지 않도록 UI적인 적절한 처리가 필요합니다.

🔥TIP

• 로딩 컴포넌트처럼 별도의 컴포넌트로 처리할 수 있습니다.
• 또는 검색 결과 컴포넌트에서 data에 따라 조건 분기를 할 수 있습니다.

랜덤 버튼 추가하기

• SearchInput 옆에 버튼을 하나 배치하고, 이 버튼을 클릭할 시 /api/cats/random 을 호출하여 화면에 뿌리는 기능을 추가합니다. 버튼의 이름은 마음대로 정합니다.

🔥TIP

• api.js에 random요청 메소드를 추가합니다.
• 랜덤 버튼 컴포넌트를 화면에 배치합니다.
• click이벤트에 fetch와 검색 결과 업데이트 구문을 작성합니다.

모달 제어

• 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다.
• 모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다.

🔥TIP

• 모달 띄우기는 이미 작성이 되어 있습니다. 이벤트 요청과 메소드 호출 구조를 파악합니다.
• 모달을 닫는 메소드를 작성합니다.
• 영역밖 클릭, ESC키 누름에 대한 이벤트를 작성하고 위 닫기 메소드를 호출합니다.

스크롤 & 다음 페이지 로딩

• 검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 만들어야 합니다.

• 과제 API 명세에 page에 대한 내용이 없습니다. 아래처럼 작업을 해주세요
  -- /cats/search?page=1, /cats/search?page=2처럼 엔드포인트에 page라는 파라미터를 추가해 주세요
  -- 1페이지는 파라미터를 붙일 필요 없습니다.
  -- page 파라미터를 제어하는 상태를 추가하여 작성해 보세요.

🔥TIP

• window.scroll 이벤트를 이용하여 검색 결과 화면의 제일 마지막 시점에 대한 이벤트를 작성합니다
• 추가로 요청된 검색 결과를 현재 검색 결과와 함께 렌더링합니다.

로컬스토리지 다루기

• 최근 검색한 키워드를 SearchInput 아래에 표시되도록 만들고, 해당 영역에 표시된 특정 키워드를 누르면 그 키워드로 검색이 일어나도록 만듭니다. 단, 가장 최근에 검색한 5개의 키워드만 노출되도록 합니다.
• 페이지를 새로고침해도 마지막 검색 결과 화면이 유지되도록 처리합니다.

🔥TIP

• 최근 검색 키워드에 대한 구조를 작성합니다. ex) '키워드1, 키워드2', ['키워드1', '키워드2']
• 최근 검색 키워드 컴포넌트를 작성하고, 더미 데이터를 넣어 잘 출력되는지 확인합니다.
• 로컬스토리지에서 데이터를 가져오는 메소드를 작성합니다.
• 로컬스토리지에 데이터를 넣는 메소드를 작성합니다. 이때 최대 갯수 제어, 조건문을 함께 고려합니다.
• 각 키워드 요소에 click 이벤트를 설정합니다
• 위와 같은 방식으로 마지막 결과 데이터를 로컬스토리지에 저장하고, 최초 로딩시 화면에 출력하는 코드를 작성합니다.

기타

• 페이지 진입 시 포커스가 input 에 가도록 처리하고, 키워드를 입력한 상태에서 input 을 클릭할 시에는 기존에 입력되어 있던 키워드가 삭제되도록 만들어야 합니다.

🔥TIP

• 검색어 컴포넌트에 state로 작성할 수도 있고 그렇지 않을 수도 있습니다.
• 문항에 나온 "input 을 클릭할 시"에 대해 한 번 더 고민해 보고 이벤트 구문을 작성합니다.

참고 자료

• 로컬 스토리지: https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
• auto focus: https://www.w3schools.com/tags/att_input_autofocus.asp