[JS] 동기/비동기 처리

 

 

동기 방식은 서버에서 클라이언트로 요청을 보냈을 때 응답이 돌아와야

 

다음 작업을 수행할 수 있는 방식이다.

 

즉, 선행작업이 아직 끝나지 않은 상태라면 후행작업은 대기해야만 한다. 

 

이와 다르게 비동기 방식은 요청을 응답이 돌아오느냐에 상관없이

 

현재 작업이 시작하면 동시에 다음작업도 실행된다.

 

 

동기적 처리 (Synchronous)

 

동기적 처리의 예시를 들어보면 아래와 같다.

console.log('front');
console.log('middle');
console.log('back');

기본적으로 절차적 프로그래밍에 익숙해진 개발자라면

 

이 정도의 결과는 당연히 코딩한 순서대로 나온다는 것을

 

예측할 수 있을 것이고 예측대로 답이 도출될 것이다.

 

 

 

비동기적 처리 (Asynchronous)

 

비동기처리의 가장 대표적인 예시는 setTimeout 함수를 이용한 예시이다.

console.log('front');
setTimeout(() => {
	console.log('middle');
},0)
console.log('back')

setTimeout의 첫 번째 파라미터는 콜백함수이고,

 

두 번째 인자는 지연시간이다.

 

두 번째 인자가 0이므로 당연히 바로 실행될 것이라고 예상할 수 있다.

 

 

하지만 충격적 이게도 출력결과는 다르다.

 

 

위와 같은 결과가 나온 이유는 JavaScript 에서 setTimeout 함수는 비동기적 함수이기 때문이다.

 

위의 코드를 해석해 보면 아래와 같다.

 

1. console.log('front'); 로 인하여 콘솔창에 'front'를 출력해 준다.

2. setTimeout() 함수를 만났지만 해당 함수가 비동기적 함수이기 때문에 이를 처리하는 다른 프로그램에 맡긴다.

3. 곧바로 console.log('back'); 으로 인해서 콘솔창에 'back'을 입력해 준다.

4. 비동기적 처리를 수행하는 setTimeout() 함수는 모든 동기처리 프로세스가 끝난 후에 콘솔창에 출력되게 된다.

 

 

 

 

 

동기 / 비동기적 처리의 장단점

 

1. 동기적 처리(Synchronous)의 장점

 

- 코드가 간결하고 이해하기 쉽다.

 

- 디버깅이 비동기적 처리에 비해 쉽다.

 

- 데이터를 보다 안전하게 처리할 수 있다.

 

 

2. 동기적 처리(Synchronous)의 단점

 

- 실행시간이 오래 걸리는 작업의 경우, 전체 프로그램의 실행 시간이 길어질 수 있다.

 

- 대기 시간이 발생하면, CPU와 메모리 자원을 낭비하게 된다.

 

- 여러 작업을 동시에 처리할 수 없으므로 쓰루풋(throughput)이 제한된다.

 

 

3. 비동기적 처리(Asynchronous)의 장점

 

- 실행시간이 오래 걸리는 작업이 있어도, 다른 작업을 동시에 처리할 수 있으므로

 

전체 프로그램의 실행 시간이 짧아진다.

 

- 대기 시간이 발생해도 CPU와 메모리 자원을 효율적으로 사용할 수 있다.

 

그러므로 전체적인 쓰루풋(throughput)이 높아진다.

 

 

4. 비동기적 처리(Asynchronous)의 단점

 

- 코드가 동기적 처리보다 상대적으로 복잡하고 이해하기 어렵다.

 

- 데이터 처리 중 오류가 발생할 경우, 전체 프로그램이 중단될 수 있다.

 

- 동기적 처리보다 데이터 처리가 불안정할 수 있다.