100724 TIL

 

HTTP 상태 코드 

 

 

 

4xx 클라이언트오류 = 내잘못 

5xx 서버오류 

 

특정 http 요청이 성공적으로 완료 되었는 지알려줌 

 

1xx 정보응답 거의 사용x , 

 

2xx 성공응답 , 요청성공! get 요청에 대한대답

 

3xx 리다이렉션 메시지 , 요청이 완료 될때 까지 추가적인 행동이필요함 

 

4xx 클라이언트에러 응답 , 클라이언트의 잘못된 요청으로 서버가 이해 못함

 

5xx 서버 에러 응답 , 서버측의 오류 

---

REST API. 

 

 

http 를 통해서 데이터를 교환 할 떄 사용 

 

클라이언트 - 서버 구조 

 

클라이언트와 서버의 역할을 명확하게 분리함

 

클라이언트 ; 사용자 인터페이스 제공 

 

서버 : 데이터 저장 , 처리하는 기능 담당 

 

클라이언트는 서버에 요청을 보내고 서버는 그에 응답함 .

---

 

stateless 무상태성 

 

모든 요청은 독립적 이다 . 

 

서버클라이언트의 이전 요청에 대한 정보를 저장하지 않는다  .

 

각 요청에는 필요한 모든 정보가 포함되어있어야함. 

 

---

http 메서드 

restful api 는 http 메서드를 사용 하여 클라이언트가 서버와 

 

상호작용을 할 수있음 

 

각 메서드는 특정 작업을 나타내며 , 리소스에 대한 다양한 CRUD 작업을 한다 

 

GET: 서버에서 리소스를 조회 , 데이터 조회를 할 때 사용 서버의 상태를 변경하지 않는다 retrieve 

 

POST: 서버에 새로운 리소스를 생성한다 .클라이언트가 데이터를 서버로 전송하고 서버는 이를처리하여 리소스를 생성한다 create

 

PUT: 기존 리소를 수정하거나 리소스가 없을 경우 새로 생성할 수 있다 update 

 

DELETE:  리소스를 삭제  remove 

 

PATCH: 리소스의 일부를 수정할 때 사용 

 

 

---

tanstackquery 

 

비동기 데이터를 효율적으로 관리하고 요청할수있게 해주는 

 

데이터 패칭 라이브러리.

 

자동캐싱 ,동기화 

비동기 데이터 관리 

데이터 자동 재요청

탄력적인 리페치 .

 

파일만들기 yarn create vite tanstack-query-app --template react

 

설치 yarn add @tanstack/react-query

 

useQuery  특정 데이터를 서버에서 가져오기 위한 훅hook. 

데이터를 비동기적으로 요청하고 그 상태 로딩 성공 에러 등 관리 할 수있다 

데이터 조회에 사용 

get 에 해당됨 

 

const { data, error, isLoading } = useQuery(queryKey, queryFn);

 

queryKey: 고유한 키 ,해당 쿼리의 데이터를 식별 

이 키를 기준으로 캐싱이 이뤄진다

 

queryFn : 데이터를 가져오는 비동기 함수 

주로 api 호출을 포함 

 

data :쿼리로 가져온 데이터 

error: 요청중 발생한 에러 

isLoading: 데이터 로딩 중 상태를 나타내는 플래그 

 

 

 

const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

if (isLoading) return 'Loading...';
if (error) return 'An error occurred: ' + error.message;

return (
  <ul>
    {data.map(todo => (
      <li key={todo.id}>{todo.title}</li>
    ))}
  </ul>
);

 

useMutation 

데이터를 서버에 전송하거나 업데이트 하는 데 사용 

서버에 데이터를 POST, PUT , DELETE 할 때 주로 사용 

데이터 변경에 사용 

데이터 전송or 수정 

p p d 로 외우자 

modify 에 해당됨 

 

const mutation = useMutation(mutationFn, options);

 

mutationFn: 서버에 데이터를 변경하는 비동기 함수. 예를 들어, 새로운 데이터를 추가하거나 업데이트하는 작업을 수행

options: 성공, 에러, 완료 시 호출되는 콜백 함수와 같은 추가 설정을 포함

 

mutate: 실제로 변화를 트리거하는 함수.

status: 변화를 처리 중인지, 성공했는지, 실패했는지 등의 상태 정보.

isLoading, isError, isSuccess: 각각 요청 상태를 나타내는 플래그.

 

 

 

useQuery 와 useMutation 의 차이점 

 

useQuery 는 데이터 조회에 사용 , 데이터를 가져오는 동안 로딩 상태와 에러 상태를 관리 

 

useMutation 데이터 변경에 사용 새로운 데이터를 서버에 추가하거나 수정 삭제 처리 

 

invalidate - refresh 

invalidateQueries 

검증하지않는다 . 무효화 한다