TIL 230124 - 186번

동기와 비동기

사용은 하고 있었지만 정식적으로 다뤄보지 않은 개념인데 이제서야 다뤄본다.

• 각각 수행해야 할 작업이 총 3개 있다.(함수)

function taskA() {console.log("TASK A")}
function taskB() {console.log("TASK B")}
function taskC() {console.log("TASK C")}

이때 순서는 실행되는 순서는 상관 없다.

< 자바스크립트의 싱글 스레드 작업 수행 방식>

• JS는 코드가 작성된 순서대로 작업을 처리한다.
• 이전 작업이 진행 중 일때는 다음 작업을 수행하지 않고 기다림
• 먼저 작성된 코드를 먼저 다 실행하고 나서 작성된 코드를 실행한다.

-> 이는 동기 방식의 처리// 블로킹 방식

<단점>

• 동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전 까지 올 스탑 되기 때문에, 전반적인 흐름이 느려진다.
  EX)웹사이트에서 버튼 하나하나마다 몇십초씩 걸리면..^^

그렇다면 쓰레드를 확장 시키면 되지 않을까???

<MultiThread>

• 코드를 실행하는 일꾼 Thread를 여러 개 사용하는 방식
• 분학하여 작업이 가능하여 오래 걸리는 일이 있어도 다른 일꾼 Thread에게 지시하면 됨

하지만! JS는 싱글 쓰레드로 동작한다.
그렇다면 어떻게 해야할까?

그냥 작업을 여러개 동시에 실행시켜보자.

즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행하도록 하는 것이다.

-> 이게 비동기 작업 // 논 블로킹 방식

그럼 이 비동기로 실행된 작업들이 어떻게 끝났고 완료 되었는지 확인은 어떻게 할까?? 상단에 써놓은 코드를 예시로 들었을 때

function taskA(resultA) {
  console.log(`TASK A작업이 끝났습니다 결과 :${resultA}`)
}
function taskB(resultB) {
  console.log(`TASK B작업이 끝났습니다 결과 :${resultB}`)
}
function taskC(resultC) {
  console.log(`TASK C작업이 끝났습니다 결과 :${resultC}`)
}

작업이 끝나면 실행하도록 콜백 함수를 붙여서 전달해주면 된다.

연습해보기

function taskA() {
 console.log("A작업 끝") 
}

taskA();
console.log("코드 끝");

// A작업 끝
// 코드 끝

taskA의 함수가 끝난 뒤 코드 끝이라는 코드가 동작함으로 비동기 방식이라고 생각하면 된다

function taskA() {
 setTimeout(()=>{
   console.log("A작업 끝")
 },2000) 
}

taskA();
console.log("코드 끝");

// 코드 끝
// A작업 끝

이번엔 코드 끝이 먼저 나왔다. taskA가 끝나기 전에 코드 끝이라는 코드가 실행 됐는데 비 동기 방식이라 생각하자

function taskA(a, b, cb) {
 setTimeout(()=>{
   const res = a + b;
   cb(res)
 },2000); 
}

taskA(3, 4, (res)=>{console.log("A TESK RESULT : ", res)});
console.log("코드 끝");

// 코드 끝
// A TESK RESULT : 7

왜 이렇게 진행 될까?

JS 엔진은 Heap과 Call Stack 이라는 메모리 할당과 코드 실행으로 구성되어 있다.

JS가 처음 시작되면

• Main Context 라는 JS의 최상이 문맥이 들어간다.(Main Context가 들어오는 부분이 시작이고 나가는 부분이 끝이라고 생각하자)
• 코드를 차례대로 실행하기 위해 그 위로 차곡차곡 스택을 쌓아간다.
• 이후 실행 완료를 끝나면가장 마지막 호출 된 실행 코드부터 Out