📔Promise 객체는 왜 등장했을까?(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 오늘은 Promise 객체는 왜 등장했을까? 라는 주제로 이야기를 해보겠습니다. 이때까지 우리는 Promise Chaining, then/catch/finally 메소드 등 Promise 객체에 관한 많은 것들을 배웠습니다. 그런데 여기서 궁금한 점이 하나 있습니다. Promise 객체는 왜 등장한 걸까요? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는 방법은 있었습니다. setTimeout 함수나, addEventListener 메소드처럼요. setTimeout(callback, milliseconds); addEventListener(eventname, callback);..

🧑🏻‍💻then 메소드 완벽하게 이해하기#6 Promise 객체를 배울 때는 then 메소드에 관해서만 확실히 알면 딱히 어려운 내용이 없습니다. 이번 노트에서는 Promise의 then 메소드에 관한 규칙을 제대로 깊이있게 배워봅시다. 잠깐 아래 코드를 보세요. 👇👇 const successCallback = function () { }; const errorCallback = function () { }; fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then(successCallback, errorCallback); // Promise-B 이 코드를 해석해봅시다. 일단, 이 코드에서 (1) fetch 메소드가 리턴하는 Promi..

비동기 실행 함수들#2 안녕하세요 TriplexLab 입니다. 오늘은 자바스크립트에는 비동기 실행되는 함수들이 존재합니다. 그 예시들을 하나씩 살펴보겠습니다. 🎯 1. setTimeout 함수 setTimeout 함수는, 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수입니다. console.log('a'); setTimeout(() => { console.log('b'); }, 2000); console.log('c'); 예를 들어 이런 코드가 있을 때, 지금 가운데에 있는 setTimeout 함수는 첫 번째 파라미터에 있는 () ⇒ { console.log('b'); }, 이 콜백의 실행을, 두 번째 파라미터에 적힌 2000 밀리세컨즈(=2초) 뒤로 미룹니다. 그래서 이 코드를 실행..

🌐 fetch 함수와 비동기 실행#1 안녕하세요 TriplexLab 입니다. 비동기실행의 주제로 fetch 함수 관해서 살펴보도록 하겠습니다. console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 지금 이 코드에는 다음과 같은 2개의 콜백이 있습니다. (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행되..

🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기(Promise 동작원리) 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. ♻️ fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중에 Promise객체 상태가 -> fulfilled 상태가 되었을 때 then함수에다가 콜백을 등록할 수 있습니다. 그리고 실제로 Promise객체 상태가 -> fulfilled 상태가 되면 등록한 콜백이 실행이 되는 것이고, 그 작업 성공 결과가 콜백의 파라미터(response)로 넘어오는 것입니다. 🙋🏽‍♀️ Promise 객체는 왜 등장했을까? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는..