2022.8.27. 토요일 TIL: 프로그래머스 문제 풀이, 자바스크립트 이벤트루프, 동기/비동기 개념 잡기

Dorito·2022년 8월 27일

공부 기록

목록 보기

10/71

오늘 할 것

프로그래머스 1단계 안 푼 문제 풀이
js 동기/비동기 개념 공부
네트워크 공부 및 정리
배열, map, set 차이점 찾아보기
Nodejs 구현 공부 (챕터 1- 30~ 33장)
운영체제 챕터 5
SQL 기초 문제 리트코드나 프로그래머스에서 풀기

인데 아마 동기/비동기쪽 개념 독학으로 하루 통으로 잡아먹을 것 같음..
이해력이 너무 느리고 딴길로 자꾸 새서 속도가 느리다

프로그래머스 문제 풀이

부족한 금액 계산하기

const solution = (price, money, count) => {
  let totalPrice = 0;
  for (let i = 1; i <= count; i++) {
    totalPrice += price * i;
  }
  const lackOfMoney = totalPrice - money;
  return lackOfMoney > 0 ? lackOfMoney : 0;
};

console.log(solution(3, 20, 4));

간단한 문법 문제..

예산

const solution = (departure, budget) => {
  const sortedDeparture = departure.sort((a, b) => a - b);

  while (sortedDeparture.reduce((acc, cur) => acc + cur, 0) > budget) {
    sortedDeparture.pop();
  }
  return sortedDeparture.length;
};

console.log(solution([1, 3, 2, 5, 4], 9));

// short 한 다음에 pop이나 push 로 넣으면 되겠네

처음에는 reduce 써서 acc를 []로 두고 push로 넣을 생각했는데 while문에서 자꾸 마지막 부분 오류나서 짜증났다. 쉬워보이는건데! 디버깅하고 좀 헤매다가 쓸데없이 시간만 흘러가는 것 같아 걍 솔루션 찾아봤다.
접근 방식은 비슷했는데 나는 리듀스를 아예 조건에 넣을 생각을 못함. pop하니까 더 간편..!

JavaScript 동기/비동기 개념 공부

개인 공부용으로 쓰는 것이고 정확하지 않으니 참고사이트를 위주로 보시길 바랍니다

그림 출처, 참고사이트
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
https://ko.javascript.info/event-loop
html 공식 문서에서 이벤트 루프 관련 문서 보기: https://html.spec.whatwg.org/multipage/webappapis.html

비동기의 오해
1. 비동기는 동시의 문제가 아니다! 순서의 문제다

비동기 promise를 async, await으로 만들었다 -> 완전 틀린말임
한번 비동기는 영원한 비동기!

setTimeout(() => {
  console.log("a");
}, 0);

setTimeout(() => {
  console.log("b");
}, 1000);

setTimeout(() => {
  console.log("c");
}, 2000);

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

이 코드를 출력하면 다음과 같이 출력된다

p
a
b
c

이때!!
첫번째 "a" 를 출력하는 SetTimeout 과 "p"를 출력하는 Promise가 맞짱까면 Promise가 이긴다. 왜 그럴까?

왜냐하면 SetTimeout()은 macro 큐에, Promise는 micro 큐에 쌓이는데, micro 큐가 우선순위가 높기 때문이다!
그림에서 직관적으로 보이듯이 모든 함수는 스택이 비워질 때마다 하나씩 쌓여서 실행되고 pop되고 난 후에 또 하나씩 콜스택으로 올라가는데, micro 큐가 먼저 콜 스택으로 올라가서 실행된다.
그런 다음 콜스택과 micro큐가 둘 다 비었을 경우, 이벤트루프는 macro 큐에 task가 있는지 확인하고 실행한다.
마이크로 큐에 해당하는 메서드는 외워두는 것이 좋다.

참고:
마이크로태스크 큐 == 잡 큐
매크로태스크 큐 == 이벤트 큐 or 콜백 큐로 불리기도 한다.

쓸데없는 궁금증:
만약 Macro 큐에 있는 메서드끼리 비교했을 때, 뭐가 먼저인지 알고싶다면.. nodejs 공식문서 를 참고해보자. 근데 어차피 실무에서 setTimeout()이 먼저냐 setImmediate() 이 먼저냐를 굳이 따질 일이 잘 없다고 한다. 최대한 그런 상황을 피하는 것이 좋고 애초에 같은 함수에 집어넣으면 되는 것을 굳이 그런 식으로 설계를 하지 않는다고 한다.
(주의: 정확하지 않다. 한글문서니 당연히 믿거하시겠지만, 내가 이해하기로는 그렇다고 해서 거기까지는 파고가지 않을 생각이다. 게다가 나는 저 부분까지는 아직 이해하기에는 한참 남은 것 같다.)

promise: 실행은 바로 하긴 하는데 결과값을 나중에 내가 원할 때 얻을 수 있는 것

동기/비동기 함수 실행순서 알아보기

예시 1

이 사이트 참고해서 씀

console.log("start");

setTimeout(() => {
  console.log("time out!");
}, 0);

Promise.resolve("Promise!").then((res) => console.log(res));

console.log("End!");

console.log("start"); 출력
setTimeout() 콜스택에서 popped 된 후 WEB API 이동

The setTimeout method is native to the browser: its callback function (() => console.log('In timeout')) will get added to the Web API

-> 시간 완료 이후 macro task에 추가됨

Promise.resolve() 콜스택 추가

resolve 되고 then의 콜백 함수는 microtask queue에 추가됨
console.log("End!"); 출력
V8 엔진은 콜스택이 비었다는 것을 확인한 후 큐에 뭐가 있는지를 확인한다.
microtask queue 우선 실행 후 마지막으로 macrotask queue 실행

예시 2

이 강의 보면서 필기: https://youtu.be/A7AeQzEoEmc


let a = 2;

const p = new Promise((resolve, reject) => {
 // Promise 내부는 동기 코드임
 console.log("This string comes out first!");
 setTimeout(() => {
   console.log("a");
   let a = 5;
   resolve(a);
 }, 0);
});


console.log("test");

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

출력

This string comes out first!
test
a
result 5

실행순서

동기

전역변수 a = 2
promise 내부 함수 호출 ~ 동기방식이므로 console.log("This string comes out first!"); 출력
setTimeout() -> web API로 이동 (백그라운드 개념으로 설명하시는데.. 둘다 사실 명확한 표현인지는 잘 모르겠다.)
console.log("test") 출력
p.then -> web API로 이동

비동기

나머지 Web API로 넘어간 비동기 부분이 남았음!

0초 지났으니까 조건 만족 -> Macro 큐에 보내줌 -> 동기부분 처리가 끝났으니 setTimeout() 함수를 콜스택 올림

  setTimeout(() => {
    console.log("a");
    let a = 5;
    resolve(a);
  }, 0);

a = 5 재할당, console.log("a") 출력
resolve() 함수 실행 -> p.then 호출 조건 만족!
Web API에 있는 p.then이 Micro 큐로 넘어간다.

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

콜스택에 올라간 setTimeout() 함수 완료 후 pop 되고 콜 스택이 비었음!
큐에 올라가있던 console.log("result", result); 콜스택으로 올라간 후 출력

-> 스택, 큐 모두 텅 비었음! 자바스크립트 종료
(cf. setInterval 같은 경우에는 계속 web api에 남아서 실행됨 ~ clearInterval로 직접 꺼줘야함)

이벤트루프가 왜 있는가? 에 대한 근본적인 해답은 https://youtu.be/0NsJsBdYVHI 에서 타임라d인 1:21:13 참고!

자바스크립트 Promises & Async/Await

참고사이트: https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

자바스크립트에서는 다른 작업에 의존하는 작업을 다룰 때가 있다.
예를들면 사진을 하나 얻고 싶다 할 때
사진을 압축하고 -> 압축된 이미지에 필터를 입히고 -> 그 이미지를 저장한다

이걸 코드로 구현하면 콜백지옥이 펼쳐진다.
http://callbackhell.com/

완전 가독성도 구리고 의존적이라서 별루임
ES6에서 Promise 등장!!

"A promise is a placeholder for a value that can either resolve or reject at some time in the future"

Promise는 status를 갖고있는 객체이다.

쉬운 영어 부분은 그냥 갖구 오고 어려운 부분만... 해석해야지

The value of the PromiseStatus, the state, can be one of three values:

✅ fulfilled: The promise has been resolved. Everything went fine, no errors occurred within the promise 🥳
❌ rejected : The promise has been rejected. Argh, something went wrong..
⏳ pending: The promise has neither resolved nor rejected (yet), the promise is still pending.

this callback function actually receives two arguments.
The value of the first argument, often called resolve or res, is the method to be called when the Promise should resolve.
The value of the second argument, often called reject or rej, is the value method to be called when the Promise should reject, something went wrong.

.then(): Gets called after a promise resolved.
.catch(): Gets called after a promise rejected.
.finally(): Always gets called, whether the promise resolved or rejected.

콜백 극복

코드를

이렇게 극복!!

The result of the .then itself is a promise value. This means that we can chain as many .thens as we want: the result of the previous then callback will be passed as an argument to the next then callback!

https://ko.javascript.info/async-await
https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20&%20performance/README.md#you-dont-know-js-async--performance

하루 회고

해낸 것
프로그래머스 1단계 안 푼 문제 풀이
js 동기/비동기 개념 공부
하루 못한 것
배열, map, set 차이점 찾아보기
Nodejs 구현 공부 (챕터 1- 30~ 33장)
운영체제 챕터 5
SQL 기초 문제 리트코드나 프로그래머스에서 풀기
반성
오전 시간 집중력이 낮았다
자꾸 계획이 밀린다..
당떨어지면 손떨린다..
블로그 쓰면서 공부하니까 시간을 너무 많이 잡아먹는 것 같다
피드백
아침에 스트레칭을 해야겠다.
시간 계획표를 세운다 (미도리 하루한페이지 사용)
액상과당류 음료수를 사둔다
블로그 포스팅할 때 이해 못하는 부분만 영어를 번역하고 나머지 이해가는 부분은 영어로 적는다 (영어로)
내일 할 것
배열, map, set 차이점 찾아보기
Nodejs 구현 공부 (챕터 1- 30~ 33장)
운영체제 챕터 5
SQL 기초 문제 리트코드나 프로그래머스에서 풀기