Record💽

HTTP API 클라이언트 개발

✅ 서버측에서 제공하는 HTTP API와 통신하여 데이터를 송수신하는 클라이언트 측 코드를 작성하는 프로세스

1. HTTP 메서드 활용

• http 프로토콜은 다양한 메서드를 제공한다.
  1) GET : 자원을 검색하거나 가져오기 위해 사용
  2) POST : 새로운 자원을 생성하거나 기존 자원을 업데이트하기 위해 사용
  3) PUT : 자원을 생성하거나 업데이트하기 위해 사용, 전체 자원을 업데이트 함
  4) DELETE : 특정 자원을 삭제하기 위해 사용

2. URI (Uniform Resource Identifier) 구성

• : API 엔드포인트의 URI는 명확하고 의미 있게 구성되어야 한다. RESTful API의 경우 리소스를 나타내는 URI는 직관적이어야 한다.

  ❓RESTful API
  1) 자원 (Resource) : API는 자원을 나타냅니다. 예를 들어, 블로그 애플리케이션에서는 "게시물(post)", "사용자(user)", "댓글(comment)" 등이 각각의 자원이 될 수 있다.
  2) URI (Uniform Resource Identifier) : 각 자원은 고유한 URI를 갖는다. URI는 해당 자원을 식별하고 접근할 수 있도록 한다. 예를 들어, 게시물 자원의 URI는 "/posts"일 수 있다.
  3) 행위 (Verb/Method) : 자원에 대한 행위는 HTTP 메서드(예: GET, POST, PUT, DELETE)를 통해 정의된다. 예를 들어, 게시물 자원에 대한 데이터를 가져오려면 GET 메서드를 사용하고, 새로운 게시물을 생성하려면 POST 메서드를 사용한다.
  4) 표현 (Representation) : 자원의 상태는 일반적으로 JSON 또는 XML과 같은 형태로 표현된다. 클라이언트가 자원의 상태를 요청하면 서버는 해당 표현을 제공한다.
  5) 상태 전이 (Stateless) : RESTful API는 상태를 저장하지 않고, 각 요청 간에 상태를 전이시키지 않는다. 각 요청은 완전하게 독립적이며, 모든 필요한 정보는 요청 자체에 포함되어 있어야 한다.

3. 요청과 응답 포맷 처리

• 서버와의 통신에서는 주로 JSON 형식을 사용한다. 클라이언트는 요청 시에 JSON으로 데이터를 전송하고, 응답을 JSON으로 파싱하여 사용해야 한다. 이를 위해 클라이언트 라이브러리나 내장된 API를 사용할 수 있다.

4. 비동기 통신 및 Promise 사용

• HTTP API 호출은 일반적으로 비동기적으로 이루어지기 때문에 비동기 처리를 위해 Promise나 async/await와 같은 기술을 활용한다. 이를 통해 브라우저에서 비동기 코드를 더 간편하게 작성할 수 있다.

5. 에러처리

• 네트워크 문제, 서버 에러 등을 고려하여 적절한 에러 핸들링을 구현해야 한다. 서버로의 요청이 실패할 경우 클라이언트는 오류를 적절히 처리하고 사용자에게 적절한 메시지를 표시해야 한다.

6. 인증 및 보안

• 인증이 필요한 API의 경우 토큰 기반의 인증 방식을 사용하거나 다른 방식으로 인증을 처리해야 한다. 또한 HTTPS를 사용하여 통신을 암호화하여 보안을 강화한다.

7. 라이브러리 활용

• HTTP 클라이언트 라이브러리를 사용하면 개발을 더 효율적으로 할 수 있다. 예를 들어, Axios, Fetch API 등이 널리 사용되는 라이브러리이다.

👉 example)

import axios from 'axios';

// GET 요청
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

// POST 요청
axios.post('/api/create', { data: 'example' })
  .then(response => {
    console.log('Data created:', response.data);
  })
  .catch(error => {
    console.error('Error creating data:', error);
  });