분류 전체보기

[자바스크립트] 마이크로 태스크 큐와 프로미스

이전 글 [자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리 이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] gobae.tistory.com 마이크로 태스크 큐? 태스크 큐 포스팅에서 태스크 큐를 알아봤다. 태스크 큐는 이벤트 루프와 함께 비동기 작업을 돕기 위해 만들어졌으며, 실행할 콜백함수가 대기하는 큐다. 이벤트 루프가 콜스택이 비어있을 때 태스크 큐에서 콜백을 가져온다. 하지만, 이벤트 루프가 태스크 큐에서 콜백을 가져오기 전에 먼저 고려하는 것이 있다. 이것이 마이크로 태스크 큐다. 환상적인 그림을 발견해서 가져와봤다. 마이크로 태스크 큐가 더 우..

[자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리

이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchro gobae.tistory.com 프로미스의 정적 메서드 알아보기 앞선 포스팅에서는, 프로미스 객체 프로토타입 메서드인 then, catch, finally에 대해 살펴봤다. 이번에는 프로미스의 5가지 정적 메서드를 예시와 함께 알아보자. 프로미스의 정적 메서드는 5가지가 있다. resolve reject all race allSettled resolve, reject 메서드는 이전 포스팅에서 콜백에 넣어뒀던 인자와 유사하다. const pr = Promise.reso..

[자바스크립트] 프로미스 객체

이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적, 직렬적으로 태스크를 수행한 gobae.tistory.com 이전 글에서는 비동기 처리를 통해 데이터를 가져올 수 있었고 데이터를 가져오는 과정에서 콜백 헬과 에러 처리에 대한 곤란함을 겪었다. 이를 개선하기 위해 ES6에서 도입된 프로미스 객체에 대해 알아보자. 프로미스 객체 프로미스란 비동기 작업이 맞이할 미래의 완료 or 실패와 그 결과 값을 말한다. ....? 무슨 말인지 정말 모르겠지만, mdn에서 본 내용이다. 아무튼 비동기 작업을 돕기 위해 ES6에서 도입된 ..

[자바스크립트] 비동기로 데이터 가져오기, 콜백 헬

이전 글 [자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 이전 글 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적, 직렬적으로 태스크를 수행한다. 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다. 순차 gobae.tistory.com 이전 글에서는 어떻게 자바스크립트에서 비동기 작업이 수행되는지를 열심히 알아봤다. 이제 비동기 작업과 주된 목적중 하나인 데이터를 가져오는 작업에 대해 알아보자. 비동기로 데이터 요청하기. ( AJAX, XHR 객체 ) AJAX(Asynchronous JavaScript And XHR) 자바스크립트와 XHR를 이용해 비동기로 뭔가를 하겠다는 거다. (= 그래서 javascript, xhr를 이용한 서버와의 비동..

[자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐

이전 글 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적, 직렬적으로 태스크를 수행한다. 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다. 순차적으로 실행되기 때문에, 어떤 작업이 수 gobae.tistory.com console.log("Hello"); setTimeout(() => { console.log("James"); }, 4); console.log("World"); let i = 0; while (i < 1e9) i++; console.log("Finish"); 이 코드의 결과는 Finish 뒤에 James가 출력된다! 분명 0.004초 뒤에 "James"를 출력하도록 설정했다. 음.... while문이 1e9횟수 돌아가는게 0.004..

[자바스크립트] 동기와 비동기 이해하기.

동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적/직렬적으로 태스크를 수행한다. 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다. 순차적으로 실행되므로, 어떤 작업이 수행중이라면 뒤의 작업은 대기한다. 블로킹(작업 중단)이 발생한다. 비동기 Asynchronous : 동시에 발생하지 않는 병렬적으로 태스크를 수행한다. 현재 작업의 종료여부와 무관하게 다음 작업을 실행한다. 그러므로 동기 방식과는 달리 완료 순서가 보장되지 않는다. 블로킹이 발생하지 않는다. 동기 방식은 손님이 주문을 하고 >> 커피가 나올 때 까지 기다려서 >> 커피를 받아야 한다. 비동기 방식은 우선 주문을 받고 >> 손님은 커피가 나오는 순서를 신경쓰지 않고 >> 진동벨이 울리면 커피를 받는다. 실제 카페에서..