벌써 4주차의 절반이 지나갔다.
새로운 내용이 너무 많았기에 그걸 다 익히려고 하니 너무 정신이 없었던 것 같다.
그래도 나만 그런게 아니라 다른 레이서분들도 다 마찬가지라 하니 괜히 위안도 되고 한다.
초심만 잃지 말고 계속 열심히 달려보자
웹브라우저란?
서버에서 받아온 HTML CSS JS를 실행시켜주는 프로그램이다.
브라우저는 C++이라는 언어로 코드가 짜여있다.
브라우저는 실행해야할 자바스크립트 코드 발견시 C++언어로 만든 스택에 넣고 돌린다.
처리가 오래 걸리는 코드를 만나면 스택에 쌓아 실행하지 않고 잠시 보류해뒀다가 스택으로 보낸다.
대신 스택이 비어있는 시점에 집어 넣도록 되어있다.
코드 실행준비가 되면 큐라는 곳에 집어놓고 큐에 있던 코드는 스택으로 옮겨 실행해주는데 스택이 비어있을 때만 차례로 집어넣어 실행해준다.
(큐는 들어온 순서대로 스택으로 옮겨준다)
자바스크립트는 항상 동기식 처리다.
동기식 처리는 한번에 코드 한 줄씩 차례차례 실행된다는 말이다.
자바스크립트를 실행하는 웹브라우저는 스택에서 차례대로 실행한다.
비동기처리도 가능하다.
console.log(1);
setTimeout(function(){
console.log(2);
},1000);
console.log(3);이런식으로 했을 때 콘솔창에 출력은 1 3 2 이런식으로 출력된다.
자바스크립트는 특수한 코드를 발견하면 잠시 대기실로 치워놨다가 다른 코드부터 실행한다.
이런 처리 방식을 비동기라고 한다.
이건 자바스크립트 언어 자체 기능이 아닌 웹브라우저 덕에 가능한 것이다.
비동기 코드 예시 ex) setTimeout, addEventListener, ajax...
웹브라우저는 코드를 읽다가 비동기 코드를 만나게 되면 Web API 대기실로 옮겨 대기시 시킨다.
콜백함수를 이용한 순차적 실행
콜백함수란 함수안에 들어가는 함수를 전부 콜백함수라 부른다.
(1)
function firstFunc(cb){
console.log(1);
cb();
}
function secondFunc(){
console.log(2);
}
firstFunc(secoundFunc);(2)
firstFunc(function(){
console.log(2);
});콜백함수의 예시.
함수에 파라미터를 하나 뚫어 주고 파라미터에 소괄호를 붙여서 실행하면 함수를 넣어 실행이 가능하다.
두번째 예시처럼 함수선언문을 집어넣을 수도 있다.
firstFunc(){
secondFunc(){
thirdFunc(){
....
});
});
});순차적으로 실행하려고 콜백함수를 여러개 사용하면 자칫 위처럼 코드가 옆으로 길어질 수 있다. 이게 너무 길어지게 되면 콜백지옥이 된다.
