dic: 동기와 비동기

실행의 흐름이 비동기(asynchronus) with chatGPT

 

자바스크립트에서 **동기(synchronus)와 **비동기(asynchcronus) 처리 방식은 코드 실행의 흐름을 관리하는 방식에 차이가 있습니다. 자바스크립트는 기본적으로 **싱글 스레드(single-threaded)로 동작하는데, 이는 한 번에 하나의 작업만 수행할 수 있다는 의미입니다. 따라서 비동기 작업이 필요할 때는 자바스크립트의 비동기 처리 메커니즘을 사용해 효율적으로 처리할 수 있습니다.

 

1. 동기(synchronus) 작업

동기 작업은 코드가 작성된 순서대로 실행되는 방식입니다. 한 작업이 끝나기 전까지는 다음 작업으로 넘어가지 않습니다. 동기 작업에서는 한 번에 하나의 작업만 수행할 수 있기 때문에, 실행 시간이 오래 걸리는 작업(예: 파일 읽기, 네트워크 요청)이 있으면 전체 프로그램이 멈출 수 있습니다.

console.log("작업 1 시작");
console.log("작업 2 시작"); //이 작업이 끝나야 다음 작업으로 넘어감
console.log("작업 3 시작");

//출력은 순서대로
//작업 1 시작
//작업 2 시작
//작업 3 시작

 

2. 비동기 작업

비동기 작업은 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 실행하는 방식입니다. 주로 콜백함수(callback function), Promise, async/await 를 통해 비동기 처리를 수행합니다. 비동기 처리는 실행 시간이 오래 걸리는 작업을 수행하면서도, 프로그램이 멈추지 않고 다른 작업을 계속할 수 있도록 합니다.

console.log("작업 1 시작");

setTimeout(() => {
	console.log("작업 2 시작");
},2000);

console.log("작업 3 시작");

//출력 결과
//작업 1 시작
//작업 3 시작
//작업 2 시작 (비동기: 2초 후 완료)

이처럼 setTimeout은 비동기 함수 이므로 2초동안 기다리는 동안 다음 코드가 먼저 실행됩니다.

 

3. 비동기 처리 방식

자바스크립트에서 비동기 처리를 할 수 있는 몇가지 주요방식은 다음과 같습니다.

 

1) 콜백함수(callback Function)

비동기 작업이 완료된 후 실행할 함수를 콜백으로 전달하는 방식입니다. 하지만 콜백 함수는 **콜백 헬(callback hell)이라는 중첩된 코드 구조를 유발할 수 있어 복잡한 코드에서는 가독성이 떨어질 수 있습니다.

function asyncTask(callback){
	setTimeout(() => {
    	console.log("비동기 작업 완료");
        callback();
    }, 2000);
    
}

console.log("작업 시작");

asyncTask(() => {
 xonsole.log("콜백 작업 완료");
});

 

2)Promise

Promise는 ES6에서 도입된 객체로, 비동기 작업의 성공 또는 실패를 표현합니다. then과 catch를 사용하여 성공과 실패에 대한 작업을 정의할 수 있습니다.

ES6: Promise(프로미스) 참고

 

3)async / await

ES8에서 추가된 async와 await는 비동기 작업을 더 직관적이고 간결하게 표현할 수 있습니다. async함수 내에서 await 키워드를 이용해 Promise가 완료될 때까지 기다립니다. 이 방식은 비동기 작업을 마치 동기 코드처럼 작성할 수 있게 해 가독성을 높입니다.

ES6: Promise(프로미스) 참고