![]()
자바스크립트에서 작성하는 대부분의 코드는 동기(synchronous) 코드이다. 동기 코드는 라인 순서대로(line by line) 실행된다. 아래의 코드를 보자. const p = document.querySelector('.p'); // 1번 p.textContent = 'My name is Jonas!'; // 2번 alert('Text set!'); // 3번 p.style.colro = 'red'; // 4번 동기(Synchronous) 코드의 문제점 코드가 '1번'라인에 도달하면 '실행 스레드(Thread of execution)'가 동작하며 코드가 실행된다. '실행 스레드'는 실행 컨텍스트의 일부로 컴퓨터 CPU에서 코드를 실질적으로 실행한다. 이 '실행 스레드'에서 '2번', '3번', '..
![]()
https://codesmoothie.tistory.com/4 [JavaScript] 프로미스(Promise) Consume - fulfilled 처리 방법 fetch 함수가 반환하는 Promise를 어떻게 사용(Consume)하는지 방법을 알아보자. 아래는 오픈 API를 사용해 국가(country) 데이터를 가져오는 코드이다. 처음 fetch로 요청했을 때 Promise는 'pending' 상태이다. codesmoothie.tistory.com 이 글은 "프로미스(Promise) - fulfilled 처리 방법"의 포스팅에서 연장되는 글이다. 아래의 코드는 지난번 작성한 코드이다. const getCountryData = function (country) { fetch(`https://restcount..
![]()
fetch 함수가 반환하는 Promise를 어떻게 사용(Consume)하는지 방법을 알아보자. 아래는 오픈 API를 사용해 국가(country) 데이터를 가져오는 코드이다. 처음 fetch로 요청했을 때 Promise는 'pending' 상태이다. 비동기 작업이 백그라운드에서 실행 중이기 때문이다. 이후, 어느 시점이 되면 Promise는 'settled(정해짐)' 상태로 이동하여, fulfilled 또는 rejected가 된다. const getCountryData = function (country) { fetch(`https://restcountries.com/v2/name/${country}`).then(function ( response ) { console.log(response); }); }..
![]()
프로미스의 정의 An object that is used as a placeholder for the future result of an asynchronous operation. 프로미스란 비동기 작업의 미래 결과를 위해 자리표시자 같은 객체이다. 즉, 미래의 값을 위한 컨테이너라고 생각하면 된다. 여기서 미래의 값은 AJAX와 같이 Call이 시작될 때는 값이 없지만 미래에 값이 생기는 것을 의미한다. 즉, 미래의 값을 위해 Promise를 사용한다. 프로미스는 로또 복권을 생각하면 굉장히 쉽게 이해할 수 있다. 로또는 번호(결과)를 맞추면 나중에 돈을 받는 것을 약속(Promise)한다. 당첨 여부를 결정하는 추첨은 비동기(asynchronous)적으로 나중에 발생한다. 만약 번호(결과)를 맞추면..
