HTTP & Axios

HTTP (HyperText Transfer Protocol)

: 독립적인 두 개체(기종) 간의 통신을 위한 약속

1. HTTP Request
   : 클라이언트(Client)는 필요한 데이터를 URL+Method 형태로 작성하여 서버(Server)에 요청함

   주요 메서드
   : GET, POST, PUT, PATCH, DELETE

2. HTTP Response
   : 서버(Server)는 자체적으로 정의된 절차에 따라 요청을 처리한 후, 처리 결과를 클라이언트(Client)에게 제공함

HTTP 주요 응답 코드

코드명	의미
1xx	정보 (Informational)
2xx	성공 (Success)
3xx	정보 변경 (Redirection)
4xx	클라이언트 오류 (Client Error)
5xx	서버 오류 (Server Error)

• 200 (OK) : 정상적으로 수행됨
• 202 (Accepted) : 서버가 클라이언트의 요청을 수락함
• 400 (Bad Request) : 클라이언트가 서버에 요청하는 형식을 잘못 작성함
• 401 (Unauthorized) : 클라이언트가 서버에 접근할 수 있는 권한이 없음
• 403 (Forbidden) : 서버가 해당 클라이언트의 접근을 금지함
• 404 (Not Found) : 서버가 클라이언트의 요청에 해당하는 결과를 찾지 못함
• 405 (Method not allowed) : 클라이언트가 서버에 정의되지 않은 메서드를 사용하여 요청함
• 500 (Internal Server Error) : 서버 내부에 자체적인 오류가 발생함
• 502 (Bad Gateway) : 서버의 상태가 좋지 않음
• 503 (Service Unavailable) : 서버에 과부하가 발생하여 이용할 수 없음
• 504 (Gateway Timeout) : 자체적으로 설정한 기간 내에 요청에 대한 응답을 생성하지 못함(=시간초과)

---

Axios vs Fetch

Axios / Fetch : HTTP 요청을 처리하는 JavaScript 라이브러리

Axios vs Fetch

	Axios	Fetch
설치	별도의 설치과정 필요 npm/yarn insatll axios	브라우저에 내장되어있음
JSON 변환	응답을 자동으로 JSON 형태로 변환함	응답을 JSON 형태로 변환하는 별도의 절차 필요
요청 취소	Request를 취소할 수 있음	Request를 취소할 수 없음
타임아웃 설정	Request에 대한 응답 제한시간(=Timeout)을 설정할 수 있음	Request에 대한 응답 제한시간을 설정할 수 없음
에러 처리	네트워크 오류가 발생하거나, 200이 아닌 HTTP 코드를 반환했을 때 에러를 발생시킴	네트워크 오류가 발생한 경우에만 에러를 발생시킴
중간 처리	interceptors 메서드를 사용하여 요청과 응답이 전달되기 전에 수행할 중간 작업을 생성할 수 있음	요청과 응답이 전달될 때까지 별도의 중간 작업을 생성할 수 없음

---

[240216] React 수준별 수업 의 내용을 정리한 글입니다.