인간 JS 엔진 되기 02

본 포스팅은 제로초님의 유튜브 강좌 '인간 JS 엔진 되기'를 통해 학습하며 작성하였습니다.

 

2-0. Promise, async/await

프로미스란, 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체다. 

const condition = true;
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});

// 다른 코드가 들어갈 수 있음

promise
    .then((message) => {
    	console.log(message); // 성공(resolve)한 경우 실행
    })
    .catch(error) => {
    	console.error(error); // 실패(reject)한 경우 실행
    }

 

resolve(성공 리턴 값)는 then으로 연결되고, reject(실패 리턴 값)는 catch로 연결된다. finally 부분은 무조건 실행된다.

 

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2'):
Promise.all([promise1, promise2]) // 여러개의 프로미스를 동시에 실행
    .then((result) => {
    	console.log(result);
    })
    .catch((error) => {
    	console.error(err);
    });

 

Promise.all(배열)은 여러 개의 프로미스를 동시에 실행할수 있는데, 하나라도 실패하면 catch로 간다. Promise.allSettled로 실패한 것만 추려낼 수 있다.

 

 

• 콜백 패턴(3중첩)

function findAndSaveUser(Users) {
    Users.findOne({}, (err, user) => {
        if (err) {
            return console.error(err);
        }
        user.name = 'zero';
        user.save((err) => {
            if (err) {
                return console.error(err);
            }
            Users.findOne({gender: 'm'}, (err, user) => {
            	// 생략
            });
        }
    }
}

 

• findOne, save 메서드가 프로미스를 지원한다고 가정하여 promise를 사용하도록 코드 수정

function findAndSaveUser(Users) {
	Users.findOne({})
    	.then((user) => {
            user.name = 'zero';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({ gender: 'm'});
        })
        .then((user) => {
            // 생략
        })
        .catch(err => {
            console.error(err)
        });
}

 

• async/await으로 축약

async function findAndSaveUser(Users) {
    let user = await Users.findOne({}); // 실행 순서가 오른쪽에서 왼쪽
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({gender: 'm'});
    // 생략
}

 

• 화살표 함수도 async/await 가능

const findAndSaveUser = async (Users) => {
    try {
    	let user = await Users.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({gender: 'm'}});
        //생략
    } catch (error) {
    	console.error(err);
    }
};

 

• aysnc 함수는 항상 promise를 반환 -> then이나 await을 붙일 수 있다.

async function findAndSaveUser(Users) {
    // 생략
}

findAndSaveUser().then(()=>{/* 생략 */});
// 또는
async function other() {
    const result = await findAndSaveUser();
}

 

• for await을 통해 반복문을 돌릴 수 있다.

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
(async () => {
    for await (promise of [promise1, promise2]) {
        console.log(promise);
    }
})();

 

 

2-1. 프로미스의 최고 장점을 아십니까

setTimeout(() => {
    console.log('a');
}, 1000);

 

위 코드는 1초 뒤라는 조건이 달성되면 console.log('a')가 바로 실행되어버리는 단점이 있다.

 

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 1000);
});

 

반면 위 코드에서는 setTimeout이 실행됐지만, 그 결과값을 나중에 사용할 수 있다. 계속 다른 행동을 하다가  promise.them(() => { console.log('a') }을 실행해도 아무런 문제가 없다는 뜻이다. 즉 실행 부분을 분리해서 결과를 바로 받고 싶지 않으면 실행 결과를 담아놓고 있다가 사용할 수 있다.

 

axios.get('서버주소1', function(데이터1){
	axios.get('서버주소2', function(데이터2) {
    	axios.get('서버주소3', function(데이터3) {
            ...
        });
    }
});


const p1 = axios.get('서버주소1');
const p2 = axios.get('서버주소2');
const p3 = axios.get('서버주소3');


Promise.all([p1, p2, p3]).then((results) => {}).catch((error) => {}).finally(()=>{});
// 위 코드에서 catch는 Promise.all에 대한 catch가 아니라, Promise.all().then()에 대한 catch이므로 then에서 오류가 발생해도 catch로 간다.


Promise.allSettled([p1, p2, p3]).then((results) => {
    // 실패한 것만 필터링해서 다시 시도
}).catch((error) => {});

 

위와 같이 콜백을 사용하면 결과값을 바로 받아야하고, 코드가 지저분해지지만, promise를 통해 결과값을 나중에 한번에 사용할 수 있다.

 

 

2-2. 비동기는 동시가 아니다. 순서의 문제다.

한 번 비동기는 영원한 비동기
비동기는 동시의 문제가 아니다. 순서의 문제다.

 

setTimeout(() => {
    console.log('a');
}, 0);
setTimeout(() => {
    console.log('b');
}, 1000);
setTimeout(() => {
    console.log('c');
}, 2000);

 

위 코드를 바탕으로 호출 스택을 그려보면, 파악이 쉽지 않은 것을 알 수 있다. 그래서 비동기가 사용되는 코드에서는 이벤트 루프를 통해 추가적인 분석이 필요해진다.

 

 

anonymous 까지 호출 스택에서 모두 꺼내지고 난 다음의 상태를 그림으로 그려보면 아래와 같다.

 

이때, background는 javascript가 아니라 javascript 엔진, 운영체제와 같은 더 큰 개념이라고 생각하자. 그리고 background에 들어간 것은 여러개가 동시에 실행될 수 있다. 대표적으로 setTimeout의 타이머, 프로미스, ajax 요청, 이벤트리스너 등이 background에 들어간다.

 

background 안의 존재가 시간을 세주고, background에 들어온 것들은 각각 0초, 1초, 2초 뒤에 Macro Task Queue를 거쳐서 호출스택으로 올라가게 된다. 이때 이벤트 루프의 역할이 호출스택이 비어있을 때, 큐에서 함수를 호출스택으로 끌어올려 주는 것이다.

이해를 돕기 위한 예시일 뿐, 실제 실행 과정과 차이가 있을 수 있음

 

 

2-3. 한 번 비동기는 영원한 비동기

micro task queue에는 promise, process.nextTick이 들어가고 나머지는 macro로 들어가게 된다. 어떤 task가 거의 시간 차가 나지 않는 상태로 macro와 micro 큐에 거의 동시에 들어가게 되면, 무조건 micro task가 먼저 호출 스택으로 올라간다.  micro task queue가 꽉 차있으면 macro task는 영원히 실행이 되지 않는다.

 

setTimeout(() => {
   console.log('s');
}, 0);

Promise.resolve().then(() => {
    console.log('p')
});

// p 출력 후 s가 출력 됨

 

위와 같이 setTimeout 코드가 위에 있고, 0초 뒤(즉시) 실행이라고 해도 프로미스는 micro task queue에 들어가기 때문에 p가 먼저 출력됨을 확인할 수 있다.

 

let a = 2;
setTiemout(()=>{
    a = 5;
    console.log(a);
    // 5로 변경된 a를 쓰려면 여기에서만 사용할 수 있다.
}, 0);

console.log(a); // 여기에서는 5로 변경된 a를 쓸 수 없다

 

 

 

2-4. Promise에도 동기 부분이 있다!

let a = 2;
const p = new Promise((resolve, reject) => {
    // 이 부분은 동기 부분!!
    console.log("제일 먼저");
    setTimeout(()=>{
    	a = 5;
        console.log(a);
        resolve(a):
    }, 0);
});

console.log("딴짓");

p.then((result) => {
	console.log("result", result);
});

 

위 코드를 실행시키면 Promise 안의 동기 부분에서 console.log("제일 먼저")가 먼저 실행되어 제일 먼저가 출력되고, 다음으로 동기 부분인 console.log("딴짓")이 실행되어 딴짓이 출력된다. 다음으로 setTimeout의 console.log(a)와 Promise then의 console.log(result)는 background에 있다가 모든 호출스택이 비워진 후에 micro task queue에 있던 console.log(result)가 먼저 실행되고 console.log(a)가 실행된다.

 

 

2-5. async/await, Promise로 바꾸기

let a = 3;
const p = new Promise((resolve, reject)=>{
    a = 5;
    resolve(a);
});

p.then((result) => {
    console.log('result', result);
}).then(() => {

}).catch(() => {

}).then(() => {

}).catch(() => {

}).then(() => {

}).catch(() => {

});

 

위 코드와 같이 catch는 꼭 맨 끝에 붙이는 것이 아니라 중간에 붙여줘도 된다. 

 

let a = 3;
const p = new Promise((resolve, reject)=>{
    a = 5;
    resolve(a);
});

p.then((result) => {
    console.log('result', result);
    return 1;
}).then((result) => {
    console.log(result); // 1
}).then((result) => {
    console.log(result); // undefined - 함수에 리턴값이 없으면 기본적으로 undefined를 리턴 
})

p.then((result) => {
    console.log('result', result);
    return Promise.resolve(1);
}).then((result) => {
    console.log(result); // 1 - promise가 resolve된 값
})

async function a() {
    const a = await 1;
    const b = await Promise.resolve(1); // 마찬가지로 promise가 resolve된 값이 저장됨
}

 

변수 = await 프로미스; 인 경우 프로미스가 resolve된 값이 변수에 저장되고, 변수 await 값; 인 경우 그 값이 변수에 저장된다. 

 

async function a() {
	const a = await 1;
    console.log('a', a);
    console.log('hmm');
    await null;
    const b = await Promise.resolve(1);
    console.log('b', b);
}

 

위 코드를 Promise로 바꿔보자. await이 then이라고 생각하고, await은 오른쪽에서 왼쪽이라면 Promise에서는 왼쪽에서 오른쪽, 위에서 아래로라고 생각하면 이해하기 쉽다. 위와 아래의 코드가 1대1로 대응되는 개념이 아니라 편의에 의해 변환하는 점을 유의하자.

 

Promise.resolve(1)
    .then((a) => {
        console.log('a', a);
    	console.log('hmm');
    	return null;
    })
    .then(() => {
    	return Promise.resolve(1);
    })
    .then((b) => {
    	console.log('b', b);
    })

 

 

위와 같이 변환하면 아래의 코드를 시각화해서 분석하기에 편해진다.

 

function delayP(ms) {
	return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}

async function a() {
    const a = await 1;
    console.log('a', a);
    console.log('hmm');
    await null;
    const b = await Promise.resolve(1);
    console.log('b', b);
    return a+b;
}

a().then((result) => {
    console.log(result);
});

 

위 코드에서 async function을 만나면 분석하기가 까다롭다. 그래서 이때 Promise로 변환하면 분석이 편해진다.

 

 

2-6. 무지성 await 연달아쓰기 금지!

function delayP(ms) {
	return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}

async function a() {
    await delayP(3000); // 3초
    await delayP(6000); // 6초
    await delayP(9000); // 9초
}

 

위와 같이 코드를 작성하면, a를 실행했을 때 18초가 걸리는 코드가 된다.

 

function delayP(ms) {
	return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}

async function a() {
    const p1 = delayP(3000); // 3초
    const p2 = delayP(6000); // 6초
    const p3 = delayP(9000); // 9초
    await Promise.all([p1, p2, p3]);
}

 

하지만 이렇게 수정하게 되면 a를 실행했을 때 도합 9초 밖에 걸리지 않는 코드가 된다. 

 

좀 더 실제 있을 법한 상황의 코드로 예시를 들면 아래와 같다.

async createPost() {
    const post = await db.getPost();
    if (post) {
        res.status(403).send("이미 게시글이 존재합니다.");
    } else {
        await db.createPost(); // 게시글 작성
        await db.userIncrementPostCount(); // 사용자에 작성글 카운트 1 올림
        await db.createNoti(); // 게시글 작성 완료 알림
    }
}

 

작성글 카운트 1 올리기, 게시글 작성 완료 알림을 꼭  순차적으로 할 필요가 있을까? 저렇게 꼭 순차적으로 실행되어야 할 필요가 없는 것들의 요청을 동시에 보내고, Promise.all로 처리해주면 응답시간이 좀 더 줄어들 수 있다.

 

 

2-7. 프로미스 다양한 활용

const results = await Promise.all([p1, p2, p3]);

results.map(async () => {
    await result조작(); // p1, p2, p3의 result에 대해서 조작이 동시에 가해짐
}, []);

for (let result of results) {
    await result조작(); // p1 끝난 후 p2 끝난 후 p3
}

 

GPT가 만들어준 예시 코드

 

아래의 예제를 통해 map과 for of 의 비동기 처리에 대한 차이를 확실하게 느낄 수 있다.

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const result조작 = async (result) => {
  await delay(1000); // 1초 동안 대기
  return result * 2; // 결과를 2배로 만듭니다.
};

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

async function example() {
  const results = await Promise.all([p1, p2, p3]);

  console.time('Using map');
  const doubledResultsWithMap = await Promise.all(results.map(async result => {
    return await result조작(result);
  }));
  console.timeEnd('Using map');

  console.time('Using for...of');
  const doubledResultsWithForOf = [];
  for (let result of results) {
    doubledResultsWithForOf.push(await result조작(result));
  }
  console.timeEnd('Using for...of');

  console.log('Results with map:', doubledResultsWithMap);
  console.log('Results with for...of:', doubledResultsWithForOf);
}

example();

 

 

2-8. 클로저(closure) 분석

클로저란 함수와 함수 외부에 있는 변수와의 관계다.

클로저 문제 -> 스코프, 비동기, var
클로저가 문제인 게 아니라, 클로저를 사용해서 해결하는 문제
for문(반복문)과 비동기를 함께 사용하면 종종 발생

 

 

문제 상황 : var과 for과 비동기의 환상의 콜라보(...)

function a() {
    for (var i = 0; i < 5; i++) {
        setTimeout(()=>{
            console.log(i);
        }, i * 1000);
    }
}

// 5가 5번 출력됨

 

 

문제가 되는 이유로 첫번째, var은 블록 스코프를 따르지 않고 함수 스코프를 따르기 때문이다. 즉 i는 함수 a에 들어있게 된다. 두번째, setTimeout이 다섯번 실행되는 순간 i는 0, 1, 2, 3, 4를 거치고 i++이 한 번 더 실행되어 5가 되고 i < 5가 false가 되어 반복문이 멈춘다. 

 

해결방법 1. var을 유지해야 할 때 => 즉시실행함수(IIFE)로 클로저 생성

function a() {
    for (var i = 0; i < 5; i++) {
        (function(j){
            setTimeout(()=>{
                console.log(j);
            }, i*1000)
        })(i);
    }
}

// 0, 1, 2, 3, 4가 순차적으로 출력됨

 

즉시 실행함수는 선언이자 호출이므로 j가 순차적으로 0, 1, 2, 3, 4의 값을 가지게 된다.

 

 

해결방법 2. var을 let으로 수정

function a() {
    for (let i = 0; i < 5; i++) {
        setTimeout(()=>{
            console.log(i);
        }, i * 1000);
    }
}

 

var은 a에 속하지만, let으로 바꾸게되면 for문에 속하기 때문에 for문의 각 스코프 5개에서의 i값(0, 1, 2, 3, 4)을 출력하게 된다.