Java Script | 비동기 프로그래밍

목차

비동기 프로그래밍

1. 동기와 비동기의 차이점에 대해서 설명해줄 수 있나요?
   동기와 비동기는 어떤 작업 혹은 그와 연관된 작업을 처리하고자 하는 목적의 차이
   동기는 추구하는 행위와 목적이 동시에 이루어짐
   비동기는 추구하는 행위와 목적이 다를 수 있고, 동시에 이루어지지 않음
   
   

2. 비동기적으로 실행되는 것을 동기적으로 코딩하는법
   1. 콜백 함수 사용
   2. Promise 객체
   3. async/ await
   

3. 이벤트 루프와 태스크 큐에 대해서 알고 있나요?
   이벤트 루프 : 브라우저에 내장되어있는 기능으로 자바스크립트의 동시성을 지원함
   태스크 큐 : 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
   
   

4. 마이크로태스크 큐에 대해서 알고 있나요?
   태스크큐 와 별도의 큐로 후속 처리 메서드의 콜백 함수가 일시 저장
   

DOM

1. 동기와 비동기의 차이점에 대해서 설명해줄 수 있나요?

1. 동기(Synchronous)

   • 요청과 결과가 한 자리에서 동시에 일어남
   • 설계가 매우 간단하고 직관적
   • 결과가 주어질 때까지 아무것도 못하고 대기해야함
     
     

2. 비동기(Asynchronous)

   • 동시에 일어나지 않음
   • 요청한 그 자리에서 결과가 주어지지 않음
   • 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있음
   • 자원을 효율적으로 사용

   

• 동기와 비동기는 어떤 작업 혹은 그와 연관된 작업을 처리하고자 하는 목적의 차이
• 동기는 추구하는 행위와 목적이 동시에 이루어짐
• 비동기는 추구하는 행위와 목적이 다를 수 있고, 동시에 이루어지지 않음

2. 비동기적으로 실행되는 것을 동기적으로 코딩하는법

1. 콜백 함수 사용 : 함수의 반환 값을 받아서 다음 비동기 처리를 해야하는 경우에 위와 같이 다음 함수를 콜백으로 받아 비동기 처리를 할 수 있음(콜백 지옥의 문제가 있음)
2. Promise 객체 : 결과 값을 돌려받을 수 있기 때문에 이후 처리를 컨트롤 할 수 있음
3. async/ await : Promise를 사용하지만 then, catch 메소드를 사용하여 컨트롤 하는 것이 아닌 동기적 코드처럼 반환 값을 변수에 할당하여 작성할 수 있게끔 도와주는 문법

3. 이벤트 루프와 태스크 큐에 대해서 알고 있나요?(+ 마이크로태스크 큐)

• 브라우저 환경(멀티스레드) : 자바스크립트의 비동기 처리를 돕기 위해 다음과 같은 영역 & 기능을 제공함

• 큐(queue) : 스택 자료구조와 달리 선입선출 형식을 띔(F.I.F.O)
  
  

  1. 태스크 큐(task queue / event queue / callback queue)

     • 비동기 함수의 콜백 함수(ex. setTimeout, setInterval) or 이벤트 핸들러가 일시적으로 보관되는 영역
     • 태스크 큐와 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재함
       
       

  2. 마이크로태스크 큐(microtask queue / job queue)

     • 태스크 큐보다 우선순위가 높음
     • 프로미스의 후속 처리 메서드의 콜백 함수는 마이크로태스크 큐에 일시저장됨
       
       

     setTimeout(() => console.log(1), 0);
     
     Promise.resolve()
       .then(() => console.log(2))
       .then(() => console.log(3));
     

     • 출력 순서( 2-3-“promise 발생”-1)
       
       

  3. 이벤트 루프(event loop)

     • 자바스크립트의 동시성을 지원함
     • 브라우저에 내장되어 있는 기능
     • 콜 스택에서 현재 실행 중인 실행 컨텍스트가 있는지 & 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인함

     • 만약 콜 스택이 비어있고, 태스크 큐에 대기중인 함수가 있다면, 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동 시킴

       function foo() {
         console.log("foo");
       }
       
       function bar() {
         console.log("bar");
       }
       
       setTimeout(foo, 0); // 0초(실제는 4ms) 후에 foo 함수가 호출된다.
       bar(); // bar / foo
       

---

*230106 비동기적으로 실행되는 것을 동기적으로 코딩하는법 추가

출처

동기와 비동기
이벤트 루프와 데스크 큐
비동기 프로그래밍
큐의 진행
비동기를 동기적으로