[React ] study(3) HTTP

dev kyu·2025년 1월 13일

React

목록 보기
7/11

HTTP란,

HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받는 약속(규칙)이야.
쉽게 말해, 인터넷에서 컴퓨터끼리 대화하는 언어라고 생각하며 돼.

📍핵심(쉬운) 설명

  • 웹 브라우저와 서버의 대화
    • 웹 브라우저: "안녕하세요! 저 구글 홈페이지 주세요~" (요청, Request)
    • 서버: "여기 있어요! 구글 홈페이지 데이터입니다~" (응답, Response)
      HTTP는 이렇게 요청(Request)과 응답(Response)을 주고받는 방식!

🔍 HTTP 요청/응답의 구조

1️⃣ HTTP 요청
클라이언트가 서버에게 데이터를 요청.

  • 주요 구성:
    • 메서드: 어떤 작업을 할지 지정 (예: GET, POST).
    • URL: 요청할 리소스 주소.
    • 헤더(Header): 요청 정보 (예: 인증, 언어 설정).
    • 본문(Body): 서버로 보낼 데이터 (POST 요청 시).

2️⃣ HTTP 응답
서버가 클라이언트에게 데이터를 응답.

  • 주요 구성:
    • 상태 코드(Status Code): 요청 처리 결과 (예: 200, 404, 500).
    • 헤더(Header): 응답 정보 (예: 콘텐츠 타입).
    • 본문(Body): 클라이언트에게 보내는 실제 데이터.

3️⃣ HTTP 상태 코드

  • 1xx: 정보
    • 100 Continue 요청의 일부를 서버가 받았으며, 나머지를 계속 보내라는 의미.
  • 2xx: 성공
    • 200 OK 요청이 성공적으로 처리되었음.
    • 201 Created 요청이 성공적이었으며, 새로운 자원이 생성되었음.
  • 3xx: 리다이렉션
    • 301 Moved Permanently 요청한 리소스가 영구적으로 새로운 URL로 이동.
    • 302 Found 요청한 리소스가 임시로 다른 URL로 이동.
  • 4xx: 클라이언트 오류
    • 400 Bad Request 잘못된 요청임.
    • 401 Unauthorized 인증이 필요함.
    • 404 Not Found 요청한 리소스를 찾을 수 없음.
  • 5xx: 서버 오류
    • 500 Internal Server Error 서버가 요청을 처리하는 동안 오류가 발생.
    • 502 Bad Gateway 서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받음.

🔍 HTTP 메서드

HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는 데 사용됨.

  • GET 서버로부터 데이터를 요청할 때 **사용해요. 요청 데이터가 URL에 포함**되어 전송되며, 주로 데이터를 조회할 때 사용.
    • REST API에서의 사용: 특정 리소스를 조회할 때 사용.
  • POST
    • 정의: 서버에 데이터를 제출할 때 사용.
    • 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용.
    • REST API에서의 사용: 새로운 리소스를 생성할 때 사용.
  • PUT, PATCH
    • 정의: 서버의 데이터를 업데이트할 때 사용.
    • 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 기존 데이터를 수정할 때 사용.
    • REST API에서의 사용: 기존 리소스를 수정할 때 사용.
  • DELETE
    • 정의: 서버의 데이터를 삭제할 때 사용.
    • 특징: 주로 특정 데이터를 삭제할 때 사용.
    • REST API에서의 사용: 특정 리소스를 삭제할 때 사용.

🔍 RESTful 원칙에 따라 작성된 API 명세서

  •  기본 URL https://api.example.com
  • 엔드포인트
순번요청 내용methodurl
1게시글을 추가POST/posts
2모든 게시글 조회GET/posts
3특정 게시글 조회GET/posts/:id
4특정 게시글 정보 업데이트PUT/posts/:id
5특정 게시글 정보 일부 수정PATCH/posts/:id
6특정 게시글 정보 삭제DELETE/posts/:id

🔍 응답/요청 예시

Content-Type: application/json

  • Content-Type 헤더는 서버와 클라이언트가 주고받는 데이터의 형식(타입)을 알려주는 정보야.
  • application/json은 이 데이터가 JSON 형식임을 나타내.
  • 쉽게 비유하기, 이걸 택배 포장에 비유해볼게!
    택배를 보내기 전에 상자에 "옷", "책", "전자제품" 등 포장된 물건의 종류를 적어둬야겠지?
    마찬가지로, HTTP에서 Content-Type은 본문 데이터가 어떤 형식인지 알려주는 "라벨" 역할을 하는 거야.
  • JSON 형식이란?(다음에 더 자세히 다룰거야!)
    JSON (JavaScript Object Notation)은 데이터를 표현하는 가볍고 읽기 쉬운 형식.
{
  "name": "Alice",
  "age": 25,
  "isStudent": true
}
  • Content-Type: application/json의 역할
  • 클라이언트 → 서버로 요청: 클라이언트는 요청 본문이 JSON 형식임을 서버에게 알려줘.
POST /api/users HTTP/1.1
Content-Type: application/json

{
  "name": "Alice",
  "age": 25
}
  • 서버 → 클라이언트로 응답: 서버는 응답 본문이 JSON 형식임을 클라이언트에게 알려줘.
HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "Success",
  "data": {
    "id": 1,
    "name": "Alice"
  }
}

🙌 요게 왜 중요하냐면!

서버와 클라이언트는 서로 다른 시스템이기 때문에, 데이터 형식을 명확히 알려줘야 문제가 생기지 않아. 서버와 클라이언트가 데이터를 올바르게 해석하고 처리할 수 있게 도와주는거지! Content-Type: application/json은 데이터를 JSON 형식으로 처리하도록 약속하는 거야.


🚀 진짜 쉬운 설명

HTTP는 웹 브라우저와 서버가 데이터를 주고받기 위해 사용하는 약속이야.
"클라이언트가 요청(Request), 서버가 응답(Response)"의 원리로 동작해!

profile
dev kyu

0개의 댓글