Tanstack Query 기본 사용법
Tanstack Query(구 React Query)는 서버 상태 관리 라이브러리다. 클라이언트 상태란? 클라이언트 측에서 관리하는 데이터다. 그 예시로는 세션 데이터, 캐시 데이터, 로컬 저장소가 있다. 세션 데이터: 현재 로그인한 유저 정보, 현재 페이지, 폼 입력값 등 캐시 데이터: 정적 리소스(이미지, 스크립트), API ...
Tanstack Query(구 React Query)는 서버 상태 관리 라이브러리다. 클라이언트 상태란? 클라이언트 측에서 관리하는 데이터다. 그 예시로는 세션 데이터, 캐시 데이터, 로컬 저장소가 있다. 세션 데이터: 현재 로그인한 유저 정보, 현재 페이지, 폼 입력값 등 캐시 데이터: 정적 리소스(이미지, 스크립트), API ...
이전 포스팅에서 Tanstack Query 를 사용하는 간단한 예시를 살펴보았다. useQuery() 를 통해 Read, useMutation() 을 이용해 Create 동작을 구현해보았다. 이후, invalidateQueries() 로 캐시 데이터에 변화가 생기면 이를 반영하도록 만들었다. 이것이 어떤 원리로 동작하는 걸까? SWR 이란? ...
로그인과 회원가입 등의 기능은 보안이 중요하다. 이를 위해, 인증과 인가, 쿠키, 토큰, JWT 에 대해 간단히 알아보자. 인증, 인가란? 인증(Authentication)이란 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 -> 일반적인 로그인 과정 인가(Authorization)이란, 인증을 받은 유저가 리소스에 ...
프로젝트 주제에 대해서 이야기를 나누었다. 1일 차에 구상한 서비스 형태는 개발 스터디 / 프로젝트를 모집하는 플랫폼이다. 기획 회의에서 레퍼런스로 삼은 페이지들은 다음과 같았다. 인프런 커뮤니티 중 팀 프로젝트 모집 게시판 Hola! 여담으로, Hola 는 튜터님의 지인이 운영하는 사이트라고 해서 좀 놀랐다..!...
오늘 한 것 예비군 다녀왔다 리액트 심화과정 axios, 인증, 인가 듣기
오늘 한 것 리액트 심화과정 수강 비동기 처리에 대해 간단히 복습 비동기는 순차적인 코드 실행 순서를 보장하지 않는 것이 특징! 그래서, 이를 동기적으로 쓰기위해 Promise 객체나, async / await 를 사용한다! 기존 가게부 과제 로그인 / 회원가입 페이...
Trouble Shooting 작성한 게시글의 이미지만 수정 / 삭제 불가 게시글의 정보를 다루는 posts 테이블에서, img_path 라는 column 이 존재함. 이는 단순히 게시물이 불러올 이미지의 publicUrl 만 지닌 상태임. 삭제나 수정을 할 이미지를 구분할 수 있...