동기요청? 비동기요청? promiss? async? await?

동기(synchronous)

자바스크립트에서 코드가 위에서부터 아래로, 작업이 끝난 이후 다음 작업을 진행하는 방식으로 무조건 순서를 지키는 것을 기본으로 둔다. 약간을 유도리없게 보일 수 있는게, 특정 코드가 작업을 처리하는 시간이 3초가 넘어가는 상황이라면, 이 3초가 끝날 때까지 작업이 전체 홀딩된다는 단점이 있다.

 

비동기(Asynchronous)

동기 방식대로 작업을 하지 않고, 작업시간이 걸리는 코드의 경우 다음 코드를 먼저 실행하라고 양보해주는 이쁜 녀석이다. 이러한 경우 전체 작업이 끝나는 시간이 대폭 줄어드는 아주 유도리있는 퍼포먼스를 보여준다. 대표적으로는 setTimeout이나 네트워크 통신을 위한 코드들이 있다. 

 

비동기의 문제

비동기 방식에는 문제가 있다. 네트워크 통신같이 서버에서 받아오는 결과값을 가지고 다음 작업을 진행해야 하는 경우이다. 비동기는 시간이 걸리는 작업을 진행하는 동안 다음 코드에게 순서를 양보하기 때문에 다음 코드가 네트워크 통신같이 서버에서 받아오는 결과값 'result'를 가지고 진행하는 경우 result가 빈 값(undefined 또는 null)을 돌려주기 때문이다.

 

promiss? async await?

비동기의 문제를 해결하기 위해 나온 기능이 바로 이것이다. promiss와 async await로 묶인 코드는 그 작업이 끝난 후에 다음 작업이 이루어지도록 지정할 수가 있다. 마치 동기 작업을 하는 것처럼!

주로 네트워크 통신 할 때 이 promiss 또는 async await로 묶는다.