본문 바로가기

전체 글

 (40)
[React] Tanstack 쿼리 1.특징 - Http 요청을 전송하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리- 코드가 매우 간결, 고급 기능이 Build in 되어있음- 즉각적인 결과와 업데이트된 데이터를 빠르게 얻을 수 있음주의- Http 를 전송하는 로직이 내장되어 있지 않음 > 직접 코드 작성 해야 함- 대신 요청을 관리하는 로직을 제공(요청 관련 데이터, 발생 가능한 오류를 추적) 2. 사용방법App.jsxfunction App() {  return (    QueryClientProvider client={queryClient}>      RouterProvider router={router} />    QueryClientProvider>  );}  사용하는 컴포넌트 co..
[React] 인증 Authentication tokens사용자가 인증받은 다음 서버에는 이 토큰을 생성하고 그것을 클라이언트에게 전송토큰(알고리즘에 따라 생성된 스트링으로 몇가지 정보를 담고 있음) 토큰을 생성한 백엔드만이 해당 토큰의 유효성을 확인하고 검증 가능백엔드만이 알 수 있는 개인키를 활용해 토큰 생성클라이언트가 백엔드에 요청을 보낼 때 해당 토큰을 요청에 첨부하면 백엔드는 토큰을 살펴보고검증하고 또 그 토큰이 그 백엔드에서 만들어진건지 확인 > 유효한 토큰이면 접근 승인 1. 로그인 시function login(){ const response = await fetch('로그인 요청 주소및 코드..'); // 서버에 로그인 요청 코드... const resData = await resp..
[React] Router , action, defer() 컴포넌트 파일에 (컴포넌트 내에 X) action 함수를 만든다.// action 함수도 리액트 라우터에 의해 실행 됨export async function action({params, request}){ const data = await request.formData(); const method = request.method; const e..

티스토리툴바