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

swing·2021년 3월 8일

[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);

👉 결과

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

[alias : "aps"]
: "alias"는 "별명"이란 뜻을 가진다. 즉 이 데이터는 "aps"란 별명을 가진 놈인가 보다.
[prefix : "i"]
: "prefix"는 "접두사"라는 뜻이다. 즉 "i"를 접두사로 가지는 데이터를 의미하는 것같다.
[suggestions : Array(12)]
: suggestions은 12개의 배열을 가진 녀석인데, 여기가 바로 데이터들의 집합소인듯 하다.

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

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);