끄적이는 개발노트

이번 포스트에서는 Next.js에서 useRouter()에 대해 알아본다. useRouter 중에서도 직접 사용해 본 기능들 위주로 간단하게 설명해보려 한다. 1. 기본 사용법 import { useRouter } from 'next/router' const Home: NextPage = () => { const router = useRouter(); return ( router.push('/test')}> 버튼 ) } export default Home; 이렇게 하면 pages/test.tsx 페이지로 이동하게 된다. 2. Dynamic Routing import { useRouter } from 'next/router' const Home:NextPage = () => { const router = ..

이번 포스트에서는 텍스트를 복사하는 방법을 알아본다. hook을 이용하면 간편하게 가능하다. import { NextPage } from "next"; import { useCopyToClipboard } from "react-use"; const Test: NextPage = () => { const [copy, setCopy] = useCopyToClipboard(); const onCopyHandler = () => { setCopy("hi"); }; console.log("text", copy.value); return ( 복사 ) }; export default Test; useCopyToClipboard 를 활용하면 원하는 문자를 state에 손쉽게 복사할 수 있다. 해당 state는 json..

이번 포스트에서는 Next.js에서 middleware를 적용하는 방법을 알아본다. 1. 기본 사용 next.js 프로젝트의 root에 middleware.ts 파일을 생성한다. // middleware.ts import { NextRequest, NextResponse } from "next/server"; export const middleware = async (request: NextRequest) => { console.log("middleware 입니다") }; 2. matcher 특정 경로에서만 실행되게끔 필터링해주는 옵션이다. export const config = { matcher: '/test/:path*' } 배열을 통해 단일 경로 또는 여러 경로를 필터링 가능하다. export co..

이번 포스트에서는 react-query에서 useMutation에 대해 알아본다. useMutation은 post, patch를 하기 위한 방법으로 본인은 미리 선언을 하고 원하는 trigger에서 작동하는 방식으로 사용을 했다. 1. 기본 사용 import { useMutation } from "@tanstack/react-query"; const test = useMutation(testApi); const btnHandler = async () => { await test.mutateAsync(bodyData, { onSuccess: (data) => console.log(data), onError: (e) => console.error(e) }) } 위와 같은 방식이 내가 실제 플랫폼 개발에 사용..

이번 포스트에서는 react-query에서 데이터를 get 하기 위한 방식인 useQuery에 대해 알아본다. 1. 기본 사용 import { useQuery, } from "@tanstack/react-query"; const test = useQuery(["test"], testApi, { enabled: true, retry: 0, refetchOnWindowFocus: false, onSuccess: (data) => console.log(data), onError: (e) => console.error(e) } ); // ex.1) () => testApi(params) // ex.2) enabled: 변수명 // ex.3) test.refetch() 위와 같은 방식이 가장 일반적인 useQue..

이번 포스트에서는 데이터를 가져오고 캐싱할 수 있는 react-query라는 개념에 대해 알아본다. 1. 사용 이유 본인의 경우, 플랫폼 초기 개발 과정에서는 state를 전역 state와 클라이언트 state만을 구분해서 사용했다. 개발 초기에는 문제가 없이 진행이 가능했지만, 점점 다양한 페이지와 기능들이 요구되면서 api를 추가하다보니 데이터를 관리하는 state가 클라이언트 데이터와 서버 데이터가 공존하는 상태가 발생했다. 이러다보니 state 초기값 세팅, 클라이언트 event에 따른 state 변경, api 통신 후 state 변경 등과 같이 여러 상황이 충돌하는 상황이 발생했다. 이를 해결하기 위해 대체 방안 혹은 기술을 찾다보니 state는 주로 세가지(전역state, 클라이언트 데이터, ..