포켓몬 API에 담긴 포켓몬의 이름과 사진을 프로미스로 처리하여 웹에 뿌려주는 웹 사이트를 제작하였다.
이것을 제작하기 위해 먼저 API를 분석했다.
분석 결과는 아래와 같다.
- 포켓몬은 1번(이상해씨)부터 시작하며, 20번 단위로 끊어져있다.
api에는 next와 previous라는 key가 존재한다.
다음 포켓몬 목록을 보기 위해서는 next 키 값에 담겨있는 api를 fetch해야 볼 수 있다.
이전 포켓몬 목록을 보기 위해서는 previous 키 값에 담겨있는 api를 fetch해야 볼 수 있다. - 포켓몬의 이름은 주어진 api를 fetch하면 바로 볼 수 있다.
포켓몬 사진을 보기 위해서는 포켓몬의 이름에 묶인 세부사항 api를 한번 더 fetch해야 한다.
일단 solve
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon Viewer</title>
</head>
<body>
<button class="leftButton">Previous</button>
<button class="rightButton">Next</button>
<div class="display"></div>
<script>
const leftButton = document.querySelector('.leftButton')
const rightButton = document.querySelector('.rightButton')
const display = document.querySelector('.display')
let previous = null // api에 있는 previous에 대한 주소를 받아옴. 초기값 null
let next = null // api에 있는 next에 대한 주소를 받아옴. 초기값 null
const pokeArray = [] // 포켓몬 이름과 사진주소를 저장할 배열
leftButton.addEventListener('click', (e) => {
fetchStart(previous)
}) // 왼쪽 버튼을 클릭하면 previous 주소로 fetch가 새로 시작됨.
rightButton.addEventListener('click', (e) => {
fetchStart(next)
}) // 오른쪽 버튼을 클릭하면 next 주소로 fetch가 새로 시작됨.
const fetchStart = (url) => fetch(url) // fetch를 동작하기 위한 함수
.then((data) => {
return data.json()}) // 먼저 받아온 data를 json()으로 활용할 수 있게 함.
.then((data) => {
const pokeName = data.results // data 객체의 results키에 포켓몬에 대한 객체 존재
pokeArray.length = 0 // pokeArray를 비워줌.
// 새로운 api 주소값을 각각 변수에 전달함
data.previous ? previous = data.previous : previous = null
data.next ? next = data.next : next = null
pokeName.forEach(poke => {pokeArray.push({name : poke.name})})
return pokeName // pokeArray 배열에 포켓몬 이름이 담긴 객체를 push함.
}).then((resultData) => {
const urlArray = resultData.map(data => {
// api 배열을 만듦 (정렬된 데이터를 얻기 위함)
return fetch(data.url)
.then((data) => data.json())
.then((data) => {return data.sprites.front_default})})
return Promise.all(urlArray)
// 배열 내 api를 제어하기 위해 promise.all을 이용함
}).then((result) => {
result.forEach((png, i) => {pokeArray[i].pic = png})
const inHTML = pokeArray.reduce((acc, data) => {
acc = acc + `<h1>${data.name}</h1><img src="${data.pic}">`
return acc},
'')
display.innerHTML = inHTML
})
// 포켓몬 그림 주소가 담긴 배열을 forEach를 통해 포켓몬 이름과 사진 주소를 함께 배치함
// reduce로 태그를 달고 마지막에 출력함.
fetchStart("https://pokeapi.co/api/v2/pokemon/")
// 첫 api 주소로 일단 fetchStart를 실행.
</script>
</body>
</html>일단 위의 코드는 정상적으로 작동한다.
하지만... 뭔가 모를 추잡함 + 거추장스러움은 잡을 길이 없다
.
일단은 다른 공부들이 시급한게 많아서 당장에 시간을 쏟기보다는
멋사 동기와 페어 프로그래밍을 할 때 다시 한번 풀어볼까 한다.
'Javascript' 카테고리의 다른 글
| [클래스] 클래스를 왜 배우는가? (0) | 2022.11.26 |
|---|---|
| 비디오 이벤트 연습(마우스 대면 플레이, 떼면 스탑 + 시간 카운트) (0) | 2022.10.31 |
| 이벤트 연습 / 마우스 좌표 찍기, input + keyup 이벤트 (3) | 2022.10.25 |
| 이벤트 드리븐 프로그래밍 / 자주 쓰는 이벤트 타입 (0) | 2022.10.25 |
| 간단 Jest 라이브러리 사용방법 (feat. TDD) (2) | 2022.10.21 |
