js 비동기의 작동 원리 (feat. event loop)
코드를 실행하기 전에, 크롬과 같은 브라우저의 기능인 콜스텍에 함수의 실행순서가 담긴다. 자바스크립트는 싱글스레드라서 순서와 순위가 있다.
console.log("1",apiObj); settimeout(function(){ const apiObj = "window API!!";},1000) console.log("2",apiObj); ㅤ => Uncaught ReferenceError: apiObj is not definedㅤ
1. console.log 1과 2 순서로 콜스텍에 쌓인다.(first in last out이다. )
2. window API는 콜백 큐 (선입선출)에 따로 쌓인다.
3. 콜스텍이 비면 (앞의 코드가 출력되면) even loop가 이를 인지하고 콜백큐의 API를 차례차례 콜스텍으로 옮긴다. 옮기는 한번의 과정을 tick. evnet loop는 이 작업을 반복한다.
두번째 log는 setTimeout가 끝나기를 기다리지 않고 먼저 처리된다. 이것이 바로 비동기 처리이다. 콜스텍과 콜백큐의 원칙에 따라 순서를 뛰어넘는다.
비동기: 한 코드가 끝나기 전에 다른 코드를 수행하는 상태.
ㅤ
ㅤ
ㅤ
비동기의 문제점
싱글 스레드에서의 비동기란 점
결국에는 apiObj 두개 다 undifined로 나타나게 된다. 물론 코드가 시작되자마자 window Api는 1초가 충족되면 콜백큐로 보낸다. 그러나 만약 이 1초동안 콜스텍이 비워지지 않았다면, 1초가 지나도 콜백큐에서 콜스텍으로 옮길 수 없어 코드가 실행되지 않는다. 시간 함수가 아니더라도 항상 차례를 따라야 하기 때문에 undifined다.
서버 통신
JS가 코드를 실행하는 속도보다 서버와 통신하는 속도가 더 느리다.
비동기함수인 fetch()를 이용해 서버에 리소스를 요청할때, fetch()는 콜백 큐에 들어가고, console.log(fetch)는 콜스텍에 위치한다.
ㅤ
ㅤ
promise
이를 해결하기 위해 promise를 사용한다. 아직 가져오지 못한 (예: fetch)빈 값에 "언젠간 가져오리라 약속함"으로 싱글스레드를 보완하며 비동기처리를 돕는 객체이다.
프로미스 API : .then() , .resolve(), .new promise()
state로는 pending, fulfilled , rejected 중 하나를 갖는다.
result는 undifined, value, error을 각각 갖는다.
promise는 resolve (응답 담김), reject 둘 중 하나를 무조건 가지게 된다.
-https://ko.javascript.info/,MDNㅤ
promise API : new Promise
ㅤ
Prmise로 직접 통신하지 않고도, 특정 함수 안에 new promise로 객체 선언 해 주면 똑같은 결과값을 받을 수 있다.
결과: 2초 동안 panding --> fulfilled-https://www.inflearn.com/course/lecture
ㅤ
.then()
promise는 우리가 server로부터 받은 정보의 상태만 나타낼 뿐이지, 정보 자체를 나타내진 않는다. 이를 화면에 나타내기 위해서 .then()을 사용한다.
then() 안에 콜백함수를 작성할 수 있다.
결과: 2초 후에(fullfiled 후) 100이 뜬다.-https://www.inflearn.com/course/lecture
