javascript 동기/비동기

코드는 항상 동기식 처리를 한다.

동기식처리란 한번에 코드를 한줄 씩 차례차례실행한다는 뜻인데,
js를 실행하는 웹브라우저는 stack 코드실행 공간이 있다.
거기서 코드를 한줄씩 차례대로 실행한다.

비동기처리도 가능

특정코드를 1초뒤에 실행하고싶을 때
setTimeout(function() {}, 1000)이런거 쓰면된다.

console.log(1);
setTimeout(function(){}, 1000);
console.log(2);

이렇게 쓰면 1이랑 2가 쉬었다가 출력되야하는데
콘솔에 바로 출력되는 상황이 생겨버린다.

여기서 js의 특징이 나오게된다.

js는 특수한 코드가 느린코드는 재끼고 밑에 먼저 실행한다.

이런 처리방식을 비동기라고한다.
실행이 오래걸리는 친구는 잠시 미루고
바로바로 가능한거 먼저 처리한다.

js실행으 도와주는 웹브라우저 덕에 가능한 일임

setTimeout, addEventListener, ajax관련된 함수들이 대표적이다.
얘네는 잠시 대기실에 두고 준비가 되면 다시 실행한다.

콜백함수를 이용한 순차적 실행

아까 예시를 보면서 js에서 1초후 실행하고 싶을때는

console.log(1);
setTimeout(function(){
	console.log(2);
}, 1000);
console.log(3);

이렇게하면 먼저 1, 3이 출력되고
그리고 1초후 2가 출력된다.

js에서는 비동기 상황에서 콜백함수를 활용한다.

콜백함수 디자인

예를 들어서 순차적으로 실행하고 싶은게 두개면

function f1(){
  console.log(1)
}

function f2(){
  console.log(2)
}

f1();
f2();

js는 비동기라는 특성으로 이렇게 써도 순차적 실행 보장이 안된다.

그럼 우리는 콜백함수를 이용해서 순차적으로 실행하면된다.
f1(f2)이렇게 ㅇㅇ

function f1(fun){
  console.log(1)
  fun();
}

function f2(){
  console.log(2)
}

f1(f2);

이런식으로 함수에 파라미터를 하나 만들어서 함수를 넣어 실행하면 된다.

함수를 부를때 직접 함수를 선언해도됨

f(function() {
  console.log(2)
});

이렇게 ㅇㅇ

근데 이렇게 너무 많이 하면 코드가 이상하게 길어질 수도 있다
그럴 땐 Promise라는거 쓰면됨

f1().then(function(){
   그 담에 실행할거
}).then(function(){
   그 담에 실행할거
});

이런식으로 ㅇㅇ