min
프론트엔드 cs 스터디 [일요일] 본문
<회고록>
오늘은 팀원들과 함께 각각 async,await과 RESTful api에 대해서 발표하는 시간을 가졌다.
나는 RESTful api에 대해서 다뤘으며 다른팀은 async,await에 대해 다뤘다.
나는 오늘 async, await에 대한 발표를 들으면서 몰랐던 것들 질문했던 것들에 대해서 다룰려고 한다.
1. 비동기 함수와 이벤트루프
비동기함수의 동작원리를 이해하기 위해서는 이벤트루프라는 개념은 빠질 수가 없는 내용이다.
이벤트루프는 내가 따로 정리한 블로그가 있으니 그것을 참고하겠다.
실행컨택스트와 이벤트 루프에 대하여.....
오늘 나는 다른 분에게 실행 컨택스트와 이벤트 루프가 어떤 관련성이 있는지 실행 컨택스트는 어떤 내용인지 궁금해하셔서 나에게 찾아왔는데 나도 정확한 개념을 생각하지 못해서 한번 이 글
minprogramming.tistory.com
위 블로그를 보면 알 수 있듯이 이벤트루프는 콜스텍에 어떤 비동기함수들을 넣을 것인지 언제 비동기함수를 넣을 것인지를 결정하는 기준이 된다. 이 기준에 대해서 조금더 딥하게 들어가보겠다.
비동기함수를 언제 콜스택에 쌓냐면 콜스택이 모두다 비었을 때 비동기함수를 쌓게 된다.
비동기함수는 microtask queue > animation queue > task queue를 순차적으로 콜스택에 쌓게 된다.
그래서 다음과 같은 코드가 있을 때 설명을 할 수 있는 것이다.
function f1() {
console.log(1);
}
function f2() {
console.log(2);
}
setTimeout(() => {
f1();
}, 0);
f2();
//2->1이처럼 setTimeout의 두번째 인자값이 0이라고 해도 전혀 상관이 없다.
2. HTTP request form , HTTP response form
우리 조에서 저랑 같이 발표하신분께서 request body와 response body에 대해서 다뤘다.
나는 이개념을 듣고 HTTP request form이 어떻게 생겼는지에 대해서 궁금중이 생겼고 이로 인해서
HTTP request form , HTTP response form 에 대해서 조사하게되었다.
<request>
request헤더의 경우 이렇게 생겼다.
GET
//header
/index.html
HTTP/1.1
Host: dreamhack.io
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36<response>
response헤더의 경우 이렇게 생겼다.
HTTP/1.1
//header
200 OK
Server: Apache/2.4.29 (Ubuntu)
Content-Length: 61
Connection: Keep-Alive
Content-Type: text/html
//body
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>