동기 vs 비동기

동기 비동식 방식을 알아야 하는 이유

• 자바스크립트는 기본적으로 동기처리를 하기 때문에 결과가 오래 걸리는 코드를 작성시 결과가 나오기 전까지 아무것도 출력하지 않음
• 결과를 출력하기 전까지 "출력 중"이라는 문구정도는 나올 수 있게 하기 위해서 비동기 처리
• 이 외에도 동기 비동기 방식은 여러가지 알아두면 최적화에 도움이 많이 되기 때문에 꼭 알아야 함

동기식

• 동기식 : 클라이언트가 서버에게 요청을 보내면 다른 작업을 처리하지 않고 요청을 우선적으로 수행하는것을 의미
• 사진처럼 두 줄에 요청과 응답 존재,
  • 말 그대로 클라이언트가 서버에게 요청을 보내면 응답을 받기 전까진 아무런 처리 x
  • 클라이언트가 응답을 받게 되면 그때가 되서야 다른 요청을 처리하는 것을 동기식 즉 동기라고 함
• 이처럼 동기는 요청을 보내고 응답을 받는다 라는 전제
• 장단점
  • 장점 : 응답의 순서를 보장
  • 단점
    • 응답이 지연된다면 무작정 기다리게 됨
    • 응답이 지연되면 뒤에 들어오는 요청들은 연결가능한 쓰레드가 없어서 연결을 하지 못해 발생하는 여러 이슈가 생김
• 사용 예
  • 채팅 프로그램
    • 사용자가 입력한 메시지를 서버로 전송하고, 서버는 메시지를 다른 사용자에게 전달
    • 메시지를 서버에 전송하고 서버는 다른 사용자에게 전송 이라는 방식 사용하므로 동기
  • 웹 서버
    • 클라이언트로부터 요청을 받아 처리하는데 각각의 요청은 순차적으로 처리
  • 계산기 프로그램
    • 입력값을 받고 연산하고 결과를 반환하는 구조

비동기식

• 동기식은 응답이 지연되도 계속 기다린다는 단점 존재 -> 이 부분을 보완한 방식이 비동기식

• 비동기식
  • 클라이언트가 요청을 보내고나서 서버의 응답을 언제 받아도 상관 없다는 뜻으로 응답을 기다리지 않는 상태
  • 응답을 기다리지 않으니 순서도 보장하지 않습니다.
• 사진처럼 두 줄에 요청과 응답 존재,
  • 클라이언트가 요청을 보내고 나서 응답을 기다리지 않고 다음 요청을 보내거나 작업 진행
• 장단점
  • 장점 : 클라이언트가 요청을 보내고 나서 응답을 기다리지 않으니 다른 일을 할 수가 있어 효율이 좋음
  • 단점
    • 처리 결과를 보장받아야 하는 서비스에는 적합하지 않음
    • 결과를 확인하기 위해서는 콜백함수가 필요하니 복잡
• 사용 예
  • 웹 애플리케이션, 네트워크 애플리케이션, 게임서버
    • 많은 사용자들이 동시에 접속해 요청
    • 이 요청의 처리 속도를 높이기 위해 비동기식 방식을 이용

블로킹 vs 논블로킹

• 동기/비동기를 잘 이해하기 위해서는 블로킹/논블로킹의 개념도 알아야 함
• 블로킹, 논블로킹은 제어권을 건내주느냐 안주느냐로 구분

  제어권 : 행동할 수 있는 권리

블로킹

• 블로킹 : 사진 속 두 개의 함수 참고
  • A 함수가 B 함수를 호출하면서 제어권도 B 함수에 넘겨줌
  • 제어권을 넘겨받은 B는 함수를 실행하고 A는 B에게 제어권을 넘겨주었기 때문에 함수 실행을 잠시 멈춤
  • B함수는 실행이 끝나면 자신을 호출한 A에게 제어권과 B함수 결과를 돌려주고 있음

논블로킹

• 논블로킹 : 사진 속 두 개의 함수 참고
  • A함수가 B함수를 호출해도 제어권은 그대로 자신이 갖고 있음
  • A함수가 B함수를 호출하면, B 함수는 실행되지만, 제어권은 A 함수가 그대로
  • A함수는 계속 제어권을 가지고 있기 때문에 B함수를 호출한 이후에도 자신의 코드를 계속 실행

B 함수의 결과값은 어디로 갈까요? -> 조합에서 확인 가능

조합

• 논블로킹
  • 동기
    • 완료될 때 까지 진행상황을 확인하기 위해 호출
    • 완료값을 확인 후 완료값 사용
  • 비동기
    • 완료되는 시점이 중요 x
    • 하라고 냅두고 콜백으로 필요할 때 사용할 뿐
• 블로킹 : 두 개 다 파란함수는 결과가 반환될 때까지 대기
  • 동기
    • 반환값을 기반으로 다음 함수를 진행
  • 비동기
    • 호출 함수로 반환값을 받지만 그 값을 바로 이용할 지 안할지는 알 수 없음

즉,

• 블로킹 / 논블로킹: 한 작업이 처리되는 동안 다른 작업도 처리될 수 있는지
• 동기 / 비동기 : 작업들이 결과값을 순서대로 실행하는지 아닌지에 대해 나타냄

조합 예시

동기-블로킹

• 파란 박스

  • 파란함수는 초록함수의 리턴값을 필요로 하는 동기식이고 그에 따라 파란함수에서 초록함수를 호출하고 제어권을 넘겨줌
  • 그렇게 제어권을 초록함수에 넘겨주고 초록함수가 실행을 완료해서 리턴값과 제어권을 돌려줄때까지 파란함수는 기다리게 되는 동기 블로킹 방식

• 예시

  • 코드를 보면 teacher함수를 실행하게 되면 선생님이 입실하는 메시지가 뜨고 student함수가 실행
  • 이때 teacher함수는 student함수가 리턴값과 제어권을 돌려줄때까지 대기
  • 그리고 student에 for문으로 문제푸는 메시지를 반복해서 출력합니다.
  • student함수가 종료되서야 다시 teacher함수가 실행되고 선생님이 퇴실하는 메시지가 뜸

teacher는 student함수가 리턴할때까지 기다리는 동기구조 및
블로킹 방식이 되기 때문에 동기 블로킹 방식 성립

동기-논블로킹

• 노란박스

  • 파란함수는 초록함수를 호출
  • 이 때 파란함수는 초록함수에게 제어권을 주지 않고, 자신의 코드를 계속 실행함으로서 논블로킹 방식
  • 그런데 파란함수는 초록함수의 리턴값이 필요하기 때문에, 중간중간 초록함수에게 함수 실행을 완료했는지 물어봄으로써 동기식 구조

• 영상 참고 : 퇴근시간 조회 버튼을 누르게 되면 남은 퇴근시간을 초 단위로 보여줌

  • 버튼을 누르면 체크타임 함수를 불러오고
  • 이 체크타임 함수는 셋팅된 퇴근시간과 현재시간을 빼 남은시간을 초단위로 불러옴

파란함수를 가상의 A 직원이 하는 업무, 그리고 퇴근시간을 조회하는 이 코드를 초록함수로 가정

• A 직원은 자신의 업무 하면서 퇴근시간이 얼마나 남았는지 계속 알고 싶으니 초록함수를 수시로 확인
• 초록함수가 완료가 되면 퇴근시간이므로 A직원의 업무도 끝

즉,

• 직원은 완료 전에 업무를 계속하고 있으니 퇴근 시간을 조회하는 초록함수에게 제어권을 주지 않기에 논블로킹 방식
• 중간중간 수시로 퇴근시간이 얼마나 남았는지 확인함으로서 동기식 구조를 완성

비동기-블로킹

• 빨간박스
  • 파란함수는 초록함수의 리턴값에 신경쓰지 않고, 콜백함수를 보내서 비동기 방식
  • 그런데, 초록함수의 작업에 관심없음에도 불구하고, 파란함수는 초록함수에게 제어권을 넘겨서 블로킹 방식
  • 그래서 파란함수는 자신과 관련 없는 초록함수의 작업이 끝날 때까지 기다려야 함
• 예시
  • 직원이 출근 후 본인 일을 시작하고 작업진행 중 상사에게 서류를 제출
  • 직원은 서류를 제출하고 그 서류가 상사에 의해 검토 완료 될 때까지 직원은 본인 일을 할 수 없음
  • 제출한 서류의 검토가 끝나고 메일로 결과를 통보 받은 뒤에야 직원은 본인일을 마저 마칠 수 있음
• 예시 코드
  • employee함수로 진행중에 manager라는 함수를 불러옴
  • employee함수는 대기, manager함수가 진행
  • manager함수는 i값이 100이 될때까지 계속해서 진행하고 i값이 100보다 커지면 검토 완료라는 메시지와 함께 manager함수는 종료
  • manager함수가 종료되고 나서야 employee함수가 나머지 작업을 끝내고 서류검토를 완료했다는 코드

비동기 블로킹의 방식의 경우 동기식 블로킹과 차이가 거의 없어 사용 x

비동기 - 논블로킹

• 초록박스

  • 파란함수가 초록함수를 호출할 때 제어권을 초록함수에 주지 않음으로서 논블로킹 방식
  • 따라서 초록함수를 호출한 이후에도 멈추지 않고 자신의 코드를 계속 실행
  • 초록함수를 호출할 때 콜백 함수를 함께 줌
  • 초록함수는 자신의 작업이 끝나면 파란함수가 준 콜백함수를 실행

• 예시

  • 사원은 본인 작업을 하다가 상사에게 서류를 제출하고 다시 본인 일을 하러 감
  • 상사는 작업을 검토하고 그동안 사원은 계속 자기 할 일
  • 상사는 검토가 끝나면 직원에게 이메일을 보내기만 하면 됨

• 예시 코드

  • employee함수 실행
  • 서류를 제출하면서 manager함수를 호출하지만 employee함수는 제어권을 넘기지 않기 때문에 바로 본인 일을 하러 감
  • 실행된 manager함수를 보면 10마다 진행률을 보여줌
  • 100이 되면 콜백함수를 호출하여 이메일 확인하라는 메세지를 출력하고 클리어인터벌함수로 갱신을 중단

마지막 정리

• 동기식과 비동기 블로킹과 논블로킹은 비슷하지만 바라보는 관점에서 차이
  • 동기식과 비동기식은 순서와 결과값의 영향 여부
  • 블로킹과 논블로킹은 제어권의 위치가 이동하는 지 여부

모두 추상적인 개념이라 어떤 메서드를 가지고 이렇다 저렇다 확실하게 나누기는 어렵다!!

출처

https://gyoogle.dev/
https://homoefficio.github.io/
https://velog.io/@nittre/