동기와 비동기 프로그래밍을 알고 계시나요?

동기 프로그래밍과 비동기 프로그래밍은 자바스크립트를 이해할 때 중요하고 자주 언급되는 부분이다
이번 글을 통해 동기와 비동기에 대해 꼭 이해 하도록 노력한다

브라우저는 실질적으로 프로그램을 작성한 순서대로 한 줄씩 실행한다 또한 브라우저는 한 줄씩 실행하고 처리하는 동안 다음 줄로 넘어가기 전까지 현재 라인의 작업이 끝날 때까지 기다린다

아래 예제는 동기 프로그래밍의 예시를 코드로 나타낸 MDN의 자료를 변형시켜 작성해 보았다

코드의 순서를 보자면

1. name이라는 문자열을 선언한다

2. name을 사용하여 greeting이란 또 다른 문자열을 선언한다

3. greeting을 Javascript 콘솔에 출력합니다

이건 동기 프로그래밍이다

동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다

예를 들어 매표소에 표를 사려고 하는 사람이 길게 있다고 가정하자

A라는 사람이 표를 구매할 때 A가 원하는 시간대, 연령대, 표의 갯수 등 매표소 직원이 A라는 사람의 조건에 맞게 처리하고 표를 주게 된다

이때 A라는 한 사람의 표를 처리하는 동안 뒤에 있는 B, C ,D 라는 사람은 아무것도 하지 못하고 그저 줄을 기다리고만 있는다

A라는 사람이 얼마나 걸리든 뒤에 있는 사람들은 표를 구매하지 못 한다

동기방식이라는 것은 결국 작업이 모두 진행이 되어야지만 그 다음 작업을 수행할 수 있다

코드를 보도록 하자

console.log() a, b , c 가 있고 여기서 비동기 함수인 setTimeout을 이용해 console.log('b')를 0의 시간을 가지니 바로 실행이 되어

결론적으로 abc순으로 콘솔에 찍혀야 맞다고 생각했지만

a > c > b 순으로 콘솔이 찍혔다

알아보니 비동기방식은 우선적으로 처리를 한다는 의미가 아닌 동기 처리를 하는 중 두 번째 콘솔 로그인 setTimeout 메서드를 만나 비동기 함수가 실행되면서 그 실행을 처리해줄 다른 프로그램에게 맡기고 바로 'c'에 해당하는 콘솔 로그를 찍는 것이다

비동기적 코드의 실행 결과는 동기적 코드가 전부 실행되고 나서 값을 반환한다

보통 비동기 처리를 해야 하는 경우

[참고]

메로나