프론트엔드와 백엔드 연결하기 (HTTP, API, Fetch API)

HTTP

 

HTTP는 HyperText Transfer Protocol의 약자로 직역하면 HyperText를 전송하는 규약이다.

Hypertext : 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트, 인터넷과 결합하여 HTML의 주된 구성요소가 됨
- 하이퍼링크를 통해 각 텍스트가 비선형적으로 연결됨

 

이는 클라이언트 - 서버 사이에서 이루어지는데, 예를 들어 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹 페이지나 그림 정보를 요청(request)하면, 서버는 이 요청에 응답(response)하여 필요한 정보를 클라이언트에 전달한다.

 

요청 / 응답 방법

 

HTTP 요청(Request)와 응답(Response)의 구조는 매우 유사하며, 아래와 같은 4가지 기본적인 구성 요소로 이루어져 있다.

1. Start Line (시작 줄)

• HTTP 요청이나 응답의 가장 첫 줄
  • 요청(Request)에서는 HTTP 메서드, 요청 대상(Request Target), HTTP 버전
  • 응답(Response)에서는 HTTP 버전, 상태 코드(Status Code), 상태 메시지(Status Message)
• 요청(Request) 예시:

  POST /login HTTP/1.1

  • POST: HTTP 메서드 (데이터 전송 요청).
  • /login: 요청 대상 (로그인 API 엔드포인트).
  • HTTP/1.1: HTTP 프로토콜 버전.
• 응답(Response) 예시:

  HTTP/1.1 200 OK

  • 200: 상태 코드 (요청 성공).
  • OK: 상태 메시지.

2. HTTP Header (헤더)

• 요청이나 응답의 부가정보 를 담고 있음
• 요청(Request) 예시:

  Host: example.com 
  Content-Type: application/json 
  Content-Length: 49

  • HOST : 요청할 서버의 주소
  • Content-Type : 요청 본문의 데이터 형식
  • Content-Length : 요청 본문의 데이터 크기
• 응답(Response) 예시:

  Content-Type: application/json 
  Content-Length: 123 
  Cache-Control: no-cache

  • Cache-Control : 클라이언트의 캐싱 설정

3. Blank line

• 빈 줄, 헤더가 끝났음을 나타냄

4. Body(본문, 페이로드)

• 요청(Request)에서는 클라이언트가 서버로 전송하는 데이터, 응답(Response)에서는 서버가 클라이언트로 전송하는 데이터
• JSON, HTML, 이미지 등 다양한 형식을 가질 수 있음

 

 

---

 

HTTPS

 

HTTPS는 HyperText Transfer Protocol over Secure Socket Layer 의 약자이며 HTTP의 보안이 강화된 버전이다.

HTTPS는 통신에서 일반 텍스트를 이용하는 대신에, SSL이나 TLS 프로토콜을 통해 데이터를 암호화한다.

 

 

---

 

API

 

API에 대한 설명을 할 때, 많은 사람들이 UI에 비유하곤 한다. UI가 사용자와 기계 또는 시스템을 연결해주는 역할을 한다면, API는 프로그램과 프로그램을 이어주는 다리와 같다.

 예를 들어, 내가 직접 온도측정 프로그램을 만들지 않아도 공공데이터포털의 기상청 API라는 다리를 통해 기상청에서 측정된 온도 데이터를 가져올 수 있다.

또한, API는 사용법과 규격을 제공하는 문서가 있다. 이 API 문서를 통해 사용자는 원하는 데이터나 기능을 어떻게 활용할 수 있는지 알 수 있다.

 

OpenAPI는 누구나 사용할 수 있도록 공개된 API이다. NAVER Developers 에 들어가면,

 

NAVER OPEN API 목록

 

다음과 같은 API들이 공개되어 있는 것을 볼 수 있다. 애플리케이션 개발 시, 필요한 기능을 직접 구현하지 않고도 다른 서비스가 제공하는 공개 API를 활용하면 시간을 절약하고 효율적으로 개발할 수 있다. 예를 들어, 검색어 트렌드를 애플리케이션 기능으로 추가하고자 한다면, 이미 네이버에서 제공하는 검색어 트렌드 API를 활용하여 간단히 구현할 수 있다.

 

검색어 트렌드 API 문서를 보면 API 호출 방법과 요청 예시, 응답 예시, 오류 코드를 볼 수 있다.

이 API는 HTTPS 프로토콜을 사용하고 POST 메서드를 통해 통신이 가능함을 알 수 있다.

 

API 호출 방법

 

 

API 문서에 대해서는 여기에 잘 정리되어 있다. 

 

---

 

Fetch

 

우리는 이미 API를 사용하여 브라우저와 상호작용하고 있었다. 예를 들어, 다음과 같은 코드를 콘솔에서 실행하면:

 

alert("Hello world");

 

 

이렇게 경고창이 나타난다. 이 경고창의 동작 방식과 형태는 브라우저에서 미리 정의해 제공한 것이며, 우리는 단순히 "Hello World"라는 메시지만 전달했을 뿐이다. 즉, 이 과정에서 브라우저가 제공하는 웹 API를 활용해 브라우저와 소통한 것이다. 이 웹 API에는 alert와 같은 브라우저 API와 서버와 클라이언트 간의 데이터 송수신을 위한 서버 통신 API가 있다.

 

Fetch API는 브라우저에서 제공하는 서버 통신 API 중 하나로, 프론트엔드와 백엔드 간 데이터를 주고받는 데 사용된다. Fetch API를 활용하면 HTTP 요청을 생성하고, 서버로 데이터를 전송한 뒤 응답을 받아 처리할 수 있다.

 

fetch('https://api.example.com/data')
  .then(response => response.json()) // 응답 데이터를 JSON으로 변환
  .then(data => console.log(data))   // 변환된 데이터를 출력
  .catch(error => console.error('Error:', error)); // 에러 처리

 

 

위와 같이 fetch() 메소드를 이용해서 데이터를 가져올 수 있다. 

하나의 필수 매개변수로 가져오려는 리소스 주소를 받는다. 

Promise를 반환하여 요청이 완료되면 .then()으로 처리하고, 에러가 발생하면 catch()로 처리한다.

 

Promise : 비동기 작업의 결과를 처리하기 위한 객체, 작업이 끝난 후 성공했는지 실패했는지에 따라 결과를 전달한다.

 

 

fetch('https://api.example.com/data', {
  method: 'POST', 
  headers: {
    'Content-Type': 'application/json', // 요청 데이터 형식
  },
  body: JSON.stringify({ key: 'value' }) // 요청에 포함할 데이터
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

 

이렇게 요청 옵션을 추가하여 데이터를 받아올 수도 있다. 

예를 들어, 서버로 데이터를 전송하려면 API 문서에 명시된 요청 방식과 헤더 정보를 참고하여 해당 옵션을 설정해야 한다. 서버와의 통신을 원활히 하기 위해 API 문서에서 요구하는 세부 사항(필수 헤더, 요청 데이터 형식 등)을 정확히 추가하는 것이 중요하다.

 

이제 서버에 있는 데이터를 성공적으로 불러올 수 있게 되었다.
불러온 데이터를 적절히 가공하고 원하는 위치에 잘 넣어주면, 웹 페이지를 만들 수 있다.😊

 

 

 

 

 

 

참고

https://ko.wikipedia.org/wiki/HTTPS#cite_note-7

HTTPS - 위키백과, 우리 모두의 백과사전

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Messages

HTTP 메시지 - HTTP | MDN

https://velog.io/@offdutybyblo/React-%EB%B0%B1%EC%95%A4%EB%93%9C%EC%99%80-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%95%A4%EB%93%9C%EC%9D%98-%ED%86%B5%EC%8B%A0%EC%9D%84-%EC%9C%84%ED%95%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EA%B2%83%EB%93%A4

[React] 백앤드와 프론트앤드의 통신을 위해 알아야 할 것들...

https://dev-dain.tistory.com/50

봐도봐도 모르겠는 API 개념 설명 (Application Programming Interface)

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

Fetch API - Web API | MDN