[JS] 동기 & 비동기

✏️동기와 비동기

• thread: 연산과정을 코드 한줄한줄 실행시켜준다.
  동기적 방식 : 하나하나씩 실행, 이전 작업이 진행중일떄는 다름 작업을 기다림.

블로킹 방식 : 지금 내가 실행중이니까 넘보지마!!

30초나 기다리다 속터짐!!🔥
ex) 사용자가 우리가 만든 사이트 눌렀는데 20초 기다리라고 하면 다신 안온다.

멀티 스레드

BUT, 자바스크립트는 쓰레드를 단한개만 사용함
쓰레드를 못늘림.

하나라도 작업여러개를 동시에 실행시키기!

-> 비동기 처리방식

정상적으로 끝나고 결과를 어케 확인함??

콜백함수를 붙여서 비동기처리의 결과값을 붙여서 확인함.

• 비동기 사용해보자!!.

동기적 진행

function takeA(){
  console.log("A작업 끝");
}
taskA();
console.log("코드 끝");

• 비동기적으로 바꾸기
  - setTimeout은 비동기적 함수임

function takeA(){
  setTimeout(() => {
  	console.log("A TASK END");
  }, 2000)
  
}
taskA();
console.log("코드 끝");

-res 변수를 밖에서 어케 사용할까?

• 콜벡함수 사용해서 값 외부로 가져오기.

function takeA(a,b, cb){
  setTimeout(() => {
    const res = a + b;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 3000)
  
}
taskA(3,4, (res) =>{
  console.log("A TASK RESULT : ", res);
});
console.log("코드 끝");

-task b도 만들어볼까?

function takeA(a,b, cb){
  setTimeout(() => {
    const res = a + b;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 3000)
}

function takeB(a, cb){
  setTimeout(() => {
    const res = a * 2;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 1000)
}
taskA(3,4, (res) =>{
  console.log("A TASK RESULT : ", res);
});

taskA(7, (res) =>{
  console.log("B TASK RESULT : ", res);
});

console.log("코드 끝");

-b는 1초, a는 3초

function takeA(a,b, cb){
  setTimeout(() => {
    const res = a + b;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 3000)
}

function takeB(a, cb){
  setTimeout(() => {
    const res = a * 2;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 1000)
}

function takeC(a, cb){
  setTimeout(() => {
    const res = a * -1;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 2000)
}
taskA(3,4, (res) =>{
  console.log("A TASK RESULT : ", res);
});

taskA(7, (res) =>{
  console.log("B TASK RESULT : ", res);
});

taskA(14, (res) =>{
  console.log("C TASK RESULT : ", res);
});

console.log("코드 끝");

-b는 1초, c는 3초, a는 3초

✏️JS ENGINE

자바스크립트 엔진은 어케 이런 비동기 동기처리를 구분해서 수행하는지 알아보자.

• 힙그리고 콜스택으로 두가지 요소로 이루짐.

• Heap : 변수나 상수들의 사용되는 메모리를 저장하는 영역

• call Stack: 작성한 코드의 실핼에 따라 호출스텍을 쌓는 영역

• 최상위 문맥 메인 컨텍스트가 들어오는 순간이 프로그램 실행순간.
• 나가면 프로그래밍 종료순간!
• 함수는 생성만하고 넘어간다.

콘솔로그 theree() 함수 실행

함수를 실행해야 콘솔을 쓸수있다.

프링글스통처럼
가장 마지막에 호출된 함수가 가장 먼저 종료되고 제거된다.

• 콘솔로그 출력
  
• 메인 컨텍스트도 제거 되면서 프로그램 종료
  

Thread는 여기 콜스텍 작동방식으로 처리된다. 하나만 담당함.
콜스텍 딱하나가 있어서 싱글 스레드이다!

비동기적으로 동작 할때 !

• 상호작용을 위해 새로운 2개가 생김
  비동기 동기를 처리할때 어떤게 다른지 보기!

setTImeout()은 비동기 함수!
콜스텍에서 그대로 있으면 동기적으로 수행됨
그래서 Web APIs로 보내버림!!
그리고 거기서 수행함

바로 다음코드로 진행

asyncAdd 함수는 실행이 끝나 제거

이제 cb)를 실행해야해서 콜벡 큐로 이동했다.

• 콜스텍으로 이동해야해서 Event Loop를통해 들어간다.
  콜벡이 실제로 이러난다.
• 이벤트루프는 콜스텍의 메인 컨텍스트를 제외한 다른함수가 남아있는지를 계속 확인을한다.
  아무것도 없으면 콜백함수를 콜백큐에서 콜스택으로 옮겨 콜백함수를 수행한다. 그리고 코
  

-그리고 제거된다.

앞으로 비동기 함수를 쓸 일이 많아진다.

비동기 프로그램만들기

function takeA(a,b, cb){
  setTimeout(() => {
    const res = a + b;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 3000)
}

function takeB(a, cb){
  setTimeout(() => {
    const res = a * 2;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 1000)
}

function takeC(a, cb){
  setTimeout(() => {
    const res = a * -1;//지역상수
    cd(res);
  	console.log("A TASK END");
  }, 2000)
}
//비동기에서 비동기에서 콜백지옥
taskA(4,5, (a_res) =>{
  console.log("A RESULT : ", a_res);]
  takeB(a_res,(b_res)=>{
    console.log("B RESULT : ", b_res);
    taskC(b_res,(c_res)=>{
      console.log("C RESULT : ", c_res);
    });
  });
});

taskA(7, (res) =>{
  console.log("B TASK RESULT : ", res);
});

taskA(14, (res) =>{
  console.log("C TASK RESULT : ", res);
});

console.log("코드 끝");

비동기가 계속 들어가는것.

->Promise!