아름이의 개발로그

[공부 기록] JavaScript - 비동기 프로그래밍

13 Jul 2020 |

동기와 비동기의 차이점은?

동기는 작업이 시작되면 해당 작업이 끝날 때까지 기다렸다가 다음 작업을 수행하는 것이고 비동기는 해당 작업이 시작된 후 끝날 때까지 기다리지 않고 바로 다음 작업이 수행되는 것입니다.

자바스크립트로 비동기를 처리하는 원리는?

자바스크립트는 싱글 스레드이기 때문에 자바스크립트만으로는 비동기를 처리할 수 없습니다.

eventloop
자바스크립트 엔진 밖에는 Web API와 이벤트 루프가 존재하는데 이것들을 사용하면 자바스크립트에서도 비동기를 처리할 수 있게 됩니다.
비동기 작업이 발생할 때 Web API가 그 작업을 가져가서 자바스크립트 엔진이 다른 작업을 처리하는 동안 가져간 작업을 처리합니다. 작업이 왼료되면 Web API는 콜백 큐에 완료된 작업을 넣습니다. 이벤트 루프는 자바스크립트 엔진 안의 콜 스택과 콜백 큐를 둘 다 관찰하고 있다가 콜 스택이 비워져있고 콜백 큐에 작업이 들어있다면 콜백 큐에 있는 작업을 콜 스택에 옮겨주고 자바스크립트 엔진은 콜 스택에 옮겨진 작업을 마무리합니다.

AJAX란 무엇인가?

AJAX는 Asynchronous Javascript and XML의 약자입니다. Javascript를 사용해서 서버에게 비동기식으로 XML 데이터를 요청하는 방식을 AJAX라고 부릅니다.
기존에는 화면을 표시하기 위한 자원으로 HTML을 사용했기 때문에 화면 전체를 다시 그릴 수 밖에 없었습니다. 하지만 Javascript로 서버에 XML 또는 JSON 형식의 데이터를 비동기식으로 받는 AJAX를 사용하면서 화면 전체를 로드하지 않아도 부분적인 정보 수정이 가능하게 되었습니다.
장점은 화면 전체를 로드하지 않아도 되기 때문에 속도가 빠르고 서버에서 필요한 데이터만 주면 되기 때문에 전체적인 코드의 양이 줄어듭니다. 또한 부분적인 렌더링이 가능해지면서 새로운 UX가 제공되었습니다. 서버 처리를 기다리지 않고도 데이터를 처리할 수 있습니다.
단점은 히스토리 관리가 되지 않고 동일 출처 정책으로 다른 도메인에는 접속할 수 없습니다. 사용자에게 현재 진행정보가 주어지지 않는데 이는 로딩 인디케이터로 해결할 수 있습니다.

AJAX를 처리하는 방법

  1. XMLHttpRequest 객체를 이용한 방법
  2. jQuery를 사용하는 방법
  3. fetch를 사용하는 방법

Promise란 무엇인가?

Promise는 비동기 프로그래밍을 효과적으로 할 수 있게 해주는 객체입니다.
Callback으로도 비동가 프로그래밍이 가능하지만 비동기 처리 로직을 연속해서 사용할 때 Callback 속의 Callback의 모양새로 가독성이 떨어지고 로직을 변경하기가 어렵습니다.
이 때 직관적이고 깔끔한 코드를 짤 수 있게 도와주는 것이 Promise입니다.

new Promise((resolve, reject) => {
  // 비동기 성공
  resolve(data);
  // 에러
  reject(error);
})

Promise는 세 가지 상태를 갖습니다. Promise는 생성자에 함수를 받는데 그 함수의 매개변수로 resolve와 reject를 받습니다. 작업이 아직 진행중일 때의 Promise는 pending 상태입니다. 작업이 성공해서 resolve에 결과 값을 넣어서 호출했을 때는 작업 Fulfilled 상태가 됩니다. 에러가 났을 경우에는 reject에 매개변수로 에러 값을 넣어서 호출하면 되는데 이 때의 Promise는 Rejected 상태가 됩니다.

Async-Await이 무엇인가?

Async-Await는 Promise를 연속으로 사용할 때 나타나는 Promise Chaining 모양을 더 깔끔하게 합니다. 이는 비동기 코드이지만 동기식으로 표현하여 훨씬 직관적으로 표현 가능하게 합니다.
함수에 async를 붙이면 그 함수는 비동기 함수가 됩니다. 비동기 함수 내부에는 await를 사용할 수 있는데 await 키워드를 붙이게 되면 Promise가 값을 반환할 때까지 기다리게 됩니다.

출처
https://hudi.kr/%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-javascript-%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9C-%EA%B8%B0%EB%B0%98-js%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95/
https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd

Related Posts

Comments