React - HTTP

박요셉·2024년 6월 10일
1

React

목록 보기
12/15

(1) HTTP란?


HTTP의 개념


HTTP는 클라이언트-서버 모델을 기반으로 동작한다.
클라이언트가 요청을 보내면 서버가 응다을 반환하는 방식.

이러한 요청과 응답은 텍스트 기반의 메세지로 이루어져 있다.

HTTP의 특징


향후 인증/인가 세션에서 HTTP 프로토콜의 가장 중요한 특징에 대해 좀 더 실용적인 측면에서 상세히 다룰 예정

  • 무상태성: HTTP는 상태를 유지하지 않는다. -> 각 요청은 독립적이며, 이전 요청의 정보를 기억하지 않는다. 이를 무상해(stateless)라고 한다.
  • 확장성 : HTTP는 다양한 확장 헤더를 추가하여 기능을 확장할 수 있다.
  • 유연성 : HTTP는 다양한 데이터 형식을 전송할 수 있다.
    텍스트, 이미지, 비디오 등 여러 형식을 지원한다.

HTTP메세지 구조


HTTP 메세지는 요청(Request)응답(Response)로 나눌 수 있다.

  • 요청 메세지 : 클라이언트가 서버로 데이터를 요청할 때 사용한다.
    - 요청 라인 : 메서드(GET, POST, 등), URL, HTTP 버전
    • 헤더 : 요청의 추가 정보(메타 데이터)를 담고 있다, 브라우저 정보, 인증 정보 등
      - 요청 헤더와 인증 정보 : 웹 브라우저가 서버에 요청을 보낼 때, 서버는 요청을 보낸 사람이 누구인지 알아야 하고, 이것이 바로 인증이다.
    • 본문 : 선택적, 주로 POST 메서드에서 사용
  • 응답 메세지 : 서버가 클라이언트의 요청에 대한 응답을 보낼 때 사용한다.
    - 상태 라인: HTTP 버전, 상태코드(200, 404, 등), 상태 메시지
    - 헤더: 응답의 추가 정보(메타데이터) ⇒ 콘텐츠 타입, 데이터 길이 등
    - 본문: 선택적, 주로 응답 데이터

(2) HTTP 상태코드

HTTP 상태코드서버클라이언트요청을 처리한 결과를 나타내요. 상태코드는 세 자리 숫자로 구성되며, 첫 번째 자리에 따라 의미가 달라져요.

(2) HTTP 상태코드

HTTP 상태코드서버클라이언트요청을 처리한 결과를 나타내요. 상태코드는 세 자리 숫자로 구성되며, 첫 번째 자리에 따라 의미가 달라져요.

  • (2)-1. 1xx: 정보

    • 100 Continue 요청의 일부를 서버가 받았으며, 나머지를 계속 보내라는 의미에요.
  • (2)-2. 2xx: 성공

    • 200 OK 요청이 성공적으로 처리되었음을 나타내요.
    • 201 Created 요청이 성공적이었으며, 새로운 자원이 생성되었음을 나타내요.
  • (2)-3. 3xx: 리다이렉션

    • 301 Moved Permanently 요청한 리소스가 영구적으로 새로운 URL로 이동했음을 나타내요.
    • 302 Found 요청한 리소스가 임시로 다른 URL로 이동했음을 나타내요.
  • (2)-4. 4xx: 클라이언트 오류

    • 400 Bad Request 잘못된 요청임을 나타내요.
    • 401 Unauthorized 인증이 필요함을 나타내요.
    • 404 Not Found 요청한 리소스를 찾을 수 없음을 나타내요.
  • (2)-5. 5xx: 서버 오류

    • 500 Internal Server Error 서버가 요청을 처리하는 동안 오류가 발생했음을 나타내요.
    • 502 Bad Gateway 서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받았음을 나타내요.
  • (2)-1. 1xx: 정보

    • 100 Continue 요청의 일부를 서버가 받았으며, 나머지를 계속 보내라는 의미에요.
  • (2)-2. 2xx: 성공

    • 200 OK 요청이 성공적으로 처리되었음을 나타내요.
    • 201 Created 요청이 성공적이었으며, 새로운 자원이 생성되었음을 나타내요.
  • (2)-3. 3xx: 리다이렉션

    • 301 Moved Permanently 요청한 리소스가 영구적으로 새로운 URL로 이동했음을 나타내요.
    • 302 Found 요청한 리소스가 임시로 다른 URL로 이동했음을 나타내요.
  • (2)-4. 4xx: 클라이언트 오류

    • 400 Bad Request 잘못된 요청임을 나타내요.
    • 401 Unauthorized 인증이 필요함을 나타내요.
    • 404 Not Found 요청한 리소스를 찾을 수 없음을 나타내요.
  • (2)-5. 5xx: 서버 오류

    • 500 Internal Server Error 서버가 요청을 처리하는 동안 오류가 발생했음을 나타내요.
    • 502 Bad Gateway 서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받았음을 나타내요.

    (3) HTTP 메서드 및 RestAPI

    HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는 데 사용한다.
    REST API는 이러한 HTTP 메서드를 사용하여 CRUD 작업을 수행한다.

  • (중요) 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 헤더는 HTTP 요청 또는 응답의 본문(body) 데이터 형식을 나타내기 위해 사용됩니다. 이 헤더는 서버나 클라이언트에게 본문 데이터가 JSON 형식임을 알려줍니다.

    • POST /posts 새로운 게시물을 생성합니다.
      • URL: /posts
      • Method: POST
      • Headers:
        • Content-Type: application/json
      • Request Body:
        {
          "title": "string",
          "body": "string",
          "userId": "integer"
        }
      • Response:
        • 201 Created
          {
            "id": "integer",
            "title": "string",
            "body": "string",
            "userId": "integer"
          }
        • 400 Bad Request: 요청 본문이 잘못되었을 때
    • GET /posts 모든 게시물을 조회합니다.
      • URL: /posts
      • Method: GET
      • Headers: 없음
      • Response:
        • 200 OK
          [
            {
              "id": "integer",
              "title": "string",
              "body": "string",
              "userId": "integer"
            },
            ...
          ]
    • GET /posts/{id} 특정 게시물을 조회합니다.
      • URL: /posts/{id}
      • Method: GET
      • Headers: 없음
      • Response:
        • 200 OK
          {
            "id": "integer",
            "title": "string",
            "body": "string",
            "userId": "integer"
          }
        • 404 Not Found: 해당 ID의 게시물이 존재하지 않을 때
    • PUT /posts/{id} 특정 게시물을 업데이트합니다. (전체 업데이트)
      • URL: /posts/{id}
      • Method: PUT
      • Headers:
        • Content-Type: application/json
      • Request Body:
        {
          "title": "string",
          "body": "string",
          "userId": "integer"
        }
      • Response:
        • 200 OK
          {
            "id": "integer",
            "title": "string",
            "body": "string",
            "userId": "integer"
          }
        • 400 Bad Request: 요청 본문이 잘못되었을 때
        • 404 Not Found: 해당 ID의 게시물이 존재하지 않을 때
    • PATCH /posts/{id} 특정 게시물을 부분적으로 업데이트합니다.
      • URL: /posts/{id}
      • Method: PATCH
      • Headers:
        • Content-Type: application/json
      • Request Body (모든 필드가 선택 사항입니다):
        {
          "title": "string",
          "body": "string",
          "userId": "integer"
        }
      • Response:
        • 200 OK
          {
            "id": "integer",
            "title": "string",
            "body": "string",
            "userId": "integer"
          }
        • 400 Bad Request: 요청 본문이 잘못되었을 때
        • 404 Not Found: 해당 ID의 게시물이 존재하지 않을 때
    • DELETE /posts/{id} 특정 게시물을 삭제합니다.
      • URL: /posts/{id}
      • Method: DELETE
      • Headers: 없음
      • Response:
        • 200 OK: 성공적으로 삭제되었을 때
        • 404 Not Found: 해당 ID의 게시물이 존재하지 않을 때
profile
개발자 지망생

0개의 댓글