HTTP 구조
ㄴ 신뢰성을 바탕으로 한 TCP 구조로 이루어져 있다. (답 보내면 꼭 회신 옴) / 반면에 UDP 는 신뢰성을 보장하 지않음
A : Browser
B : Server
3 handshaking 을 진행해야한다. (여보세요? 여보세요? 용건이뭐야? 강남에서만나자 ... )
ㄴ 통신 끊어지거나 새로운 요청을 전송할때 또 다시 3handshaking 진행
- HTTP로 연결하면, 연결이 끊어 진 이후 서버는 기대리기만 하고 찾아갈 수가 없다. polling방식 : 클라이언트가 항상 요청
- 때문에 웹 소켓으로 통신을 하면 연결이 끊기지 않고 가능하다. push 방식 : 서버가 클라이언트에게 push 해줌
ㄴex) 실시간 채팅~
POSTMAN (앱 다운)
API 사이트 : https://todo-api.frontendschool.shop/apidocs/
blacnk workspace -> Onlyme -> name : TODO 로 생성
collection 생성 -> add request 생성 (http 리퀘스트를 생성한다.)
url을 넣거나 params를 넣으면 값을 아래의 body 에서 확인할 수 있다.
post 요청 전송 시
body -> raw - > json에 보낼 객체를 json 파일 형태로 입력
환경 설정하기 create Environment 로 환경 변수 등록
목록 조회에서 Environment 선택하고 {{url}}로 입력하면 환경변수 적용
RESTFUL API
내가 설정할 자원의 번호만 정의하고, 메소드에 따라 다르게 동작하는 것이다.
Fetch 통신
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState(null);
useEffect(()=>{
const fetchParams = {url: '/todolist'};
console.log('api서버 호출', fetchParams);
request(fetchParams); // 함수 호출 하면서 url 추가 정보 넘기기
}, []);
// 마운트 때 한번만 되도록 한다.
//호출이 한번만 되면 서버로 부터 데이터도 한번만 받아오게 되므로~
//서버로부터 데이터 받아오기
//서버의 jsondata는 객체이다. 이는 주소를 참조하므로 계속해서 새로운 데이터라고 생각해서 '무 한 렌 더 링' 되므로 이를 막기 위해 useEffect와 useMemo 필요할걸,..?
const request = async params => {
//항상 네트워크 통신에는 try catch가 필요하다!!
try{
const res = await fetch(API_SERVER + params.url); //뒤에 추가 정보 url을 붙여서 fetch 실행
console.log(res);
const jsonData = await res.json(); //fetch의 응답 읽을 때는 .json()
if(jsonData.ok){ //통신이 성공되었으면 jsonData에 ok가 있다.
//setData(jsonData)
}else{
throw new Error(jsonData.error.message); //만약 데이터에 오류가 있으면
}
}catch(err){
console.err(err.message);
}
};
return (
<>
<h1>CustomHook - fetch API 사용</h1>
<h2>할일 목록</h2>
{ data && (
<ul>
{ data.item?.map(item => <li key={ item._id }>{item.title}</li>)}
</ul>
) }
<ul>
<li>Todo 끝내기</li>
</ul>
</>
);
}
export default App;
시나리오
1. useState 실행
const [data, setData] = useState(null);
2. 호출
useEffect(()=>{
const fetchParams = {url: '/todolist'};
console.log('api서버 호출', fetchParams);
request(fetchParams); // 함수 호출 하면서 url 추가 정보 넘기기
}, []);
3. request 함수 실행
4. 상태업데이트 -> 리렌더링 된다.
>>리렌더링 되는 것을 막기 위해서 ?!!
한번만 호출이 되도록 진행하기 위해서 useEffect 안에 호출 함수를 넣은 것이다.
해당 함수는 최초 한번 마운팅 될 때 실행된 뒤로 다시 실행되지 않는다!
*기억할 것 : 원래는 setData() 해주는 곳에 useEffect를 넣었었는데, 이 setData를 불러오는 함수 호출에다가 useEffect를 넣어도 동일한 효과를 일으킬 수 있었다!
Axios 통신
import { useEffect, useState } from "react";
import axios from 'axios';
axios.defaults.timeout = 1500;
function useAxios(fetchParams){
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
console.log('api 서버 호출', fetchParams);
request(fetchParams);
}, []); // 마운트때 한번만 호출됨
const request = async params => {
try{
setIsLoading(true);
const res = await axios(params.url);
console.log(res);
setError(null);
setData(res.data);
}catch(err){
// 에러 처리
console.error(err.message);
setData(null);
setError({ message: '일시적인 문제로 인해 작업에 실패했습니다. 잠시 후 다시 요청해 주시기 바랍니다.' });
}finally{
setIsLoading(false);
}
};
return { isLoading, data, error };
}
export default useAxios;
