물론이죠! JavaScript에서의 Promise, async/await, axios, fetch는 모두 비동기 프로그래밍과 관련이 있습니다. 이들 각각의 개념을 쉽게 정리해 드리겠습니다.
Promise: JavaScript에서 비동기 작업을 대표하는 객체입니다. Promise는 어떤 작업이 완료되었을 때 그 결과값을 나중에 사용할 수 있게 해줍니다. 기본적으로, Promise는 세 가지 상태를 가집니다: pending(진행 중), fulfilled(성공적으로 완료), rejected(오류 발생). Promise를 사용하면, 비동기 작업이 완료된 후에 특정 코드를 실행할 수 있습니다.
async/await: 이는 Promise를 더 쉽게 사용하기 위한 문법입니다. async 함수는 항상 Promise를 반환하고, await 키워드는 Promise가 처리될 때까지 함수 실행을 일시 중지시킵니다. 이를 통해 비동기 코드를 동기 코드처럼 보이게 하여 가독성을 높일 수 있습니다.
axios: axios는 HTTP 요청을 보내기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 쉽게 REST API와 같은 외부 리소스와 통신할 수 있습니다. axios는 내부적으로 Promise를 사용하기 때문에, 비동기 요청을 처리할 때 매우 유용합니다.
fetch: fetch도 HTTP 요청을 보내는 데 사용되는 JavaScript의 내장 함수입니다. axios와 마찬가지로, fetch는 Promise 기반으로 작동합니다. fetch는 추가 라이브러리 없이도 사용할 수 있으며, 웹 브라우저에서 기본적으로 제공됩니다.
간단히 요약하자면, Promise는 JavaScript의 비동기 작업을 대표하는 기본적인 객체이며, async/await는 Promise를 더 쉽게 다루기 위한 문법입니다. axios와 fetch는 웹에서 비동기적으로 데이터를 요청하고 받아오는 데 사용되는 도구입니다. axios는 외부 라이브러리로, 좀 더 많은 기능을 제공하고, fetch는 브라우저 내장 함수로서 라이브러리 없이 사용 가능합니다.
개념 정리
Promise: 비동기 작업(예: 데이터 요청, 파일 읽기 등)의 완료를 대표하는 기본 객체이다. 세 가지 상태(pending, fulfilled, rejected)를 가진다.
axios와 fetch: 웹에서 데이터를 비동기적으로 요청하고 받아오는 데 사용되는 도구. 데이터를 요청하면 그 결과는 Promise로 반환되며, 이를 async/await나 Promise의 then/catch 메소드를 사용하여 처리한다.
async/await: Promise를 더 쉽게 사용하기위한 js문법으로,
- async로 선언된 함수는 항상 Promise를 반환
- await는 해당 함수 내에서 Promise의 결과가 나올 때까지 함수의 실행을 일시 중지시키며, 코드를 마치 동기적인 것처럼 보이게 해서 가독성을 높여준다.
then/catch 메소드:
아래의 형식으로 성공시, 실패시의 경우를 나누어 관리할수 있다.
myPromise
.then(function(value) {
// 성공 시 실행할 코드
}, function(error) {
// 실패 시 실행할 코드 (옵션)
});
