동기와 비동기

난 왜... 동기와 비동기가 참 이해가 안될까...

 

동기

코드를 위에서부터 아래로 순차적으로 실행

식당이 있는데 주인장 한 명 밖에 없음

그러면 손님 여러 명이 와도 주인장 1명만 일하니까

첫번째 손님 주문 받고 첫번째 손님 요리하고 첫번째 손님 음식 나가고

두번쨰 손님 주문 받고 두번째 손님 요리하고 두번째 손님 음식 나가고

...

이렇게 순차적 일을 진행할 수 밖에 없음. 이것이 동기

그림으로 표현하면 아래와 같다

 

비동기

코드가 동시에 일을 처리할 수 있음

식당이 있는데 주인장 한 명이랑 직원 2명이 있음

그러면 손님 여러 명이 오면

첫번째 손님이 직원1한테 주문 받는 동시에 두번째 손님이 직원2한테 주문 받고

주인장이 첫번째 손님 요리하고 직원1이 첫번째 손님 음식 나가고

주인장이 두번째 손님 요리하고 직원2가 두번째 손님 음식 나가고

...

이렇게 직원1,2가 동시에 일하는 구간이 생기게 됨. 이것이 비동기 

그림으로 표현하면 아래와 같다

 

코드로 생각해보자면

console.log(1);

function a(){
	API 호출 ajax
}

function callback(){
	a함수 callback 함수
    console.log(3);
}

console.log(2);

만약 이 코드가 무조건 동기적으로 처리된다고 생각하면

1 이 출력되고

API 호출을 하고 서버에서 응답을 받아서 callback 함수가 실행(시간이 꽤 걸릴 것임)되어서 3이 출력

2 가 출력되어서

이 1 -> 3 -> 2 순서로 출력된다.

 

하지만 비동기 처리가 된다면

1 이 출력되고

API 호출을 하고 서버에서 응답을 받아서 callback 함수가 실행하는데 시간이 오래 걸리니까 2가 먼저 출력

그리고 callback함수가 실행이 완료되어서 3 이 출력되어서

1 -> 2 -> 3 순서로 출력된다.

 

동기와 비동기의 큰 차이는 동시 처리이다.

그래서 프론트에서 API호출할 때 서버로부터 응답을 받아오는 시간까지 마냥 화면이 멈춰있지 않고 다른일을 할 수 있다.(가령... 뭐 다른 버튼들을 클릭을 할 수 있다던가... 그런 일...?)

이래서 API호출을 비동기로 한다.

까먹지 말자...