[JavaScript] Sync & Async

유얌얌·2024년 11월 5일

CS

목록 보기

9/15

🫧 Sync & Async

✔️ Sync 동기

프로그램의 실행 흐름이 순차적으로 진행
하나의 작업이 완료된 후에 다음 작업이 실행되는 방식

메인 작업이 모두 수행되어야 마지막 작업이 수행됨

요청 후 응답이 이루어져야 진행 가능

동기 통신의 장점

비동기 통신보다 코드 작성과 이해가 쉽다.
요청과 응답이 순차적으로 이루어지기 때문에 코드의 간결성과 직관성 유지
요청과 응답의 순서 보장
요청과 응답이 연결되어 있기 때문에, 에러가 발생했을 때 에러에 대한 처리가 쉬울 수 있음

동기 통신의 단점

전체 페이지를 다시 로딩하기 때문에 서버와의 통신량이 많아지고, 자원과 시간이 낭비될 수 있어, 웹페이지의 속도와 성능이 저하될 수 있다.
따라서 화면이 깜빡거리거나 멈추는 현상이 발생하기 때문에 사용자가 불편함을 느껴 사용자 경험이 떨어질 수 있다.
요청과 응답이 동시에 일어나야 하기 때문에 요청을 보낸 후에는 다른 작업을 할 수 없다.

✔️ Async 비동기

프로그램의 실행 흐름이 순차적이지 않으며, 작업이 완료되기를 기다리지않고 다음 작업이 실행
작업의 완료 여부를 신경 쓰지않고, 동시에 다른 작업들을 수행할 수 있음

병렬적 수행

요청과 응답의 순서 보장 X

비동기 통신의 장점

전체 페이지를 다시 로딩하지 않고 필요한 부분만 업데이트하기 때문에 웹페이지의 속도와 성능을 향상시킬 수 있다.
서버와의 통신량이 줄어들고, 자원과 시간을 절약할 수 있다.화면이 깜빡거리거나 멈추지 않고 부드럽게 작동하기 때문에 사용자 경험을 개선시킬 수 있다.
요청과 응답이 동시에 일어나지 않아도 되기 때문에 요청을 보낸 후에 다른 작업을 할 수 있다.

비동기 통신의 단점

동기 통신보다 코드를 작성하고 이해하는 것이 어려워 코드의 복잡도가 증가할 수 있다.
요청과 응답의 순서를 보장할 수 없다.
에러가 발생했을 때 어떤 요청에서 에러가 발생했는지 파악하고 처리하는 것이 쉽지않을 수 있다.

🫧 JavaScript와 비동기

JS는 Single Thread 언어 !
처리할 수 있는 머리가 1개 (일을 한 번에 하나밖에 못함)

Thread란 ?
작업을 처리할 때 실제로 작업을 수행하는 주체로, multi-thread라면 업무를 수행할 수 있는 주체가 여러 개라는 의미

JS는 싱글스레드 언어로 동시에 여러가지일을 수행할 수 없음.
그럼 어떻게 비동기로 작업하는가

⮕ 자바스크립트가 바로 처리 할 수 없는건 브라우저가 받아서 도와줌 ! 그래서 한 번에 여러일을 하는 것처럼 보임

✔️ JavaScript Runtime

JavaScript가 동작할 수 있는 환경(Runtime)
JavaScript 자체는 Single Thread이므로 비동기 처리를 할 수 있도록 도와주는 환경 필요
JavaScript에서 비동기와 관련한 작업은 '브라우저'또는 'Node'와 같은 환경에서 처리

✔️ 브라우저 환경에서의 JavaScript 비동기 처리 관련 요소

JavaScript Engine의 CallStack
Web API
Task Queue
Event Loop

✔️ 브라우저 환경에서의 JavaScript 비동기 처리 동작 방식

모든 작업은 Call Stack으로 들어간 후 처리된다.
오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 한다.
Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고 Task Queue에 순서대로 들어간다.
Event Loop가 Call Stack이 비어있는 것을 계속 체크하고 Call Stack이 빈다면 Task Queue에서 가장 오래된(가장 먼저 처리되어 들어온) 작업을 Call Stack으로 보낸다.

console.log('Hi')

    setTimeout(function () {
	console.log('Work')
    }, 3000)

	console.log('Bye')

3초 뒤에 콘솔에 출력 (X)
3초 뒤에 Task Queue로 들어간다는 의미(O)

✔️ 비동기 처리 동작 요소

Call Stack

요청이 들어올 때마다 순차적으로 처리하는 Stack
기본적인 JavaScript의 Single Thread 작업 처리

Web API

JavaSciprt 엔진이 아닌 브라우저에서 제공하는 runtime 환경
시간이 소요되는 작업을 처리 (setTimeout, DOM Event, AJAX 요청 등)

Task Queue (Callback Queue)

비동기 처리된 Callback 함수가 대기하는 Queue

Event Loop

태스크(작업)가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우에는 잠드는, 끊임없이 돌아가는 자바스크립트 내 루프
Call Stack과 Task Queue를 지속적으로 모니터링
Call Stack이 비어 있는지 확인 후 비어 있다면, Task Queue에서 대기 중인 오래된 작업을 Call Stack으로 Pusj

JavaScript는 한 번에 하나의 작업을 수행하는 Single Thread 언어로 동기적 처리를 진행

하지만 브라우저 환경에서는 Web API에서 처리된 작업이 지속적으로 Task Queue를 거쳐 Event Loop에 의해 Call Stack에 들어와 순차적으로 실행됨으로써 비동기 작업이 가능한 환경이 됨

동기와 비동기의 차이점

동기는 프로그램의 실행 흐름이 순차적으로 진행되는 방식입니다. 하나의 작업이 완료된 후에 다음 작업이 실행됩니다. 이에 반해 비동기는 프로그램의 실행 흐름이 순차적이지 않으며, 작업이 완료되기를 기다리지않고 다음 작업이 실행됩니다. 작업의 완료 여부를 신경 쓰지않고, 동시에 다른 작업들을 수행할 수 있습니다.

이벤트 루프와 태스크 큐에 대해서 알고있나요?

이벤트 루프는 태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우에는 잠드는, 끊임없이 돌아가는 자바스크립트 내 루프입니다.
태스크 큐는 Web API에서 처리가 끝난 작업들이 대기하는 큐입니다.