⭐AJAX(Asynchronous JavaScript and XML)
AJAX Asynchronous JavaScript and XML 는 JavaScript와 XML 형식을 이용한 비동기적 정보 교환 기법이다.
다만 요즘은 XML보다는 JSON을 주로 사용한다. 그럼 AJAJ라고 해야하나...
AJAX는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다.
⭐API(Application Programming Interface)
API Application Programming Interface 는 컴퓨터나 소프트웨어 애플리케이션이 서로 통신하여 데이터, 특징 및 기능을 교환할 수 있도록 하는 일련의 규칙 또는 프로토콜 이다.
우리가 여기서 설명하려는 API 단어의 의미는 Web API를 의미한다.
Web API 는 웹 기반 애플리케이션 간의 상호 작용 을 가능하게 하는 일련의 규칙과 도구를 말한다.
웹 API를 사용하면 서로 다른 소프트웨어 시스템이 인터넷을 통해 데이터와 기능을 주고받을 수 있다.
✔ Web API의 기본 개념
-
인터페이스: 웹 API는 소프트웨어의 기능을 외부에 제공하기 위한 인터페이스 역할을 한다. 이를 통해 다른 프로그램이 그 기능을 사용할 수 있다.
-
HTTP 프로토콜: 대부분의 웹 API는 HTTP 프로토콜을 통해 요청과 응답을 주고받는다.
HTTP 프로토콜은 HTTP 메서드 (GET,POST,PUT,DELETE등) 를 사용하여 API와 상호 작용한다.
API의 예시
https://api.coinpaprika.com/#operation/getTickers - 코인 시세를 실시간으로 보내주는 API
이러한 데이터를 HTTP 프로토콜을 통해 요청하면 요청을 받은 프로그램이 요청한 데이터를 반환해준다.
✔ 웹 API의 구성 요소
-
엔드포인트 (Endpoint): API가 제공하는 각 기능은 엔드포인트라는 URL을 통해 접근한다. 예를 들어,
https://api.example.com/users는 사용자 정보를 얻기 위한 엔드포인트일 수 있다. -
메서드 (Method): API 요청은 일반적으로 HTTP 메서드를 사용하여 수행된다. 주요 메서드는 다음과 같다:
GET: 데이터 조회.
POST: 새로운 데이터 생성.
PUT또는PATCH: 기존 데이터 수정.
DELETE: 데이터 삭제. -
헤더 (Header): 요청 및 응답에 추가 정보를 담는 메타데이터입니다. 인증 정보를 포함하거나 응답 형식을 지정하는 데 사용됩니다.
예를 들어Accept는 클라이언트가 수용할 수 있는 콘텐츠 유형을 지정한다.
Accept: application/json은 클라이언트가 JSON 형식의 응답을 기대한다는 의미이다. -
본문 (Body): 주로
POST또는PUT요청에서 사용되며, 서버로 전송할 데이터가 포함됩니다.JSON,XML등의 형식으로 전송될 수 있습니다. -
상태 코드 (Status Code): 응답의 결과를 나타내는 코드입니다. 예를 들어,
200 OK는 요청이 성공적으로 처리되었음을 나타내며,404 Not Found는 요청한 자원이 없음을 나타냅니다.상태 코드들에 대한 문서
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
✔ Query String
쿼리 문자열(Query String) 은 URL의 일부로, 웹 서버에 추가적인 정보를 전달하는 데 사용된다.
주로 웹 요청에서 클라이언트가 서버에 특정 데이터를 요청할 때 사용된다.
쿼리 문자열은 URL의 끝에 ? 기호로 시작하여, & 기호로 구분된 파라미터와 값의 쌍으로 구성된다.
📌쿼리 문자열의 사용 예시
- 검색 쿼리: 웹 사이트에서 검색 기능을 제공할 때 사용된다.
검색 쿼리 예시: https://example.com/search?q=chatgpt
q는 검색어를 지정하는 파라미터이며, chatgpt는 검색할 값이다.
- 필터링: 데이터 목록을 필터링할 때 사용됩니다.
필터링 예시: https://example.com/products?category=electronics&price_min=100&price_max=1000
category, price_min, price_max는 각각 전자 제품 카테고리와 가격 범위를 지정하는 파라미터이다.
- 페이지네이션: 페이지 번호를 통해 데이터의 특정 페이지를 요청할 때 사용된다.
페이지네이션 예시: https://example.com/articles?page=2&limit=10
page는 페이지 번호, limit는 한 페이지에 표시할 항목의 수를 지정한다.
⭐ API 테스트 tool - Hoppscotch
Hoppscotch 는 API를 개발하고 테스트할 때 무료로 사용 가능한 도구이다.
Postman이란 플랫폼도 API를 개발하고 테스트할 수 있게 해주는 동일한 역할을 하는 대표적인 도구이다.
위와 같이 HTTP 요청을 만들고 응답을 검사하기 위한 사용자 친화적인 인터페이스를 제공해준다.
엔드 포인트와 메서드만 보내면 그 결과값을 사이트에서 표시해준다.
⭐ XHR(XMLHttpRequest) - 옛날 방식
XMLHttpRequest 는 Ajax의 핵심 기술 중 하나이다.
XMLHttpRequest은 오랫동안 웹 개발에서 비동기 통신의 표준 기술로 사용되었지만 최근에는 사용하지 않는다.
사용하지 않는 이유는 XHR의 문법은 상대적으로 복잡하고 여러 가지 상태를 관리해야 하고, 프로미스 기반 비동기 처리나 네트워크 오류 및 상태 처리 등 각종 처리가 복잡하다는 점에서 사용하지 않는다.
const req = new XMLHttpRequest
req.onload = function(){
console.log("LOADED")
const data = JSON.parse(this.responseText)
console.log(data)
}
req.onerror = function(){
console.log("Error")
console.log(this)
}
req.open("GET", "https://api.tvmaze.com/schedule")
req.setRequestHeader('Accept', 'application/json');
req.send()⭐ Fetch API
fetch API 는 현대 웹 개발에서 비동기 HTTP 요청을 처리하기 위해 사용되는 JavaScript API이다.
fetch API는 프로미스(Promise)를 기반으로 하며, 더 간결하고 직관적인 문법을 제공하여 비동기 작업을 쉽게 다룰 수 있다.
✔ 주요 특징 및 메서드
- 프로미스 기반
- fetch는 프로미스를 반환하여 비동기 요청을 처리한다. 프로미스를 사용하여 응답을 처리하거나 오류를 잡을 수 있다.
- 응답 객체
-
fetch는 응답을 나타내는 Response 객체를 반환한다. 이 객체는 여러 유용한 메서드를 제공한다:
-
response.json(): JSON 응답을 파싱하여 JavaScript 객체로 변환한다. -
response.text(): 텍스트 응답을 문자열로 변환한다. -
response.blob(): 바이너리 데이터를 Blob 객체로 변환한다. -
response.formData(): 폼 데이터를 FormData 객체로 변환한다.
- 응답 상태 처리
- fetch는 HTTP 상태 코드가 실패를 나타내는 경우에도 프로미스를 거부하지 않는다. 따라서 응답의 ok 프로퍼티를 통해 성공적인 요청인지 확인하고, 상태 코드를 직접 처리할 수 있다.
- Request 객체
- fetch는 Request 객체를 사용하여 요청을 더 세부적으로 구성할 수 있다. 이 객체를 사용하면 요청 URL, 메서드, 헤더, 바디 등을 설정할 수 있다.
✔ 기본 사용법
방식 1fetch("https://api.tvmaze.com/schedule") .then(res => { console.log("LOADED", res) return res.json() }) .then(data => { console.log(data) }) .catch(e => { console.log("Error", e) })
방식 2const loadTvSchedule = async () => { const res = await fetch("https://api.tvmaze.com/schedule") const data = await res.json() console.log(data) }
⭐ Axios
Axios 는 HTTP 요청을 처리하기 위해 널리 사용되는 JavaScript 라이브러리이다. 이 라이브러리는 웹 브라우저와 Node.js 환경에서 HTTP 요청을 보내고 응답을 받기 위한 간편한 API를 제공한다.
Axios 는 특히 Promise 기반으로 비동기 처리를 간편하게 하며, JSON 자동 변환, 요청 및 응답 인터셉터, 요청 취소와 같은 다양한 기능을 제공하여 개발자의 생산성을 높여주어 인기가 있다.
Axios는 라이브러리이기 때문에 JS의 네이티브 함수가 아니다.
그렇기 때문에 사용하기 위해서 script를 추가해주어야 한다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devide-width, initial-scale=1.0"/> <title>axios</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> //axios <script src="app.js"></script> </body> </html>
✔ 기본 사용법
📌 결과
✔ axios의 header 설정법
axios 에서 header는 HTTP 프로토콜(get, post 등)의 인자로 넣어주면 된다.
예를 들어
axios.get(("https://api.tvmaze.com/schedule", {
headers: {Accept: 'application/json'
}
})이런식으로 사용하면 된다.
const getTVSchedule = async (id)=>{
try{
const config = { header:{ Accept: 'application/json' }}
const res = await axios.get(`https://api.tvmaze.com/lookup/shows?thetvdb=${id}`, config)
console.log(res)
}catch (e){
console.log(e)
}
}
getTVSchedule(81189)