자바스크립트 동기 및 비동기

JavaScript 동기(Synchronous) 및 비동기(Asynchronous)

JavaScript는 싱글 스레드(single thread)에서 실행됩니다. 이는 한 번에 한 가지 작업만 수행한다는 것을 의미합니다. 효율적인 코드를 작성하려면 JavaScript가 작업을 처리하는 방식을 이해해야 합니다.

동기(Synchronous) JavaScript

동기 코드는 한 줄씩 실행됩니다. 각 작업은 이전 작업이 완료될 때까지 기다립니다. 이를 블로킹(blocking)이라고 합니다. 만약 하나의 작업이 오래 걸리면 전체 프로그램이 멈추게 됩니다.

• 실행: 고정된 순서.
• 블로킹: 있음.
• 복잡도: 단순함.
• 적합한 용도: 단순하고 순차적인 작업.

비동기(Asynchronous) JavaScript

비동기 코드는 독립적으로 실행됩니다. 작업이 대기하는 동안 다른 코드를 차단하지 않습니다. 이를 논블로킹(non-blocking)이라고 합니다. 작업은 백그라운드에서 시작되며 완료되면 알림을 전달합니다.

• 실행: 작업이 독립적으로 실행됨.
• 블로킹: 없음.
• 복잡도: 높음.
• 적합한 용도: API 호출, 타이머, 파일 작업.

비동기 작업을 처리하는 세 가지 방법:

1. Callbacks: 작업이 완료된 후 실행되는 함수.
2. Promises: 작업의 완료 또는 실패를 나타내는 객체.
3. Async/Await: 가장 깔끔한 방식입니다. 스레드를 차단하지 않으면서 비동기 코드를 동기 코드처럼 보이게 만듭니다.

일반적인 비동기 작업:

• 타이머: setTimeout()
• API 호출: fetch()
• 파일 읽기: readFile()
• 사용자 이벤트: addEventListener()

Event Loop가 이 과정을 가능하게 합니다. Event Loop는 Call Stack, Web APIs, 그리고 Callback Queue를 사용하여 여러 작업을 동시에 관리합니다.

요약:

• 동기(Synchronous): 순차적으로 실행. 실행을 차단함.
• 비동기(Asynchronous): 독립적인 작업. 차단하지 않음.
• JavaScript 기본 방식: 동기(Synchronous).

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.w3schools.com/js/js_asynchronous.asp Source: https://medium.com/@mohdtalib.dev/what-is-synchronous-and-asynchronous-in-javascript-07adb7b4cc5f

Full post: https://dev.to/raja_b_0c9d242e2c26cf063b/javascript-synchronous-and-asynchronous-2a69