react-query

React-Query vs SWR

블로그 이전하였습니다. React-Query vs SWR 비슷하지만 다른 react-query와 swr를 컨셉을 이해하며 비교해보자 yoon-hae-min.github.io 기존 글 서론 둘이 비교하기 앞서 왜 이런 라이브러리를 쓰는지부터 보고 가자 React에서 서버로부터 데이터를 가져오거나 전송해야할때 fetch Api를 사용하거나 axios를 사용하고는 한다. 이를 사용해서 충분히 서버와 데이터를 주고받을 수 있으나 규모가 커지면서 데이터 처리, 에러핸들링과 같은 부가적인 요인들이 많아지게 된다. 직접 구현해도 되지만 라이브러리를 이용해서 좀 더 쉽게 처리할 수 있다. 공통점 1. 데이터 요청 및 관리를 하기 쉽게 만들어 준다. 2. 캐시를 통해 api 호출을 줄이고 성능(UX)를 향상할 수 있다...

React Following Follower Modal창 동기화하기

블로그 이전하였습니다. React Following Follower Modal창 동기화 react-query의 queryClient를 이용해서 팔로우 팔로워 모달창을 동기화 시켜보자 yoon-hae-min.github.io 기존 글 진행 동기 Breaking프로젝트를 진행하면서 프로필 팔로잉 팔로워 모달창에서 유저를 팔로잉 할시에 반대편 모달창에 그 값이 적용되지 않았고 이를 해결하기 위해서 Profile Modal에 state로 만들어 두 개의 Modal을 묶어서 처리했는데 이보다 좋은 방법이 없을까 고민하던 중 optimistic update를 배우면서 이와 비슷하게 직접 queryCache에 접근해서 해결해 보자고 생각하였다. 리펙토링 시리즈 인피니티 스크롤에서 데이터가 많아지면 프레임이 떨어짐 마..

React query를 사용하면 전역 상태가 필요없다?

블로그 이전하였습니다. React Query를 사용하면 전역 상태가 필요없다? React Query를 사용하면서 생긴 오해와 진실 yoon-hae-min.github.io 기존 글 처음 React query를 사용하면서 잘못된 개념을 하나 가지고 갔었다. React-query를 사용하면 전역 상태가 필요 없다는 것이었다. 애초에 개념이 다른 말인데 왜 이렇게 생각했는지에 대해서 풀어보고자 한다. 프론트엔드 개발에서 꼭 필수적인 것이 state 즉 상태이다. 상태를 주관적으로 정의를 내려본다면 사용자와 상호작용하기 위해 동적으로 변하는 데이터를 말할 수 있다. 이 상태에 따라 UI를 적절하게 보여주도록 설정하는 것이 상태 관리인 것이다. 하지만 상태가 복잡해지고 다양화 됨에 따라 하나의 상태가 영향을 미치..

프론트엔드의 JWT

jwt토큰은 쿠키 세션 처럼 인증방법의 한 종류이다 출처: https://www.bezkoder.com/jwt-json-web-token/ jwt 인증방법 cookie session 인증 방법 둘의 공통점은 서버에 어떤 값을 주고 원하는 데이터를 받는다는 점이다 기존의 쿠키 세션은 세션아이디를 통해서 서버에 저장되어있는 데이터를 불러오지만 jwt는 서버에서 유효한지만 체크하고 데이터를 넘겨준다 JWT 토큰 - 구조 jwt는 기본적으로 토큰안에 데이터가 들어있다. Header, Payload, Signature 3부분으로 이루어지는데 각각의 부분은 Base64Url로 인코딩되어 있어 디코드를 하여 데이터를 얻는다. ( 보통 인증할때 백엔드에서 유효하면 디코드 해서 데이터를 넘겨준다) 단 여기서 인코딩은 암..