[TIL] 2022-05-18

malgam·2022년 5월 18일
0

TIL

목록 보기
11/21

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

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

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

    • 지연 시간은 1000ms로 설정했다.
  • console.count()를 이용해서 api가 몇 번 작동했는지 세도록 했다.

    • console.count('API Call') 이렇게 설정하면 콘솔에 API Call: [숫자] 이렇게 출력된다.
  • useQuery 의 여러 옵션들 중 enabledstaleTime를 설정했다.

    • 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"
  1. ts 파일에 추가한 proxy 한 줄 빼고 나머지 url 작성해서 넣기
  • const SEARCH_DISEASES_BASE_URL = ...
  1. 디코딩된 서비스 키 넣기
  • package.json 파일을 바꿨기 때문에 배포를 하게되면 다시 문제가 발생한다고 한다.
  • 이를 해결하기 위해 http-proxy-middleware 를 사용해보려 헀으나 잘 되지 않아 추후에 진행해보려고 한다.
profile
전 척척학사지만 말하는 감자에요

0개의 댓글