프로미스, fetch, axios, async/await는 좋은 기능이다.
좋지만!
콜백지옥을 의도적으로 한번 경험해보자.
여기에서는 request라는 모듈을 사용할 것이다.
request는 uri에 response를 보내고, 요청받은 곳에서 전달한 자료를 받아오는 역할을 하는 라이브러리이다.
자료를 주고받는 기능이니만큼, 비동기적으로 동작한다.
request의 파라미터로는 uri와 콜백함수가 있으며
콜백함수는 에러메시지, response, 수신한 데이터를 파라미터로 한다.
request('uri', (err, response, data) => {})
콜백함수의 파라미터 중 하나가 요청한 주소(uri)를 통해 수신받은 데이터( (err, response, data) => {} )를 받으므로,
데이터에 어떤 가공을 해주기 위해서는 request의 콜백함수 내에서 모두 해결해야 할 것이다.
그리고 위의 전제조건에서 모든 지옥이 탄생한다.
콜백지옥을 만들어본 이유
- 프로미스가 얼마나 대단한지 알기위해
- 비동기 주의사항을 고려해보며 코드를 짜보기 위해
request('https://pokeapi.co/api/v2/pokemon/', (err, res, data) => {
const parsePokemonData = JSON.parse(data).results
const pokeArray = []
parsePokemonData.reduce((acc, pokemon) => {
request(pokemon.url, (err, res, data) => {
const parseWeight = JSON.parse(data).weight
pokeArray.push({name: pokemon.name, weight: parseWeight})
if (parsePokemonData.length === pokeArray.length) {
const bigpokemon = pokeArray.reduce((acc, e) => {
if (acc.weight < e.weight) {
return e
}
return acc
}, pokeArray[0])
console.log(`Heaviest Pokemon is ${bigpokemon.name} at ${bigpokemon.weight} pounds`);
}
})
},
{}
)
})
위의 api는 포켓몬의 정보를 수신받는 api이며,
코드는 api내 등록된 포켓몬 중 가장 무거운 포켓몬을 출력하는 코드이다.
api에서 받은 데이터 내 필요한 정보(포켓몬 무게)가 또 api화 되어 있어 총 2번의 request가 필요하다.
모든 포켓몬의 무게를 알아야하는데, 포켓몬들이 그룹화되어 있으므로 배열 고차함수를 이용해야 한다.
이때 배열 고차함수 외부에서 별도의 코드를 짜게되면 비동기 실행순서가 어그러진다.
따라서 모든 것을 그냥 다 함수 내부에서 해결해야 한다.
이러한 사유로, 코드 내부가 너무 더러워졌고 해석이 어렵다.
콜백지옥이란 것에서 확실히 얻어갈 키워드.
- 비동기적으로 프로그래밍을 짤 때, 별 다른 편의성 기능이 없이(ex. 프로미스, fetch 등) 프로그래밍을 하려면,
비동기 상황을 고려해서, 콜백 함수의 값을 사용하는 콜백을 사용하고, 또 콜백을 사용해야 한다. - 콜백함수를 계속 사용하면 코드의 가독성이 심하게 떨어진다.
- 따라서, 비동기적으로 프로그래밍을 짤 때, 가독성 및 생산성을 높이기 위해서는 프로미스나 async/await를 사용해야 한다.
'Javascript' 카테고리의 다른 글
이벤트 드리븐 프로그래밍 / 자주 쓰는 이벤트 타입 (0) | 2022.10.25 |
---|---|
간단 Jest 라이브러리 사용방법 (feat. TDD) (2) | 2022.10.21 |
this에 관하여 (2) | 2022.10.15 |
reduce 심화 학습 (오브젝트에 reduce 활용하기) (0) | 2022.10.13 |
new 키워드 (0) | 2022.10.12 |