API4 [Prisma] 검색 기능 추가 해보기 (feat. searchParmas & next.js) 1. 검색 창에 찾을려는 '제목' 을 입력 2. 제목 입력 성공시 router.push 를 통해 url에 ?title="제목" 을 넣어줌 => "/pathname?title="제목" const onSubmit = (data: FormProps) => { const { title } = data; router.push(`${pathname}?title=${title}`); }; 3. 나는 pathname에 접근하면 react-query를 통해 쿼리 키에 따라 데이터를 받아오도록 해놨었다. 4. useSearchParams를 통해 "title"을 get 해옴. 없다면 undefined. // /pathname component const searchParam = useSearchParams(); const .. 2024. 2. 13. [React] 데이터를 실시간으로 갱신하기(useSWR, setInterval,useQuery) setInterval() 과 useSWR() 은 모두 데이터를 실시간으로 가져오는 방법이지만, 동작 방식과 목적이 다르다. setInterval() setInterval()은 매번 데이터를 가져오기 위해 API에 요청을 보내는 방식이다. 즉, 호출 횟수가 늘어날수록 서버에 부하가 증가한다. 또한 호출 간격을 지정하더라도 정확히 유지하지 못할 수 있고, 데이터를 가져오다 문제가 발생하면 예외가 발생한다. useSWR() useSWR은 데이터를 캐싱하고, 필요에 따라 API에 요청을 보내 데이터를 가져오는 방식이다. 이 방법은 API 요청 횟수가 줄어들고, 가져온 데이터를 캐싱하여 다음 요청시 캐시된 데이터를 리턴함. 호출 실패시에 적절한 에러 처리 가능함 setInterval() && useSWR() =>.. 2023. 3. 19. [Next.js] Next.js API 만들기 (feat. handler, withHandler) Next.js에서 제공하는 api 기능을 이용해서, api 서버를 만들고 orm을 통해 실제 DB와 연결시키는 것이 목적 1. Next.js api 기능 이용 pages 디렉터리 구조가 router가 되듯이 pages 폴더 안에 api 폴더를 생성한다. api폴더를 생성 후 그 안에 파일을 작성하면 api url이 된다. import { NextApiRequest, NextApiResponse } from "next"; import withHandler from '../../libs/server/withHandler' async function handler(req: NextApiRequest, res: NextApiResponse) { //... 로직 res.status(200).json({ ok: t.. 2023. 1. 22. [React.js] React Query 에 대해 (feat. SWR 과의 차이) -v3 SWR, React Query 등장 이전 Redux, MobX 등의 상태 관리 라이브러리는 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화 되지 않았기 때문에 개발자들이 직접 상태를 업데이트 해줬어야 함. => SWR과 React Query는 이러한 불편함을 해소하기 위해 등장 선언적으로 프로그래밍 가능 여러번 호출 된 동일한 API 요청은 한번만 실행 dirty해진 데이터는 적절한 시점에 알아서 업데이트 Global State 와 Server State의 관심사 분리 react-query가 swr을 앞지르고 있다. React query vs SWR React Query React Query는 리액트 에플리케이션에 서버 상태를 가져와서, 캐싱|동기화|업데이트를 쉽게 해준다 React Query .. 2022. 12. 30. 이전 1 다음
