동기(Synchronous)/비동기(Asynchoronous)

용어 정리

• 동기(Synchronous): 데이터 요청과 결과가 동시에 일어나는것
  • 요청을 하면 시간이 얼마가 걸리든지 결과가 동시에 일어나야함
  • 언어에는 동기/비동기 언어가 없다. 처리 방식의 차이
• 비동기(Asynchronous): 데이터 요청과 결과가 동시에 일어나지 않는 것
  • 데이터를 요청한 후에 응답을 기다리지 않고 다른 작업을 수행할 수 있음
  • 동기와 반대개념
• 메모리 힙(Memory Heap): 변수와 객체의 메모리 할당을 담당하는 곳
  • 자바스크립트 엔진의 주요 구성 요소
• 호출 스택(Call Stack): 함수가 호출이 되면 쌓이는곳. 쌓이는 순서와는 반대로 실행(LIFO)
  • 자바스크립트 엔진의 주요 구성 요소
  • Last in First Out(LIFO)
• Web Apis: 브라우저에서 제공하는 api들
  • DOM(document)
  • AJAX(XMLHttpRequest)
  • Timeout(setTimeout)
• 콜백 큐(Callback Queue): 콜백 함수들이 대기하는 곳(FIFO)
• 이벤트 루프(Event Loop): call stack이 비워질때마다 callback queue에 대기중인 콜백함수가 있다면 callback 함수를 call stack에 보내줌
• 비동기 콜백(asynchronous callback): Web APIs, Promise
• 콜백 함수(callback function): 함수의 매개변수를 함수로 받는 함수

동기(Synchronous)

설계가 매우 간단하고 직관적, 하지만 결과가 주어지기 전까지 대기만 해야함.

추구하는 행위와 목적이 동시에 이뤄져야할때 동기 방식을 사용해야한다.

• 예제) 소금이가 설탕이에게 일만원을 입금

  1. 소금이는 간식계좌에서 일만원 출금할 예정이다

     → 소금이의 간식계좌에서 일만원이 출금되어 설탕이의 한끼계좌에 전송한다

  2. 설탕이의 한끼계좌에는 일만원이 입금될 예정이다

     → 설탕이의 한끼계좌에서 일만원을 받았다고 인지하고, 받았다는 메시지를 전송한다

  3. 소금이의 간식계좌와 설탕이의 한끼계좌에서 각각 일만원이 출금/입금이 되었으며,
     이는 동시에 발행하였다

→ 소금이의 간식계좌와 설탕이의 한끼계좌는 서로 요청과 응답을 확인한 후 출금과 입금이 동시에 발생했다. 둘 다 계좌에서 돈이 들어오고 나가고 같은 목적이 있었다.

서로의 행위(목적)이 동일하여 작업이 동시에 일어나야한다.

비동기(Asynchronous)

요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행할 수 있지만, 설계가 복잡함.

추구하는 행위화 목적이 다를 수도 있으며, 동시에 이뤄지지 않아도 될 때 비동기를 사용한다.

• 예제) 소금이가 받아쓰기 한 후에 설탕이가 채점을 함

  1. 소금이가 받아쓰기를 진행함 → 제출

  2. 설탕이가 소금이의 받아쓰기를 채점함

     → 소금이는 즐거운 마음으로 산책을 하러 감

  3. 설탕이가 소금이 책상에 받아쓰기 채점한 결과를 올려놓음

  4. 산책을 갔다온 소금이가 받아쓰기 결과를 확인함

→ 소금이와 설탕이는 시험이라는 연결고리가 존재하지만, 받아쓰기 시험을 행하는 목적이 서로 다르다. 소금이는 시험을 풀어야하는 목적이 있었고, 설탕이는 채점을 하는 목적이 있었다.

서로의 행위(목적)이 다르기 때문에 작업 처리 시간은 일치하지 않고 일치하지 않아도 된다

자바스크립트에서의 동기/비동기

자바스크립트는 싱글쓰레드 기반 언어이다. 호출 스택에 쌓인 작업들을 바로 바로 처리한다