[JavaScript] 자바스크립트 - 동기, 비동기 개념

JavaScript에서 아주 중요한 개념인 동기, 비동기에 대해 설명드리겠습니다.

 

1. 동기(Synchronous)

• 동기적인 코드 실행은 순차적인 진행을 의미합니다. 
• 코드는 한 번에 하나의 작업만을 수행하며, 이전 작업이 완료될 때까지 다음 작업을 시작하지 않습니다.
• 사용자가 어떤 동작을 실행하면, 해당 동작이 완료될 때까지 기다리며 다른 작업을 수행하지 않습니다.

동기 코드 예시

// 동기 코드
function synchronousFunction() {
    console.log("첫 번째 작업");
    console.log("두 번째 작업");
}

synchronousFunction();

 

 

2. 비동기(Asynchronous)

• 비동기 코드 실행은 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있는 방식입니다.
• 비동기 코드에서는 특정 작업이 완료되는 시점을 예측하기 어려울 수 있습니다.
• 대표적인 예로는 Aajx 요청, 파일 읽기, TimeOut 이벤트 등이 있습니다.

비동기 코드 예시

// 비동기 코드 
function asynchronousFunction() {
    console.log("첫 번째 작업");

    setTimeout(function() {
        console.log("두 번째 작업 (비동기적)");
    }, 1000);
}

asynchronousFunction();
console.log("다른 작업");

 위 코드에서 ' setTimeout ' 함수는 비동기적으로 실행되므로, 두 번째 작업은 1초 후에 출력됩니다.그 동안 다른 작업은 계속해서 진행되구요. 

 

 ajax역시 비동기적으로 동작하는 기술 중 하나로 웹 페이지에서 데이터를 서버로부터 가져오는 동안에도

사용자는 다른 작업을 수행할 수 있습니다. 

 

 비동기 코드는 콜백함수, Promise, async/await 등을 통해 작성되며, 이러한 도구들은 콛의 가독성을 향상시키고 복잡한 비동기 로직을 다루기 쉽게 해줍니다.