검색어 추천이 있는 검색창 만들기

• useState를 통해 input값을 받고, onChange로 입력될 때마다 저장되도록 했다.

• 입력받는 과정에서 loadsh의 debound 기능을 추가하여 입력이 모두 끝나면 setState에 저장된다.

  • 지연 시간은 1000ms로 설정했다.

• console.count()를 이용해서 api가 몇 번 작동했는지 세도록 했다.

  • console.count('API Call') 이렇게 설정하면 콘솔에 API Call: [숫자] 이렇게 출력된다.

• useQuery 의 여러 옵션들 중 enabled과 staleTime를 설정했다.

  • enabled : enabled에 값을 넣으면 그 값이 참일 때 useQuery를 실행한다.
  • staleTime : 설정한 시간 동안 데이터가 stale 되지 않도록 해 refetch를 막을 수 있다.
    • stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다.

• inputValue가 거짓이면 null을 출력할 수 있도록 컴포넌트를 분리시켰다.

• 처음에는 API에서 받은 객체 데이터 그대로 리스트 컴포넌트로 전달하여 map을 통해 출력되도록 만들고자 헀다.

• 하지만 진행 과정에서 자꾸 items가 undefined라고 출력되었다.

• 결국은 res.data.response.body 이렇게 body부분만 보내서 totalCount, 와 item을 받을 수 있도록 했다.

• 참고 : 객체를 map으로 돌리려면 keys를 사용해야 한다.

• json to typescript

API 데이터 받아오기

• 데이터를 그냥 받아오려고 하면 CORS 에러가 발생했다.
• 그래서 proxy를 이용하였다.

1. package.json에 proxy 한 줄 추가하기

• "proxy": "http://apis.data.go.kr/B551182/diseaseInfoService"

2. ts 파일에 추가한 proxy 한 줄 빼고 나머지 url 작성해서 넣기

• const SEARCH_DISEASES_BASE_URL = ...

3. 디코딩된 서비스 키 넣기

• package.json 파일을 바꿨기 때문에 배포를 하게되면 다시 문제가 발생한다고 한다.
• 이를 해결하기 위해 http-proxy-middleware 를 사용해보려 헀으나 잘 되지 않아 추후에 진행해보려고 한다.