[React] HTTP & json-server

Hyowmls·2024년 6월 11일
0
post-thumbnail

HTTP - HyperText Transfer Protocol

웹 상에서 데이터를 주고받기 위한 프로토콜(통신규약)

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

특징

  • 무상태성
    HTTP는 상태를 유지하지 않는다.
    각 요청은 독립적이며, 이전 요청의 정보를 기억하지 않는다

  • 확장성
    HTTP는 다양한 확장 헤더를 추가하여 기능을 확장할 수 있다

  • 유연성
    HTTP는 다양한 데이터 형식을 전송할 수 있다

메세지 구조

HTTP 메세지는 요청(request)과 응답(response)로 나눌 수 있다

요청 메세지

클라이언트가 서버로 데이터를 요청할 때 사용

  • 요청 라인 : 메서드(GET, POST 등), URL, HTTP 버전
  • 헤더 : 요청의 추가 정보(메타 데이터), 브라우저 정보, 인증 정보 등
  • 본문 : 선택적으로 주로 POST메서드에서 사용한다

응답 메세지

버서가 클라이언트의 요청에 대한 응답을 보낼때 사용

  • 상태라인 : HTTP 버전, 상태코드(200,404 등), 상태 메세지
  • 헤더 : 응답의 추가 정보(메타 데이터), 컨텐츠 타입, 데이터 길이 등
  • 본문 : 선택적으로 주로 응답 데이터

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 메서드 & Rest API

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

  • GET - 서버로부터 데이터를 요청할 때 사용한다
    요청 데이터가 URL에 포함되어 전송되며, 주로 데이터를 조회할 때 사용한다
  • POST - 서버에 데에터를 제출할 때 사용한다
    요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용한다
  • PUT, PATCH - 서버의 데이터를 업데이트 할 때 사용한다
    요청 데이터가 요청 본문에 포함되어 전송되며, 주로 기존 데이터를 수정할 때 사용한다
  • DELETE - 서버의 데이터를 삭제할 때 사용한다
    주로 특정 데이터를 삭제할 때 사용한다

RESTful 원칙

메서드와 URL만을 조합하여 어떤 종류의 요청인지 추측하기 쉬울수록 RESTful 하다고 말한다

json-server

간단한 DB와 API 서버를 생성해주는 패키지

  • Backend에서 실제 DB와 API 서버가 구축될 때까지 Frontend 개발에서 임시적으로 사용할 데이터를 생성하기 위해 사용한다

설치

yarn add json-server 명령어로 설치
yarn json-server db.json --port 4000 으로 실행
❗️ File db.json not found 오류 메세지가 나오면 root 경로에 db.json 파일을 만들어 주고 실행 하면 됨

브라우저에서 엔드포인트 주소를 열어 제대로 데이터가 들어있는지 확인

0개의 댓글