⭐️ 1. 비동기 작업의 이해
웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있습니다.
웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신합니다.
서버의 API를 사용할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답데이터를 처리합니다. 이때 해당 작업을 비동기적으로 처리하게 됩니다.
만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기에 다른 작업을 할 수 없습니다. 그리고 요청이 끝나야 다음 예정된 작업을 할 수 있습니다. 하지만 이를 비동기적으로 처리한다면 멈추지 않고 동시에 여러가지 요청과 기다리는 동안 다른 함수도 호출이 가능해집니다.
자바스크립트에서 비동기 작업을 할 때 가장 흔히 사용하는 방법은 콜백 함수를 사용하는 것입니다.
setTimeout(printMe, 3000);
위 코드에서 printMe가 3초 뒤에 호출되도록 printMe 함수 자체를 setTimeout 함수의 인자로 전달해 주었는데, 이런 함수를 콜백 함수라고 부릅니다.
콜백 안에 또 콜백을 넣어서 구현할 수 있는데, 너무 여러 번 중첩되니까 코드의 가독성이 떨어지게 됩니다. 이러한 형태의 코드를 ‘콜백 지옥’ 이라고 부릅니다.
Promise
Promise는 콜백 지옥 같은 코드가 형성되지 않도록 하는 방안으로 ES6에 도입된 기능입니다.
콜백 지옥 (Callback Hell): 콜백 함수가 여러 단계로 중첩되면 코드의 가독성이 떨어지고 유지보수가 어려워집니다. 이런 구조는 흔히 "콜백 지옥"이라고 불립니다.
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doAnotherThing(newResult, function(finalResult) {
console.log(finalResult);
});
});
});Promise는 비동기 작업을 더 쉽게 관리하고 읽기 쉽게 하기 위해 JavaScript에 도입된 객체입니다. Promise는 비동기 작업의 결과를 나타내며, Promise는 세 가지 상태를 가집니다:
- Pending (대기): 비동기 작업이 아직 완료되지 않은 상태.
- Fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태.
- Rejected (거부): 비동기 작업이 실패한 상태.
Promise의 주요 메서드:
then(onFulfilled, onRejected): 비동기 작업이 성공했을 때(Fulfilled) 실행할 콜백 함수와 실패했을 때(Rejected) 실행할 콜백 함수를 지정합니다.catch(onRejected): 비동기 작업이 실패했을 때(Rejected) 실행할 콜백 함수를 지정합니다.finally(onFinally): 비동기 작업의 성공 여부와 관계없이 항상 실행될 콜백 함수를 지정합니다.
let promise = new Promise((resolve, reject) => {
// 비동기 작업 수행
let success = true;
if (success) {
resolve("작업 성공");
} else {
reject("작업 실패");
}
});
promise
.then(result => {
console.log(result); // 작업 성공
return "다음 작업";
})
.then(result => {
console.log(result); // 다음 작업
})
.catch(error => {
console.error(error);
})
.finally(() => {
console.log("비동기 작업 완료");
});async/await
async/await는 Promise를 더욱 쉽게 사용할 수 있도록 해 주는 ES2017(ES8) 문법입니다.
이 문법을 사용하려면 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise의 앞부분에 await 키워드를 사용합니다. 이렇게 하면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있습니다.
// 비동기 작업을 수행하는 함수
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("데이터 수신 완료");
}, 2000); // 2초 후에 데이터 수신 완료
});
}
// async 함수 내부에서 await를 사용하여 비동기 작업을 처리
async function getData() {
try {
console.log("데이터를 받아오는 중...");
const result = await fetchData();
console.log(result); // "데이터 수신 완료" 출력
} catch (error) {
console.error("에러 발생:", error);
}
}
// getData 함수 호출
getData();async/await를 사용하여 비동기 작업을 더 직관적이고 간단하게 처리하는 방법을 보여줍니다. Promise 체이닝보다 가독성이 훨씬 좋아집니다.
⭐️axios로 API 호출해서 데이터 받아 오기
axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트입니다. 이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점입니다.
다음은 기본적으로 사용 방식으로 2가지 방법이 있습니다.
예제 1: axios.get 사용
const axios = require('axios');
function fetchData() {
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
fetchData();예제 2: async/await 사용
const axios = require('axios');
async function fetchData() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();⭐️외부 newsapi api 키 발급하기
newsapi.org에 가입하고 API 키를 발급받습니다.axios패키지를 설치합니다.
npm install axios전체 뉴스 가져오기
function fetchTopHeadlines() {
axios.get(`https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching top headlines:', error);
});
}특정 카테고리 뉴스 가져오기
function fetchTechNews() {
axios.get(`https://newsapi.org/v2/top-headlines?country=us&category=technology&apiKey=${apiKey}`)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching technology news:', error);
});
}