자바스크립트의 비동기식 처리

이 글을 적고 먼 훗날.. 다시 MDN문서로 내용을 다시 확인해서 글을 썼습니다.

async, await 의 개념(1)

---

동기식 VS 비동기식

동기식 처리는 동시에 차례대로 진행되는 코드를 말한다.

예를들어, 서브웨이에 들어가서 줄서서 한 코너당 한명씩 주문하는 것 같은 처리방식이다. 서브웨이에서는 뒤에사람이 빵을 다 골랐어도 앞에 사람이 야채를 고르는 중이라면, 뒷 사람은 야채를 주문하지 못한다.

비동기식 처리는 맥도날드 주문같은 처리방식이다. 맥도날드 키오스크에 주문을 넣고나면 순서 상관없이 빨리 나오는 것 부터 받아갈 수 있다.

 

예를들어

동기식 처리방식은 동시 작업이 필요할 때 사용된다.

은행계좌에서 돈을 출금 후 상대방의 계좌에 입금을 할 때, 입금과 출금이 동시에 이루어지면서 순차적으로 이루어진다.

비동기식 처리방식은 작업처리가 동시에 필요하지않을 때 사용된다. 

온라인 수업 중, 시험지를 제출할 때와 시험지를 채점할 때, 모두 시험지를 이용하지만, 해당 작업은 동시에 이루어지지않는다.

동기식과 비동기식 처리방식의 다른점은 작업의 처리 시각에 대한 관점의 차이이다.

private.tistory.com/24

동기와 비동기의 개념과 차이

자바스크립트 처리방식?

 

자바스크립트는 싱글스레드이다. 따라서, 코드가 선입선출 될 수 밖에 없다.

그런데 wetube 수업 중 해당 코드가 비동기식으로 작동하기 때문에 assync, await구문을 쓴다는 이야기를 들었다.

자바스크립트는 동기식 처리방식이라며?? 

 

자바스크립트가 비동기식 작동을 할 수 있었던 이유는 콜백함수를 이용했기 때문이다.

싱글스레드인 자바스크립트에서, 모든 로직을 동기식으로 작동시킬 경우, 기다리는 시간이 많아져 사용자의 불편을 초래한다.

그래서 보다 효율적으로 로직을 처리하기 위해 비동기식 처리방식을 도입하는데, 이 때 등장한 것이 콜백(call back)함수이다.

 

그러나 콜백함수의 경우, 가독성이 떨어지고 콜백이 계속해서 반복되는 단점이 발생한다.

 

promise / assync

이 때 등장한것이 promise와 assync인데,

promise는 promise()라는 객체를 생성하여, 객체 내 결과값을 이용해 .then()로직을 처리한다.

 

assync는 promise의 단점을 보완하는 구문이다.(가독성, 에러 캐치의 문제 등)

assync를 호출하면 promise객체가 리턴된다. await호출 시, assync가 생성한 객체(promise)가 완료 될 때 까지 기다려준다.

또 try/catch구문을 사용하여 에러처리를 할 수 있다.

 

읽어본 글

www.daleseo.com/js-async-async-await/

[자바스크립트] 비동기 처리 3부 - async/await

blog.metafor.kr/164

동기와 비동기방식의 차이점(콜백함수와 프로미스)

engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%98-%EB%B6%80%EC%83%81-async-await%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%BD%94%EB%94%A9-%ED%8C%81-%EB%8B%A4%EC%84%AF-%EA%B0%80%EC%A7%80-df65ffb4e7e

자바스크립트는 어떻게 작동하는가: 이벤트 루프와 비동기 프로그래밍의 부상, async/await을 이용�