자바스크립트에서 비동기 프로그래밍 (추가 작성중)

들어가며

async await 백엔드 서버에 api 요청을 그냥 구글링해서 문법만 외워서 사용하고 있는 것 같아서
좀 더 동작 방식이나 원리 학습의 필요성을 느꼈다. 이를 위해 공부하며 정리한 내용을 포스팅해봤다.

비동기란?

쉽게 설명하면 코드실행이 순서대로 이뤄지지 않는 것을 말한다.

여러 쓰레드나 프로세스가 돌고있다는 것 즉, 작업이 멀티태스킹으로 처리가 되고 있는 것이다.

*프로세스 : 하나의 작업, 컴퓨터가 어떤 일을 처리하고 있는 상태
*쓰레드 : 한 프로세스내에서 처리되는 작업의 갈래

자바스크립트는 싱글쓰레드 언어이지만 브라우저 Web API 통신시에 비동기 작업을 수행할 수 있다.

동기방식은 직관적인 설계가 가능하지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고,
비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도
그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

자바스크립트에서 비동기 프로그래밍하는 세가지 방법 요약

callback 함수

함수의 인자로 callback 함수를 넣는 방식으로 비동기 작업이 가능하다
위 방법으로 직관적인 비동기 프로그래밍이 어렵기 때문에
이를 해결하기 위해 Promise, async / await 과 같은 새로운 키워드들이 등장했다.

Promise (Es6)

Es6부터 도입된 Promise의 then 키워드로 callback 함수를 담을 수 있고
직관적인 코드를 작성할 수 있게 되었다

async chaining 비동기 작업을 엮어서 필요한 res가 나오기전에
다음 코드가 실행되는 것을 방지 할 수 있다

단, Promise는 별도의 라이브러리 없이는 인터넷 익스플로러에서 작동하지 않고
Es7 버전의 async, await 보다 복잡한 문법을 가진다

async / await (Es7)

Es7부터 도입된 키워드로 wPromise로 작성된 비동기 프로그래밍을 한층 간결하고 직관적으로 실행할 수 있게 만들어준 문법
비동기 작업을 마치 동기 작업 코드의 형태로 작성할 수 있게 해준다.

프로그래밍 할때는 async await 키워드를 어떻게 사용하는지만 배워도 코드가 비동기로 처리되도록 충분히 짤 수 있지만
callback으로 비동기 프로그래밍을 하면서 Promise가 생겨난 이유를 확인해본 뒤에
Promise 키워드의 이해가 선행된다면 비동기 프로그래밍의 원리를 좀 더 쉽게 이해하고 사용할 수 있을 것이라 생각된다.

바로 뒤이어 callback, Promise, async · await 순서대로 비동기 프로그래밍을 해보며 설명해보고자한다.

비동기 프로그래밍 예시

callback

Promise

async · await