[React-Query]Optimistic Updates로 빠른 UI제공하기
유저가 설정 상태를 변경하면 프론트엔드에서 put으로 백엔드 api를 요청하고 해당 요청이 성공하면 유저에게 성공한 UI를 보여줌으로써 상태가 변했음을 보여준다. clickEvent -> Request -> success -> Response -> state update clickEvent -> Request -> fail -> Response -> error handling 서버상태를 제대로 반영하기 위해 response를 확인하고 UI를 업데이트시켰다. 서버상태와 브라우저 상태가 일치하므로 정확한 데이터를 보여줄 수 있지만 api가 반응하기까지 프론트엔드 상태변경이 이루어지지 않아서 유저가 보기엔 반응이 '느린 것처럼' 느껴졌다. 이럴 때 사용할 수 있는 기술이 Optimistic Updates이다...
[React-Query] StaleTime, CacheTime 이해, 네트워크 요청 줄이기
StaleTime, CacheTime을 보게 된 이유 운영 서버 백엔드 인스턴스 cpu 100% 초과로 다운 원인: 특정 api의 호출이 급격이 몰리는 시간대였는데, 하필 그 api에 정돈되지 않은 수많은 쿼리가 있음 백엔드에서 해당 api에서 호출되는 쿼리를 정리해서 cpu사용률을 줄임 프런트엔드의 문제는 없었을까? 프런트엔드의 문제점 : 불필요한 네트워크 요청 과다 1. useEffect의 의존성배열에 Next/Router에서 리턴해주는 pathname을 넣어놓고 내부에서는 useQuery가 리턴하는 refetch 함수를 실행시킴 (동일한 Link컴포넌트를 클릭해도 pathname의 변경으로 인식하는 듯.. refetch가 계속해서 발생됨) 2. 해당 페이지의 실시간성이 중요하지 않은데도 해당 쿼리가..
Params의 변화에 따라 useQuery refetch 하기
https://stackoverflow.com/questions/67796103/refetch-with-different-data-react-query refetch with different data react query I try to Refetch every button is click and get a new data const {refetch,data,isLoading} = useQuery( "getkurs",() =>fetch( `https://free.currconv.com/api/v7/convert? q=${sel... stackoverflow.com 서버에서 데이터를 가져오기 위해 react query를 사용했습니다. useQuery를 호출할 때 router에서 쿼리스트링 값을 가져온 후..
Recoil 첫 사용, 썸네일 등록기능 구현
입점업체의 썸네일을 등록하는 기능을 구현하는데 이미지를 formdata로 보내는 게 전부라고 생각했는데 요구사항을 구현하는데 꽤 복잡했다. 기획 요구사항 1. 기존에 썸네일이 이미 등록되어 있는 경우에는 미리보기를 띄워준다. 2. 이미지 파일을 추가하거나(Input type file) 전에 올렸던 상품 사진 중에 사용하고 싶은 썸네일을 고를 수 있다. 3. 파일을 선택할지, 상품 이미지에서 선택할지, 중간중간 섞을지, 순서는 유저의 마음대로다. 4. 유저가 원한 순서 그대로 저장하고 미리보기도 그 순서와 일치할 것, 나중에 불러올 때도 그 순서대로 보장될 것. 5. 최대 5장까지 선택가능 요구사항을 구현하다 보니 컴포넌트가 생각보다 깊고 데이터 흐름이 복잡하다. 그래서 props로 넘기는 데이터들이 점점..
재사용 가능한 컴포넌트 계획
입사 3주 차에 드디어 임무가 생겼습니다! 총 4개의 페이지를 만들어야 합니다. 당장 코딩부터 시작하기 전에 1. 중복되는 컴포넌트가 어떤 게 있을지 판단했습니다. 2. 이미 만들어져 있는 재사용 가능한 컴포넌트를 찾았습니다. (전임 개발자분께서 이미 개발해놓으신 부분을 최대한 활용하기 위해) 3. 컴포넌트 구조를 짰습니다. 그리고 데이터를 props로 넘길지 전역상태를 사용할지 판단했습니다. 페이지 하나가 꽤 구조가 깊어서 전역상태관리를 사용하기로 했고 리코일로 결정했습니다. 기존에는 리액트쿼리를 사용해서 서버 상태 관리를 하고 컨텍스트 api를 사용하고 있었습니다만 리액트 쿼리가 너무 잘 정돈되어 있어서 계속 사용하고 싶었습니다. 게다가 서버에서 받은 데이터를 꽤 복잡한 로직으로 가공해야 할 필요가 ..
state변경 시 왜 useState, setState를 쓸까?
state 변경 시 useState를 쓰는 이유 정확히 말하면 변수를 쓰지않고 useState로 관리하는 이유 함수형 컴포넌트에서 화면에 보여주는 상태가 변할때마다 적절히 재렌더링 하기 위해서입니다. 만약 재렌더링이 필요없이 잠깐만 사용하는 데이터라면 그냥 변수를 사용해도 됩니다. useState훅을 사용하면 state, setState 가 반환되고 이것을 보통 비구조화 할당을 통해 받아서 사용합니다. setState함수를 통해 state를 변경하면 function 컴포넌트가 다시 실행되고() virtual DOM을 리턴합니다. 그리고 리턴한 virtual DOM과 비교해서 state가 달라졌다면 달라진 부분에 해당하는 값을 업데이트 합니다. 1.이쯤에서 두가지가 궁금해집니다. 대체 setState는 어..