개시하다

이번 주와 다음 주에 두 차례에 걸쳐 Udemy에서 배운 자바스크립트의 비동기 처리 기법을 발표한다.
이번 주에는 비동기 처리를 할 때 지옥으로 돌아가는 것을 피할 수 있는 프로미스를 썼다.

비동기 처리란?

많은 프로그래밍 언어에서 코드로 평가되는 방법은 동기화 처리(sync)와 비동기화 처리(async) 두 종류로 나뉜다.
※ 병행 처리는 생략합니다.
동기화 처리는 하나의 처리가 끝날 때까지 다음 처리를 하지 않는 순서대로 코드를 처리하는 것이다.
따라서 중간에 무거운 처리가 있으면 대기시간이 많이 걸리고 화면의 조작이 이루어지지 않아 좋지 않은 영향을 미칠 수 있다.
비동기 처리는 순서대로 코드를 처리하지만 비동기 처리가 끝날 때까지 기다리지 않고 다음 처리를 평가한다.
비동기 처리 중 여러 개의 동시 처리가 있다는 것이다.
이번에는 set Time Out을 사용하여 콘솔에 요리법을 출력하는 ID와 레시피를 만드는 사람을 실시한다.

회호지옥은 무엇입니까?

비동기식 프로세싱을 구현할 때 주의해야 할 사항은
여러 데이터를 읽고 읽은 데이터를 처리할 때
아래에 서술한 대로 처리하다.

function getRecipe(){
                setTimeout(() => {
                    const recipeID = [523, 883, 473, 974];
                    console.log(recipeID)

                    setTimeout((id) => {
                        const recipe = {title: 'Udon', publisher: 'Jacob'};
                        console.log(`${id}:${recipe.title}`);

                        setTimeout(publisher =>
                            const recipe = {title: 'Ramen', publisher: 'Tony'}
                            console.log(recipe)
                        }, 1500, recipe.publisher)
                    } ,1500, recipeID[2]);

                }, 1500);
            }
            getRecipe();

이처럼 호출 함수는 연속적으로'호출지옥'이라고 불린다.
상술한 코드는

深いネストにより可読性が低い

処理の追加／削除が大変

그렇게 말해도 되죠?
이 호출지옥을 피할 수 있는 건 프로미스야.

Promise 쓰기 사용

const getRelated = publisher =>{
                return new Promise((resolve, reject) =>{
                    setTimeout(pub =>{
                        const recipe = { title: 'Ramen', publisher: 'Tony' }
                        resolve(`${pub}: ${recipe.title}`);
                    }, 2000, publisher);
                });
            };

            const getIDs = new Promise((resolve, reject) =>{
                setTimeout(() =>{
                    resolve([523, 883, 473, 974]);
                }, 1500);
            });

            const getRecipe = recId =>{
                return new Promise((resolve, reject) =>{
                    setTimeout(ID =>{
                        const recipe = { title: 'Udon', publisher: 'Taro' };
                        resolve(`${ID}: ${recipe.title}`)
                    }, 2000, recId);
                });
            };

            getIDs
            .then(IDs => {
                console.log(IDs);
                return getRecipe(IDs[2]);
            })
            .then(recipe => {
                console.log(recipe);
                return getRelated('Tony');
            })
            .then(recipe => {
                console.log(recipe);
            })
            .catch(e => {
                console.log(e);
            });

결과는 성공과 실패 두 가지로 나뉜다.
성공할 때 매개 변수를 통해 전달되는 함수resolve를 호출이 실패할 때 매개 변수를 통해 전달되는reject로 설명합니다.
(이번에는 Reject 생략)
resolve () 의 값은then () 에서 받을 수 있고, Reject () 의 값은catch () 에서 받을 수 있습니다.
다음 주에는 프로미스보다 더 간결하게 가져오기 위한 async/await 기능입니다.

참고 자료

Udemy: The Complete JavaScript Course 2020: From Zero to Expert! (Lecture No.434)