야, 너두 할 수 있어. API통신.

전준연·2024년 7월 28일
APIJavaScriptajax비동기열공프론트엔드
post-thumbnail

글을 본격적으로 시작하기 전에 필수적으로 알아야 할 것이 있다. 그것은 바로...

분위기 한 번 잡아봤지만 사실 별거 없다. API와 AJAX, 그리고 동기, 비동기가 무엇인지 알아야 한다. 많아 보이지만 의외로 개념 자체는 간단한 것들이다. 아 참고로 이 글은 중간 중간에 추가로 설명하는 것들이 많아 글이 꽤 길다. 지루할 수 있겠지만, 분위기를 바꾸기 위한 사진도 몇 개 넣어놨으니 인내심을 가지고 같이 한 번 알아보도록 하자.

API는 대체 무엇일까?

API는 Application Programming Interface(애플리케이션 프로그래밍 인터페이스)의 줄임말이며, 소프트웨어 애플리케이션끼리 서로 소통하고 상호작용하기 위해 정의된 규약이나 프로토콜이다.

그럼 AJAX는 무엇일까?

AJAX는 Asynchronous JavaScript and XML의 약자이다. 이름을 토대로 의미를 생각해보면, Asynchronous가 비동기라는 뜻이니 JavaScript를 사용한 비동기 통신, 즉 클라이언트와 서버 간에 데이터를 주고받는 기술이라고 할 수 있다.

AJAX를 통해 서버와 비동기적으로 통신함으로써 우리는 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 해당하는 부분만 비순차적으로 사용자 인터페이스에 갱신할 수 있다.

정리하면 AJAX는 JavaScript에서 비동기 HTTP 통신이 가능하도록 해준다. 비동기 HTTP 통신이란 request(요청)와 response(응답)를 비동기식으로 다룰 수 있다는 것을 의미한다.

마지막으로 동기식과 비동기식은 뭘까?

  1. 동기식
    • 작업이 순차적으로 수행된다.
    • 이전 작업이 완료될 때까지 다음 작업이 시작되지 않는다.
    • 간단하고 직관적이다.
    • 시간이 오래 걸리는 작업이 있으면 모든 작업이 지연될 수 있다.
  2. 비동기식
    • 작업이 동시에 또는 병렬로 수행된다.
    • 어떤 작업이 완료될 때까지 기다리지 않고 다음 작업을 계속 진행한다.
    • 효율적이고 응답성이 좋다.
    • 동기화 관리가 필요하여 복잡도가 증가할 수 있다.

이해를 돕기 위한 사진들

그래서 어떻게 사용해야 할까?

JavaScript로 API통신을 하는 방법에는 여러 가지가 있지만 나는 많이 알려진 XMLHttpRequest, jQuery AJAX, Fetch API, Axios를 소개하려 한다. 그리고 그중에서도 가장 많이 사용되는 Fetch API를 집중적으로 소개해보겠다

1. XMLHttpRequest(XHR)

장점

  • 가장 오래된 방법으로 모든 브라우저에서 지원됨.
  • 높은 수준의 설정 가능.

단점

  • 사용법이 복잡하고, 코드가 장황해질 수 있음.
  • Promise를 기본적으로 지원하지 않음.

결론

  • 가장 오래됐고 복잡한 사용법 때문에 인해 거의 사용하지 않는다.
  • 그러니 더 이상의 자세한 설명은 생략하겠다.

2. jQuery AJAX

장점

  • jQuery를 이미 사용 중인 프로젝트에서는 추가 설정 없이 사용 가능.
  • 다양한 옵션 제공.
  • 오래된 브라우저까지도 지원.

단점

  • jQuery 라이브러리에 의존적임.
  • 현대적인 JavaScript 코드 스타일과 잘 맞지 않음 (Promise 지원이 부족함).

3. Fetch API

장점

  • 표준화된 최신 API로, 대부분의 최신 브라우저에서 지원됨.
  • 사용법이 간결하고 직관적임.
  • Promises 기반으로 비동기 처리가 쉬움.
  • async/await과 함께 사용하기 용이함.

단점

  • 일부 구형 브라우저에서는 지원되지 않음 (Polyfill이 필요할 수 있음).
  • 기본적으로 timeout 설정이나 response가 400 이상일 때의 에러 처리가 부족함.

여기서 잠깐 멈춰서 Promise와 콜백 함수가 무엇인지 알아볼 건데, 만약 본인이 이론을 읽을 시간이 없거나(혹은 귀찮거나) 사용법만 빠르게 알고 싶다면 지금 당장은 이 부분을 안 읽어도 된다. 그래도 요약 부분은 이해가 안 되더라도 한 번은 읽어보길 바란다.

Promise

우선 promise는 자바스크립트에서 비동기 작업을 처리하기 위한 객체이다. 비동기 작업이 완료되었을 때(성공 또는 실패) 결과 값을 가질 수 있도록 해주는 개념이고, 주로 콜백 함수의 복잡성을 줄이고 코드의 가독성을 높이는 데 사용된다.

그리고 promise는 3가지의 상태를 가지는데 순서대로 대기, 성공, 실패가 있다.

  1. 대기
    초기 상태, 비동기 작업이 아직 완료되지 않은 상태. →
  2. 성공
    비동기 작업이 성공적으로 완료된 상태.
  3. 실패
    비동기 작업이 실패한 상태.

그리고 promise가 완료되면 then, catch, finally 메서드를 사용하여 결과를 처리할 수 있다. 자주 쓰이는 then, catch만 간단하게 알아보자.

  1. then
    비동기 작업이 성공적으로 완료되었을 때 실행할 함수를 정의한다.

  2. catch
    비동기 작업이 실패했을 때 실행할 함수를 정의한다.

요약하면 promise는 비동기 작업의 결과를 처리하는 데 유용한 자바스크립트 객체이며 then, catch, finally 메서드를 사용하여 비동기 작업의 성공, 실패, 완료 상태를 처리할 수 있다.

콜백 함수

콜백 함수는 다른 함수의 인수로 전달되어 실행되는 함수이다. 자바스크립트에서 콜백 함수는 비동기 작업을 처리하거나 이벤트가 발생했을 때 실행되는 코드를 정의하는 데 자주 사용된다. 콜백 함수는 동기 또는 비동기 방식으로 호출될 수 있다.

  1. 콜백 지옥
    콜백 함수는 간단한 비동기 작업에서는 유용하지만, 여러 비동기 작업을 연속적으로 처리할 때는 코드가 복잡해지고 가독성이 떨어지는 문제가 발생할 수 있는데, 이를 콜백 지옥이라고 부른다.

  2. 콜백 지옥 해결 방법
    콜백 지옥 문제를 해결하기 위해 promise나 async/await를 사용하면 된다. 앞서 설명한 promise는 비동기 작업을 체인 형태로 처리할 수 있게 해주어 콜백 지옥을 피할 수 있게 해준다.

요약하면 콜백 함수는 다른 함수의 인수로 전달되어 실행되는 함수로, 주로 비동기 작업이나 이벤트 처리에 사용됩니다. 콜백 함수는 간단한 작업에는 유용하지만, 복잡한 비동기 작업에서는 코드가 난해해지는 콜백 지옥 문제가 발생할 수 있다. 이 문제를 해결하기 위해 promise와 async/await 같은 기능을 사용할 수 있다.

Fetch API 사용

계속해서 이론만 배우면 재미도 없고 위 사진과 같은 상황에 처할 수 있으니 설명도 끝난 겸 가장 궁금해했을 코드를 한 번 짜보겠다.

fetch('https://api.example.com/data')
  .then(response => {
    return response.json();
  })
	// 요청이 성공하면 응답 객체(response)가 반환
    // response 객체를 JSON 형태로 변환하여 반환
  .then(data => {
    console.log(data);
  })
	// JSON으로 변환된 데이터를 콘솔에 출력
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });
	// 요청 과정에서 에러가 발생하면 블록을 실행
    // 에러 메시지를 콘솔에 출력

이것이 Fetch API를 사용하는 가장 기본적인 형태이다.

서버로 데이터를 보내야 할 때는

fetch(url, {
    method: 'POST', // HTTP 메서드 설정
    headers: {
        'Content-Type': 'application/json', // JSON 형식으로 데이터 전송
    },
    body: JSON.stringify(data), // 데이터를 JSON 문자열로 변환하여 전송
})

앞부분을 이런식으로 바꿔서 코드를 작성하면 된다.
다른 여러가지 메서드도 있지만 그것들은 일단 생략하겠다.

4. Axios

장점

  • Promise 기반으로 사용이 간편함.
  • Node.js와 브라우저에서 모두 사용 가능함.
  • timeout, interceptors, 자동 JSON 변환 등 다양한 기능 제공.
  • response의 상태 코드에 따라 에러 처리가 잘 되어 있음.

단점

  • Fetch API와 비교하여 약간 더 큰 라이브러리 사이즈.
  • 별도의 설치가 필요함 (CDN 또는 npm 등을 통해).

마무리

이렇게 길고 길었던 API통신이 드디어 끝이 났다. 중간 중간에 빠진 내용도 많고 잘못된 내용도 있을 수 있지만, 누군가에게는 이 글이 도움이 되었으면 좋겠다. 물론 여러 글을 읽고도 아래와 같은 상황을 많이 겪을 것이다.(경험담) 그렇지만 계속 시도해서 안될 것은 없기에 끈기를 가지고 꼭 성공하길 바란다.

지금까지 "야, 너두 할 수 있어. API통신" 이였습니다.
긴 글 읽어주셔서 정말 감사합니다.

profile
전준연
이전 포스트

지금 당장 SNS를 끊어야 하는 이유

다음 포스트

Component(컴포넌트)와 Props(프롭스)는 무엇일까?

2개의 댓글

comment-user-thumbnail
상혁이
2024년 7월 28일

유용한 글 감사합니다

1개의 답글