HTTP와 REST API

📎 HTTP

 

1) 동작 원칙

• 클라이언트 요청(손님이 주문) > 서버 처리 및 응답(주방이 요리를 내어줌)
• 텍스트로 작성된 정보를 전달하기 위한 규약으로 지속적인 버전업 진행

2) 주요 특징

• 무상태성: 서버가 클라이언트 이전 상태를 기억하지 않음
• 비연결성: 클라이언트 요청 후 서버가 클라이언트 응답을 마치면 연결을 끊음 / 단, 정해진 시간동안 연결 유지를 할 수도 있음

3) 구조  : 시작 줄 (Start-Line), 상태 줄(Status-Line) > 헤더 (Headers) > 본문 (Body)

 

4) HTTP 요청

// (1) 시작 줄 (Start-Line)
Version: HTTP/1.1
Method: POST 
URL: 홈페이지 주소:80/items

// (2) 헤더 (Headers)
Content-Type: application/json
Accept: application/json, text/html
...

// (3) 본문 (Body)
{
  "name": "새우깡",
  "price": 1500,
  "category": "living"
}

• 시작 줄 (Start-Line)

- Version : 어느 버전에 HTTP 요청을 보냈는지 알려줌

- Method

GET: 주문 조회 (Read)

POST: 주문 추가 (Create)

PUT/PATCH: 주문 수정 (Update)

DELETE: 주문 취소 (Delete)

- URL

홈페이지 주소 (IP 주소)
:80 (포트)
/items (경로)

Method: POST 
URL: 홈페이지 주소:80/items
→  홈페이지 주소에 80번 문으로 찜 상품을 추가

• 헤더 (Headers)

- Content-Type: 본문(Body)에 담긴 콘텐츠(데이터)가 어떤 형식인지 본문 해석 전에 알 수 있게하는 정보

application/json (콘텐츠 형식)
> 아래 본문이 ‘JSON’ 형식으로 작성

//[app.js 코드 매칭] 
fetch() 함수에 Headers 정보를 넣습니다.
const response = await fetch(API_URL, {
    // ...
    Headers: { 'Content-Type': 'application/json' },
    // ...
});

Headers: { 'Content-Type': ... } 코드가 "Content-Type: application/json" 텍스트를 생성
> 서버에게 "지금부터 보낼 Body는 JSON이니 준비하세요!"라고 알려줍니다.

 

- Accept : 전달 받을 수 있는 콘텐츠 형식(JSON, HTML)

• 본문 (Body)

- 실제 주문한 콘텐츠

- JSON: key: value 쌍으로 이루어진 텍스트(Text) 형식

// 찜 목록 추가를 위해 사용자가 입력한 값을 -> Json 객체로 변환!
{
  "name": "새우깡", // 상품명 (key) : "새우깡" (value)
  "price": 1500,  // 가격 (key) : 1500 (value)
  "category": "living" // 카테고리(key) : 생활용품 (value)
}

 

[app.js 코드 매칭] 

JavaScript로 JSON '객체(Object)'를 만듭니다.

// Json 객체
const newItem = {
  name: "새우깡",
  price: 1500,
  category: "living"
};
HTTP Body에 JSON을 텍스트로 변환하여 전달합니다.

const response = await fetch(API_URL, {
    // ...
    body: JSON.stringify(newItem)
});

 

5) HTTP 응답

// (1) 상태 줄 (Status Line)
Version: HTTP/1.1
Status Code: 201 
Status Text: Created

// (2) 헤더 (Headers)
Content-Type: application/json

// (3) 본문 (Body)
{
  "id": "abc-123-xyz",
  "name": "새우깡",
  "price": 1500,
  "category": "living"
}

• 상태 줄 (Status Line)

- Version 

- Status Code & Text:  요청 처리 결과에 상태를 구분하는 코드

2xx (Success - 성공)

4xx (클라이언트 오류)
5xx (서버 오류)

• 헤더 (Headers)

- 응답에 대한 상세 정보를 담는 운송장

- Content-Type: 돌려주는 요리(데이터)도 'JSON'

• 형식본문 (Body)

- 서버는 newItem을 데이터베이스에 저장하면 id(고유 값)가 생성됨

- 서버는 주문 성공의 증거로, 이 id까지 포함된 '완성된 객체(JSON)'를 Body에 담아 보내줌

//app.js 코드 매칭
// (app.js)
// (B) 바로 이 부분! '본문(Body)'의 'JSON 텍스트'를
//     JS가 쓸 수 있는 '객체'로 '해석(Parse)'합니다.
const addedItem = await response.json(); 

// (C) '해석'된 객체를 사용해 화면을 그립니다.
addItemToDOM(addedItem);

 

6) HTTP 데이터 전송방법

• 주소에 붙여 보내기: GET

- 조건만 간단히 보낼 때 사용

- "새우깡"을 검색하는 요청은 URL 끝에 ?를 붙여 보냄

GET 홈페이지 주소 : 80/search?keyword=새우깡
→  홈페이지 주소에 80번 문으로 상품을 찾아주세요. 상품 키워드는 새우깡입니다.

• 본문(Body)에 숨겨서 보내기 (POST, PUT, PATCH)

- '추가'나 '수정'처럼 보낼 데이터가 많거나, 비밀번호처럼 민감할 때 사용

 

🗺️ REST API (표준 설계 원칙)

1) API란?

• Representation (표현): 서버의 자원을 클라이언트가 이해할 수 있는 형태로 쉽게 표현하는 방식(JSON,HTML,이미지 등)
  State (상태): 서버가 관리하는 자원에 현재 상태
  Transfer (전송): 클라이언트-서버 간 통신(HTTP통신)

2) 6가지 원칙

• 균일한 인터페이스
  : 모든 데이터는 고유한 주소로 식별 / 클라이언트의 표현된 데이터 조작 / 코드와 타입을 통한 상태 설명
• 클라이언트-서버 역할분리
• 무상태성
• 주문형 코드: 필요할 때만 기능 전송
• 캐시 가능: 서버가 응답할 때 데이터 캐시 가능한지 명시 / 임시저장 된 것 재사용
• 계층형 시스템

3) ARI 요청 명세서

• Method
  POST: 추가
  GET: 조회
  PUT: 수정
  DELETE: 삭제
  PATCH: 일부 수정
• Endpoint(목적지 주소)
  -구조: 기본 주소(base URL) 뒤에 붙는 URL 경로(path)
  ex) https://api.example.com + /items
  - 작성원칙: 명사 / 복수형
• 요청 파라미터 - 전달 데이터