[TIL] Fetch API를 이용한 Open API 사용하기

swing·2021년 3월 8일
5

[TIL]

목록 보기
2/10

🤷‍♂️ [자동완성키워드] 들의 저 방대한 데이터를 어떻게 가져올까?..


  • 키워드가 입력될때 마다 서버에서 데이터를 받아와야 하는데,
    로컬에 그런 엄청난 데이터를 내가 구축할 수 있는가? 에 대한 막막함으로 이 글을 시작한다.
  • 일단 현실적으로 나혼자 그 데이터를 구축하는 건 불가능하다고 판단했다.
  • 일단 수업에서 힌트를 얻어, 어느 도메인이나 요청을 받아주는 착한 아마존의 데이터를 써보도록 하자.
  • 먼저 아마존 검색창에 키워드를 입력했을때, 가져오는 데이터를 살펴보자.
  • 개발자도구 -> 네트워크 -> 키워드입력시 받아오는 데이터 (suggestions?session blah~~~)를 살펴보자.

https://completion.amazon.com/api/2017/suggestions?session-id=133-4736477-7395454&customer-id=&request-id=4YM3EXKRH1QJB16MSJGT&page-type=Gateway&lop=en_US&site-variant=desktop&client-info=amazon-search-ui&mid=ATVPDKIKX0DER&alias=aps&b2b=0&fresh=0&ks=8&prefix=iph&event=onKeyPress&limit=11&fb=1&suggestion-type=KEYWORD&suggestion-type=WIDGET&_=1615209935015

👉 이게 뭐지 .. 잘 모르니까 데이터 두개를 비교해서 뭐가 뭔지 알아보자..

https://completion.amazon.com/api/2017/suggestions?session-id=133-4736477-7395454&customer-id=&request-id=4YM3EXKRH1QJB16MSJGT&page-type=Gateway&lop=en_US&site-variant=desktop&client-info=amazon-search-ui&mid=ATVPDKIKX0DER&alias=aps&b2b=0&fresh=0&ks=8&prefix=ipho&event=onKeyPress&limit=11&fb=1&suggestion-type=KEYWORD&suggestion-type=WIDGET&_=1615209934872

👉 URL의 구조


Foo://example.com:8402/over/there?name=ferret#nose

  • Foo : scheme
  • example.com:8402 : authority
  • over/there : path
  • name=ferret : query
  • Nose : fragment

https://www.google.com/seatch?q=hello&hl=ko

  • Scheme://[userinfo@]host[:port][/path][?query][#fragment]

  • Scheme (https://) (Scheme://)

    • 주로 프로토콜이 사용됨
    • 프로토콜 : 어떤 방식으로 자원에 접근할 것인가 하는 약속
      • 예 ) http , https , ftp 등등
      • http나 https는 포트를 하나만 써서 포트 생략가능
      • https는 http에 강력한 보안을 추가한 것

  • userinfo ([userinfo@])

    • URL에 사용자 정보를 포함해서 인증해야 될 때 사용
    • 거의 사용하지 않음

  • host (www.google.com) (host)

    • 호스트명
    • 도메인명 또는 ip 주소를 직접 사용가능하다.

  • Port (443) (:port)

    • 접속 포트
    • 일반적으로 생략함 (http : 80 / https : 443)
    • 특정 서버에 따로 접속할 땐 사용

  • Path (search)

    • 계층적 구조 , 리소스 경로
      • /home/file1.jpg
      • /members
      • /members/100 , /items/iphone12

  • Query (?q=hello&hl=ko) (?query)

    • Key = value 형태
    • ?로 시작, &로 추가 가능 ?keyA=valueA & keyB=valueB
    • 쿼리파라미터,쿼리 스트링 등으로 불림, 웹서버에 제공하는 파라미터, 문자 형태
    • 파라미터식으로 웹서버에 제공하며, 숫자를 넣어도 문자 형태로 넘어간다.

  • Fragment (#fragment)

    • HTML 내부 북마크 등에 사용된다.
    • 서버에 전송하는 정보는 아니다!

👉 내가 요청하는 데이터의 구조를 파악해보자!

  • https://completion.amazon.com/api/2017/suggestions

    • scheme : https
    • completion.amazon.com : host
    • api/2017/suggestion : path
  • ?session-id=133-4736477-7395454&

  • customer-id=&

  • request-id=VQVA4AYCTWCV6E4E7V43&

  • page-type=Gateway&

  • lop=en_US&

  • site-variant=desktop&

  • client-info=amazon-search-ui&

  • mid=ATVPDKIKX0DER&

  • alias=aps&

  • b2b=0&

  • fresh=0&

  • ks=undefined&

  • prefix=codesqaud&

  • event=onFocusWithSearchTerm&

  • limit=11&

  • fb=1&

  • suggestion-type=KEYWORD&

  • suggestion-type=WIDGET&

  • _=1615532810376'

그 외의 모든 것은 쿼리 !!


👉 일단 첫번째 데이터를 fetch api를 통해 Json형태로 받아와 콘솔에 출력해보자.

fetch(
  "https://completion.amazon.com/api/2017/suggestions?session-id=133-4736477-7395454&customer-id=&request-id=4YM3EXKRH1QJB16MSJGT&page-type=Gateway&lop=en_US&site-variant=desktop&client-info=amazon-search-ui&mid=ATVPDKIKX0DER&alias=aps&b2b=0&fresh=0&ks=8&prefix=iph&event=onKeyPress&limit=11&fb=1&suggestion-type=KEYWORD&suggestion-type=WIDGET&_=1615209935015"
)
  .then((res) => res.json())
  .then(console.log);

👉 결과

fetch URL 결과

👉 이걸 보니 대충 중요한 특징들이 보이는 것 같다. 내가 이해한 데로 살펴보자면

  • [alias : "aps"]
    : "alias"는 "별명"이란 뜻을 가진다. 즉 이 데이터는 "aps"란 별명을 가진 놈인가 보다.

  • [prefix : "i"]
    : "prefix"는 "접두사"라는 뜻이다. 즉 "i"를 접두사로 가지는 데이터를 의미하는 것같다.

  • [suggestions : Array(12)]
    : suggestions은 12개의 배열을 가진 녀석인데, 여기가 바로 데이터들의 집합소인듯 하다.


👉 suggestions 파악을 위해 아마존 검색창을 들여다 보자.

amazon search
  • iph 까지 검색했을때 , suggestions의 데이터들이 검색 키워드로 들어가 있음을 볼 수 있다.
  • 여기서 맨 위가, [type : "WIDGET"]의 value 인 듯하다.
  • 나머지는 [type: "KEYWORD"]를 갖는 value들 인 걸 파악할 수 있다.

👉 자 이제 다시와서, URL을 살펴보자.

https://completion.amazon.com/api/2017/suggestions?session-id=133-4736477-7395454&customer-id=&request-id=4YM3EXKRH1QJB16MSJGT&page-type=Gateway&lop=en_US&site-variant=desktop&client-info=amazon-search-ui&mid=ATVPDKIKX0DER&👏alias=aps&b2b=0&fresh=0&ks=8&❗️prefix=iph❗️&event=onKeyPress&limit=11&fb=1&suggestion-type=KEYWORD&suggestion-type=❗️WIDGET&_=1615209935015❗️👏

https://completion.amazon.com/api/2017/suggestions?session-id=133-4736477-7395454&customer-id=&request-id=4YM3EXKRH1QJB16MSJGT&page-type=Gateway&lop=en_US&site-variant=desktop&client-info=amazon-search-ui&mid=ATVPDKIKX0DER&👏alias=aps&b2b=0&fresh=0&ks=8&❗️prefix=ipho❗️&event=onKeyPress&limit=11&fb=1&suggestion-type=KEYWORD&suggestion-type=❗️WIDGET&_=1615209934872❗️👏

  • 👏" "👏 처리는 핵심 포인트 인 것 같아 표시해 보았다.
  • ❗️" "❗️ 처리를 한 곳만 다름을 확인할 수 있다.
  • 즉 어떠한 경로에 👏alias = aps | prefix = iph (입력한 키워드) | suggestion-type = KEYWORD & suggestion-type = WIDGET&_=1615209935015 (아마도 id값..?)👏 으로 확인이 된다!
  • 우리는 input에 따른 데이터만 받아오면 되기 때문에 prefix = "input value"를 넣어주면 될 것 같다!

👉 자 이제 ! 다른 도메인에서 원하는 아마존 데이터를 받아와 콘솔에 출력해보자!

// swing을 입력한 데이터를 받아와보자

const inputValue = "swing";

//suggestion-type=WIDGET은 필요없어서 지웠다.
fetch(
  `https://completion.amazon.com/api/2017/suggestions?session-id=133-4736477-7395454&customer-id=&request-id=4YM3EXKRH1QJB16MSJGT&page-type=Gateway&lop=en_US&site-variant=desktop&client-info=amazon-search-ui&mid=ATVPDKIKX0DER&alias=aps&b2b=0&fresh=0&ks=71&prefix=${inputValue}&event=onKeyPress&limit=11&fb=1&suggestion-type=KEYWORD`
)
  .then((res) => res.json())
  // sugestions의 value만 mapping
  .then((data) => data.suggestions.map((v) => v.value))
  .then(console.log);

👉 결과

로컬에서 아마존 데이터 받아오기
  • 보이는 데로 로컬서버(다른도메인)에서 Template literals을 활용해 원하는 input을 포함한 URL로 만들어 요청하고, 데이터 파싱과정을 거쳐 콘솔에 잘 찍혔다 !
  • 이런 느낌으로 사용하면 될 것 같다!!
profile
if(기록📝) 성장🌱

4개의 댓글

comment-user-thumbnail
2021년 3월 10일

덕분에 데이터 금방 불러왔네요!! 덕분에 미션 해결이 수월해졌습니다~~~!

답글 달기
comment-user-thumbnail
2021년 3월 10일

스윙~ 단계별로 자세하게 정리해주셔서 정말 감사해요🥺 이해가 아주 쏙쏙 잘 되네요!!!

답글 달기
comment-user-thumbnail
2021년 3월 13일

스윙 정리 잘해주셔서 너무 감사합니다 덕분에 하나하나 보면서 해볼게요 👊🏻
+swing... 저 지금 다시 보고 있는데 이해가 정말정말정말 잘되네요.
3월 최고의 코쿼인으로 등재하겠습니다

답글 달기
comment-user-thumbnail
2021년 3월 18일

오오 글이 자세해서 보기만 해도 이해가 쏙쏙되네여!!!!! 좋은 글 감사합니다^0^

답글 달기