juni
Promise , HTTP 본문
slice - 원본 배열을 유지하며 조건을 만족 하는 새로운 배열을 리턴
splice - 조건을 만족 하는 새로운 배열을 리턴하는데 원본 배열을 리턴 값을 제외한 배열로 변경
psomise 관련 복습 / 아래는 fake data 사용
import { useEffect, useState } from "react";
// function App() {
// const [message, setMessage] = useState("타이머 시작");
// useEffect(() => {
// const delay = (ms) => {
// const promise = new Promise((reslove) => {
// setTimeout(reslove, ms);
// });
// return promise;
// };
// delay(2000).then(() => {
// setMessage("2초 후 메시지가 변경됨");
// });
// }, []);
// return (
// <>
// <h1>{message}</h1>
// </>
// );
// }
// export default App;
function App() {
useEffect(() => {
.then((response) => response.json())
.then((json) => console.log(json));
});
return (
<>
<h1></h1>
</>
);
}
export default App;
Promise 병렬 관리 방법
function App() {
useEffect(() => {
Promise.all([
response.json()
),
response.json()
),
]).then(([response1, response2]) => {
console.log(response1);
console.log(response2);
});
}, []);
return (
<>
<h1></h1>
</>
);
}
export default App;
비동기 코드를 동기 코드처럼 작성 하는 예시
우선 async 키워드로 정의된 함수는 항상 Promise 객체를 반환함
const testFunc = async () => {
return 1;
}
const value = testFunc();
console.log(value)
const App = () => {
const [post, setPost] = useState(null);
useEffect(() => {
const fetchPost = async () => {
const response = await fetch(
);
const data = await response.json();
setPost(data);
};
fetchPost();
}, []);
console.log(post);
return <></>;
};
export default App;
// async 사용시 문제를 방지하려면 아래처럼 => catch를 해내려면
const App = () => {
const [post, setPost] = useState(null);
useEffect(() => {
const fetchPost = async () => {
try {
const response = await fetch(
);
const data = await response.json();
setPost(data);
} catch (error) {
console.log("Error", error);
}
};
fetchPost();
}, []);
console.log(post);
return <>{post ? <div>{post.title}</div> : <div>Loading...</div>}</>;
};
export default App;
HTTP란? ( Protocol은 데이터 통신을 원활하게 하기 위해 필요한 통신 규약 )
HTTP(HyperText Transfer Protocol)는 웹 상에서 데이터를 주고받기 위한 프로토콜임
클라이언트와 서버 간의 요청과 응답을 정의하며, 상태코드와 헤더를 포함한 다양한 요소를 가지고 있음
특징
- 무상태성: HTTP는 상태를 유지하지 않아요. 각 요청은 독립적이며, 이전 요청의 정보를 기억하지 않아요. 이를 무상태(stateless)라고함
- 확장성: HTTP는 다양한 확장 헤더를 추가하여 기능을 확장 가능
- 유연성: HTTP는 다양한 데이터 형식을 전송할 수 있음 => 텍스트, 이미지, 비디오 등 여러 형식을 지원
HTTP 메시지 구조
요청 과 응답으로 나눔
요청 : 클라이언트가 서버로 데이터를 요청 시 사용
- 요청 라인: 메서드(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 작업을 수행함
- 1. GET
- REST API에서의 사용: 특정 리소스를 조회할 때 사용
- 서버로부터 데이터를 요청할 때 ****사용함 요청 데이터가 URL에 포함되어 전송되며, 주로 데이터를 조회할 때 사용
- 2. POST
- 정의: 서버에 데이터를 제출할 때 사용
- 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용
- REST API에서의 사용: 새로운 리소스를 생성할 때 사용
- 3. PUT, PATCH
- 정의: 서버의 데이터를 업데이트할 때 사용
- 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 기존 데이터를 수정할 때 사용
- REST API에서의 사용: 기존 리소스를 수정할 때 사용
- 4. DELETE
- 정의: 서버의 데이터를 삭제할 때 사용
- 특징: 주로 특정 데이터를 삭제할 때 사용
- REST API에서의 사용: 특정 리소스를 삭제할 때 사용
API 명세서 작성 팁
| 1 | 게시글을 추가 | POST | /posts |
| 2 | 모든 게시글 조회 | GET | /posts |
| 3 | 특정 게시글 조회 | GET | /posts/:id |
| 4 | 특정 게시글 정보 업데이트 | PUT | /posts/:id |
| 5 | 특정 게시글 정보 일부 수정 | PATCH | /posts/:id |
| 6 | 특정 게시글 정보 삭제 | DELETE | /posts/:id |
데이터를 가져오기 위한 GET 요청과
데이터를 생성하기 위한 POST 요청의 차이
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(
);
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;
POST에는 method , headers , boyd 모두 필요한 차이가 있음
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 {
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;
'CS' 카테고리의 다른 글
| 인증,인가 (0) | 2024.06.12 |
|---|---|
| json-server , axios (0) | 2024.06.11 |
| 리액트 redux 간단 학습 (0) | 2024.05.27 |
| Router , styled-components (0) | 2024.05.23 |
| State, Layout Component (0) | 2024.05.15 |
'CS' Related Articles
more
