240611 TIL
HTTP
프로토콜 : 데이터 통신을 월활하게 하기 위해 필요한 통신 규약(신호 송신의 순서, 데이터의 표현법, 오류 검출법 등)
클라이언트-서버 모델을 기반으로 동작한다. 요청과 응답은 텍스트 기반의 메시지로 이루어져 있다.
특징
무상태성 : 모든 요청은 독립적, 이전 요청의 정보를 기억하지 않는다.
확장성 : 확장 헤더를 추가하여 기능을 확장할 수 있다.
유연성 : 다양한 데이터 형식을 전송할 수 있다.
메시지 구조
(1) 요청 메시지
-
요청 라인: 메서드(GET, POST, 등), URL, HTTP 버전
-
헤더: 요청의 추가 정보(메타데이터). 브라우저 정보, 인증 정보 등
왜 요청 헤더에 인증 정보가 들어갈까?
웹 브라우저가 서버에 요청을 보낼 때, 서버는 요청을 보낸 사람이 누구인지 알아야 한다. 바로 `인증(Authentication)`
요청헤더 예시
GET /protected-resource HTTP/1.1 Host: example.com Authorization: Bearer <Access-Token> -
본문: 선택적, 주로 POST 메서드에서 사용
GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html
(2) 응답 메시지
서버가 클라이언트의 요청에 대한 응답을 보낼 때 사용
- 상태 라인: HTTP 버전, 상태코드(200, 404, 등), 상태 메시지
- 헤더: 응답의 추가 정보(메타데이터)
- 본문: 선택적, 주로 응답 데이터
HTTP/1.1 200 OK Content-Type: text/html Content-Length: 1354 <!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
HTTP 상태코드
서버가 클라이언트의 요청을 처리한 결과. 세 자리 숫자로 구성. 첫 번째 자리에 따라 의미가 디드다.
- 1xx: 정보
100Continue : 요청의 일부를 서버가 받았으며, 나머지를 계속 보내라는 의미.
- 2xx: 성공
200OK : 요청이 성공적으로 처리됨.
201Created : 요청이 성공적이었으며, 새로운 자원이 생성됨.
- 3xx: 리다이렉션
301Moved Permanently : 요청한 리소스가 영구적으로 새로운 URL로 이동함.
302Found : 요청한 리소스가 임시로 다른 URL로 이동함.
- 4xx: 클라이언트 오류
400Bad Request : 잘못된 요청.
401Unauthorized : 인증이 필요함.
404Not Found : 요청한 리소스를 찾을 수 없음.
- 5xx: 서버 오류
500Internal Server Error : 서버가 요청을 처리하는 동안 오류 발생.
502Bad Gateway : 서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받음.
HTTP 메서드 및 Rest API
HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는 데 사용한다. REST API는 이러한 HTTP 메서드를 사용하여 CRUD 작업을 수행한다.
(1) GET
서버로부터 데이터를 요청한다. 요청 데이터가 URL에 포함되어 전송되며, 주로 데이터를 조회
(2) POST
서버에 데이터를 제출한다. 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용한다.
(3) PUT, PATCH
서버의 데이터를 업데이트한다. 요청 데이터가 요청 본문에 포함되어 전송된다.
(4) DELETE
서버의 데이터를 삭제한다.
RESTful 원칙이란?
method와 url의 조합만으로 어떤 종류의 요청인지 추측가능할수록 RESTful하다고 한다.
Ex)
method가 POST이고, url이 /posts이면 포스트를 추가한다는 요청.
method가 GET이고, url이 /posts이면 포스트를 조회한다는 요청.
예시코드
다음은 fetch API를 사용하는 예시이다.
(1) GET
import React, { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
// get 요청 시, fetch는 method를 명시하지 않아도 된다.
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts/1"
);
const result = await response.json();
setData(result);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);
return <div>{data ? <div>{data.title}</div> : <div>Loading...</div>}</div>;
}
export default App;
(2) POST
import React, { useState } from "react";
function App() {
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const [response, setResponse] = useState(null);
const handleSubmit = async (event) => {
event.preventDefault();
try {
const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: title,
body: body,
userId: 1,
}),
});
const result = await res.json();
setResponse(result);
} catch (error) {
console.error("Error creating data:", error);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
<textarea
value={body}
onChange={(e) => setBody(e.target.value)}
placeholder="Body"
/>
<button type="submit">Create Post</button>
</form>
{response && <div>Created Post ID: {response.id}</div>}
</div>
);
}
export default App;
