자바스크립트 동기와 비동기, Callback, Promise, Async&Await

 

 

📍동기(Synchronous)

: 동기란 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 모든 일이 순차적으로 실행됨.

 

📍 비동기(Asynchronous)

: 요청을 즉시 처리하지 않아도 대기 시간 동안 또 다른 동작이 이루어지는 방식이다. 모든 일이 병렬적으로 실행됨.

 

 

[ 비동기 처리를 사용하는 경우 💡 ]

1. 사용자 이벤트 처리

브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하여 특정 이벤트가 발생할 때 호출을 원하는 내용을 callback함수에 전달하게 된다. (클릭이나 마우스오버 등등..)

 

2.네트워크 응답 처리

화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올 지 알 수 없기 때문에 이런 서버에 대한 응답처리도 비동기 적으로 처리해야된다.

 

3. 파일을 읽고 쓰는 등의 파일 시스템 작업

 

4. 의도적으로 시간 지연을 사용하는 기능 (알람같은 것)

 

 

[ 비동기 처리 방식 종류 💡 ]

 

Callback

말 그대로 나중에 호출되는 함수를 말한다.

어떤 이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출하는 함수이다.

 

Promise

비동기 처리에 사용되는 객체이다.

ES6부터 callback함수의 단점을 보완해주며 실행이 성공했는지 실패했는지 결과를 반환해준다.

new Promise()메서드를 호출하면서 콜백함수를 선언 할 수 있고, 콜백함수 인자는 resolve,reject이다. (resolve = 성공, reject = 실패)

.then()을 사용하여 결과를 받아 볼 수 있다.

실패의 경우 .then().catch()이런식으로 catch를 사용하여 에러를 받으면 에러 내용을 더 명확하게 알 수 있다.

 

Async / Await

node.js 7.6이상부터 구현된 기능이다.

promise보다 쉽게 비동기 처리를 할 수 있다.

사용햘 함수 앞에 async를 선언 해주고 그 안에서 await를 사용하면 함수의 작업이 끝나고 결과값을 반환할 때까지 대기하고 값이 리턴되면 다음작업으로 넘어간다.

async안에서 promise문법도 사용가능하기때문에 chtch로 예외처리를 할 수 있다.