안녕하세요~ totally 개발자입니다. async, await 오늘 다룰 부분은 async, await입니다. 저번 시간에는 Promise 객체에 대해 살펴보았는데 Promise가 다소 복잡한 단점이 있는데 이를 더 용이하게 사용할 수 있도록 도와주는 비동기 처리 패턴이라고 간주하시면 됩니다. await는 반드시 async 함수 안에서 동작하도록 되어 있고, async 함수 안에는 await가 포함되어 있지 않아도 되지만 반환될 때는 Promise 객체로 반환되는 특징이 있습니다. 아래 간단한 예제를 확인해보면 testFunc를 async로 선언하여 true를 반환하는 함수가 있을 때 console에서 확인해보면, Promise 객체 형태로 true가 반환되었음을 보실 수 있습니다. const test..

안녕하세요~ totally 개발자입니다. Promise 오늘 다룰 부분은 Promise입니다. 이 Promise는 비동기 프로그래밍에서 사용되는 객체로 비동기 연산이 종료된 후에 결과 값을 반환할 수 있도록 하는 약속을 위한 객체입니다. 즉 동기 메소드처럼 값을 반환합니다. 이 Pormise에는 3가지 상태가 존재합니다. 1) Pending (대기): 초기 상태 2) Fulfilled (이행): 성공적으로 이행됨. 3) Rejected (거부): 이행 실패. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDN Promise 객체는 비동기 작업이 맞이할 미래..

안녕하세요~ totally 개발자입니다. 오늘은 원격 API를 호출해서 데이터를 불러오고 웹페이지에 표시하는 방법을 알아보도록 하겠습니다. 예전에는 서버 쪽에서 API를 주로 호출했지만 요즘에는 클라이언트 단에서 API를 직접 호출해서 데이터를 다루는 경우가 많아지고 있기 때문에 클라이언트 단에서 직접 API를 호출하고 데이터를 다루는 방법을 이해해야 합니다. 이를 위해, request 등과 같은 라이브러리를 사용하면 되지만 근래에는 브라우저 자체에 존재하는 fetch 함수를 사용하면 간단하고 쉽게 구현할 수 있습니다. fetch 함수는 Promise 객체를 반환하며 이 Promise 객체는 비동기(Asynchronous)를 위해, 미래에 저장되는 값을 위해 사용된다고 보면 됩니다. 이 함수는 2개의 p..