끄적이는 개발노트

이번 포스트에서는 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, 클라이언트 데이터, ..

기존의 React.js에도 상태를 관리하는 Redux 가 있고, store가 존재한다. 일반적으로 React.js에는 하나의 Redux store만 존재하기 때문에 Redux를 만드는데 별다른 어려움이 없다. 하지만, Next.js에서 Redux를 사용하게 되면 사용자가 request를 보낼 때마다 Redux store가 생성되기 때문에 여러 개의 Redux store가 생성된다. 또한, Next.js에서 제공하는 getInitialProps, getServerSideProps 등에서 Redux store에 접근할 수 있어야 하기 때문에 복잡하다. 이를 간편하게 해결해주는 라이브러리가 바로 next-redux-wrapper 이다. 이번 포스트에서는 카운터 state를 통해 사용법을 알아본다. 1. 프로젝..

이번 포스트에서는 환경변수에 대해 알아본다. 기본적으로 .env.local 파일을 통해 환경 변수를 설정할 수 있다. 그 안에서, 서버와 브라우저에서의 사용법에 차이가 있다. 서버 // .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword 사용할 때, process.env 를 통해 사용한다. // pages/index.js export async function getStaticProps() { const db = await myDB.connect({ host: process.env.DB_HOST, username: process.env.DB_USER, password: process.env.DB_PASS, }) // ... } 브라우저 Next..