끄적이는 개발노트

기존에 react-query를 사용할 때 본인은 대부분 CSR 형태로 사용하고 있었다. 이렇게해도 사용하는데 문제는 없었지만 react-query를 사용해서 데이터를 불러오는 페이지는 Next.js의 SSR을 사실상 활용하지 못하고 있었다는 뜻이 된다. 그래서 이번에 Next.js 15 버전에 맞게 SSR에서 preFetch를 적용하는 방법을 정리한다. 1. 설치npm install @tanstack/react-query#oryarn add @tanstack/react-query 2. provider 생성// src/lib/providers/react-query-provider.tsx"use client";import { QueryClient, QueryClientProvider } from "@ta..

이전에 Context API로 theme state를 설정하고 다크모드를 적용한 적이 있다. 그렇게해도 문제는 없지만 Next 라이브러리로 next-themes라는 더 간단하고 편리한 라이브러리가 있다.다만, TailwindCSS의 버전이 4 이후로 tailwind.config.ts 파일이 사라지고 globals.css로 대체되면서 기존 방법이 잘 안되는 면이 있어 개인적으로 찾은 방법을 정리해둔다. https://www.npmjs.com/package/next-themes next-themesAn abstraction for themes in your React app.. Latest version: 0.4.6, last published: 3 months ago. Start using next-the..

Next.js에서 절대경로 설정 및 별칭을 통한 경로를 설정하려면 tsconfig.json을 설정하면 가능하다.React Native에서 설정한 것과 마찬가지이기 때문에 간단하게 정리해둔다. 1. tsconfig.json{ ..., "compilerOptions" : { ..., // 절대 경로 설정 "baseUrl": ".", // 별칭 설정(원하는대로 지정) "paths": { "~/*": ["./*"], "@/*": ["./src/*"], "assets/*": ["./public/assets/*"] } }, ...} 2. 사용설정하면 아래와 같이 간단하게 import가 가능하다.// app/svg/page.tsx"use cl..

Next.js에 svg를 적용하기 위해서 본인이 선호하는 방법은 svg를 컴포넌트로 만들어 적용하는 방식이다.이유는 props를 통해 간단하게 fill, stroke를 수정할 수 있기 때문이다. 이를 위해 svgr이 필요하다. svgr?SVG 파일을 react 나 next.js에서 쉽게 다루기 위한 webpack 설정 / babel 설정SVG 파일을 컴포넌트화 가능 1. 설치npm i -D @svgr/webpack#oryarn add -D @svgr/webpack 2. next.config.js 설정webpack 설정을 추가하면 코드를 build할 때, svg 파일을 자동으로 react component로 만들어준다.// next.config.jsimport type { NextConfig } fro..

form을 만들다보면 textarea가 필요한 경우가 있다. textarea를 사용하면 긴 텍스트를 받을 수 있지만 이는 말 그대로 기본적인 텍스트에서 길이가 늘어난 느낌으로 가벼운 댓글과 같은 기능을 구현할 때 사용하면 좋다. 이렇게 긴 텍스트에 더해서 게시글과 같이 폰트 변경, 굵기 등과 같은 다양한 기능이 추가된 텍스트 편집기를 사용하기 위해서는 별도의 라이브러리나 프레임워크를 사용해야 하는데 본인은 Tiptap을 사용했다. https://tiptap.dev/docs Tiptap DocsTiptap provides a framework to create custom content editors. Explore countless extensible features and handy cloud serv..

프로젝트를 진행하던 중, 검색 가능한 input을 만들 일이 생겼다. 기존의 input은 타이핑을 통해서만 내용을 채우지만 원하는 input의 형식은 '타이핑을 통한 input 채우기 + input 값 검색하여 리스트 제공 및 선택' 이었다.이 기능을 위해 라이브러리를 찾아보고 쓸까 고민도 했지만 리스트 데이터에 존재하는 값만 받을지 안받을지에 대한 고민이 남아있어서 직접 만들기로 했다. 1. 테스트용 데이터 생성아래는 설명을 위해 만든 테스트용 데이터로 실제 데이터는 api를 통해 가져온 데이터가 되야 한다. const TestData = [ { _id: "1", name: "김치찌개" }, { _id: "2", name: "된장찌개" }, { _id: "3", name: "불고기" }, { _..