211117_개발자 준비하기(46일차) - Async, Await / 이벤트 루프
배운 것(끄적끄적)
Async - Await
Async / Await은 비동기적인 작업들을 동기적으로 만들어 줄 수 있다.
단, 남발한다면 로직이 동기적으로 처리될 확률이 높기 때문에 조심해서 다뤄야할 필요는 있다.
그리고 Promise는 return 시에 상태값을 알려주는 반면, async-await을 사용하면 그 값을 온전히 다룰 수 있게 된다.
const getDataFromFilePromise = (filePath) => {
return new Promise((resolve, reject) => {
fs.readFile(filePath, "utf-8", (err, data) => {
if (data) {
resolve(data);
} else {
reject(err);
}
});
});
};
const readAllUsersAsyncAwait = () => {
const user1Text = getDataFromFilePromise(user1Path);
console.log(user1Text); //
const user2Text = getDataFromFilePromise(user2Path);
console.log(user2Text);
};
// ------- promise값을 console.log로 찍을 경우------
// Promise { <pending> }
// Promise { <pending> }
const readAllUsersAsyncAwait = async () => {
const user1Text = await getDataFromFilePromise(user1Path);
console.log(user1Text);
const user2Text = await getDataFromFilePromise(user2Path);
console.log(user2Text);
};
// ------- await을 사용하여 console.log로 찍을 경우(값이 정상적으로 출력)------
// [1, 2, 3, 4, 5]
// [1, 2, 3, 4, 5, 6, 7]
자바스크립트는 non-blocking으로 작동한다.
엄격하게 비동기적이라는 것은 (비동기+ 논블로킹)을 합쳐서 말한다.
반대로 (동기+블로킹)을 합쳐서 동기적이라고 할 수 있다.
자바스크립트는 대부분의 메소드가 동기적으로 작동이 되지만 non-blocking이다.
만약 자바스크립트가 blocking 언어라고 가정하면 우리는 웹사이트에서 밀려오는 API 호출 등을 감당하느라
로그인 자체도도 쉽지 않을 것이다.
Event Loop에 대하여
이벤트 루프는 자바스크립트가 어떻게 동작 하는지 이해할 수 있게 해준다.
- 자바스크립트를 읽어들이면서 Stack에 쌓는다.
- 이 때, 비동기적인 역할을 하는 메소드 등(DOM, Ajax, setTimeout, Promise 등)은 WEB API로 들어간다.
- Stack의 동기적인 작업은 계속 실행되면서, WEB API 안의 작업들은 timer가 돌고 난 뒤 queue에 쌓인다.
- Event Loop은 계속 돌면서 Stack이 비어있는 지 여부를 확인하며, stack이 비어있으면 queue의 작업을 하나씩 stack에 보내준다.
- 이를 반복한다.
이는 setTimeout에 0ms값을 넣고도 뒤에 오는 console.log가 먼저 찍히는 경우를 보고
더욱 이해할 수 있었다.
setTimeout(() => {console.log("Hi")}, 0);
console.log("bye")
// bye ----> console.log("bye") 실행
// undefined (anonymous)
// Hi ----> setTimeout(() => {console.log("Hi")}, 0);
Reference
https://www.youtube.com/watch?v=v67LloZ1ieI&t=187s
https://www.youtube.com/watch?v=S1bVARd2OSE
느낀점
Event Loop을 통해 자바스크립트가 웹, Node에서 어떻게 동작하는 지를 이해할 수 있었다.
또한 콜 스택에 대한 개념도 이해가 되기 시작하면서 알고리즘의 복잡도를 표현하는 BigO가 왜 필요한 지, 그 필요성에 대해 실감할 수 있었다.
아직 내가 짠 알고리즘이 복잡하고 지저분해보이지만 이것을 어떻게 하면 효율적으로 짤 수 있을 지 계속 공부 해 나갈 것이다.
내일 배울 것
- 클라이언트 - 서버 아키텍처, 통신
- 브라우저 작동 원리
- HTTP Message
Author And Source
이 문제에 관하여(211117_개발자 준비하기(46일차) - Async, Await / 이벤트 루프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wngud4950/211117개발자-준비하기46일차-Async-Await-이벤트-루프저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)