동기와 비동기 코드 실행 방식

요약

동기 : 요청과 결과가 동시에 일어나는 - 코드가 한 줄 한 줄 끝날 때까지 기다리는 것

비동기 : 요청과 결과가 동시에 일어나지 않는 - 코드가 한 줄 끝나지 않아도 다음 코드를 먼저 실행하는 것

 

동기란? 

 - 직렬적으로 태스크를 수행하는 방식 ->  요청을 보낸 후 응답을 받아야지만 다음 동작이 실행되고 다른 태스크는 대기한다.

- 실제 CPU가 느려지는 것은 아니지만 시스템의 전체적인 효율이 저하

비동기란?

병렬적으로 태스크 수행 -> 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식

- 비동기 요청시 응답 후 처리 할 '콜백 함수'를 함께 알려준다. -> 해당 태스크가 완료되면 '콜백 함수' 호출

 

자바스크립트 비동기

싱글스레드인데? -> 이벤트 루프 덕분 (이벤트 루프는 자바스크립트꺼가 아닌 node와 브라우저에 있는 기능)

비동기 처리는 3가지로 가능

콜백함수

비동기 요청시 응답 후 처리할 콜백함수를 알려줌으로 비동기 처리를 할수는 있다.

하지만 콜백함수를 이용하면 처리 순서를 보장하기 위해 콜백함수가 중첩되어 콜백지옥이 된다.

Promise

ES6에서 추가된 비동기 처리 방식.

Promise 생성자 함수를 통해서 인스턴스화 하고 비동기 작업을 수행할 콜백 함수를 인자로 받는데 이 콜백 함수는 resolve, reject를 인자로 받아서 성공과 실패 정보를 갖는다.

-> 비동기 함수 처리 결과로 다른 비동기 함수를 호출해야 하면 콜백지옥이 발생한다. then, catch로  콜백핼을 해결할 수 있다.

async/await

가장 최근에 나온 문법 Promise를 더 편하게 쓰기 위해 나옴

async를 함수 앞에 사용함으로 해당 함수는 항상 Promise를 반환한다.

await는 async안에서만 동작하는데 Promise가 처리 될 때까지 기다리는 역활을 한뒤 결과를 반환 한다.

async/await 덕분에 비동기에 대한 사고를 하지 않아도 된다.