[javascript] API로 제시어 변경하기(2)
[javascript] API로 제시어 변경하기(2) — #javascript #randomwordAPI 학습목표 임의로 만든 제시어 배열을 API를 통해 데이터를 받아와서 제...
#Languages#Naver Blog
#javascript #randomwordAPI
학습목표
임의로 만든 제시어 배열을 API를 통해 데이터를 받아와서 제시어를 보여주도록 변경할 것 이다. API가 뭔지 모르겠다면 여기를 참고하기
API
random word API사이트
구글링을 통하여 randomword API를 가져오자.
구글링 했을 때 가장 처음에 등장하는 사이트로 접속 하겠다
| https://random-word-api.herokuapp.com/all |
|---|
API연결할 주소이다. 맨뒤에 /all은 저장된 모든 단어를 보이는 것을 의미한다.
| https://random-word-api.herokuapp.com/word?number=30 |
|---|
맨뒤에 all을 제거하고 word?number=원하는 수 를 입력하면 원하는 수만큼 데이터를 랜덤으로 가져온다.모두 해당 사이트에 들어가면 확인할 수 있다. API사용 방법은 제공하는 서버마다 다르기 때문에 제공 사이트에서 사용방법을 제시해 준다. 잘 확인하고 사용하면 된다.
API - Js에서 다루기
JS
| fetch("https://random-word-api.herokuapp.com/word?number=10") | fetch("API주소") - http : 데이터 가져오 |
|---|
| .then(function(response){ return response.json(); }) .then(function(result){ console.log(result); | .then 사용이유 : 비동기를 동기처럼 사용하기 위해function(response) -> response 변수에 데이터 담음return response.json(); -> response 데이터를 json화(객체처럼보이게)**\*return 사용이후 .json 값을 받기 위함 **function(result) -> API-json데이터가 result에 담긴다. |
|---|
API의 응답값이 함수의 첫번째 argument(매개변수)에 들어간다.
.json()으로 response를 객체화로 보이기 이전에 resonse를 콘솔에 찍은 결과값 => 너무 많은 데이터, 복잡하다...
response.json()을 실행 후 result에 담긴 데이터 ==> 배열형태로 단어만 깔끔하게 보여준다.
result값을 제시어로 출력하기
기존 JS
| let wordList = \["apple","banana","orange","mango"\];let count = 0; wordDisplay.innerText = wordList\[count\]; | wordList변수에 직접 단어를 담아 wordDisplay에 출력했다. |
|---|
변경 JS
| .then(function(result){ let wordList =result; wordDisplay.innerText = wordList\[count\]; } | API를 통해 서버에서 넘어온 데이터(json완료)를 wordList에 담아 출력한다. |
|---|
하고나니 정말 다양한 단어가 출력되는 것을 볼 수 있다.