끄적이는 개발노트

이전에 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: "불고기" }, { _..

Next.js 15에 Global state 관리에 대해 찾아보면 Context API, Redux, Recoil, Zustand, Jotai 등 굉장히 다양한 라이브러리가 많다. 본인은 업무에서 Recoil을 주로 사용했었고, 간단한 프로젝트에서는 Context API를 사용했었다. 그 중 최근 들어서 Next.js와 Zustand가 같이 많이 사용되고 추천한다는 글이 눈에 띄어서 한번 사용해보기로 했다. Zustand?작고 빠르며 확장 가능한 기본적인 상태 관리 툴hook 기반의 편리한 api명확한 Flux 패턴의 충분한 규칙 보유 우선, 공식문서를 살펴보면 Zustand는 정말 간단하게 스토어 생성 => 사용 의 두 단계로만 이루어져 굉장히 편리하다. 하지만, Next.js 환경에서는 Zustand..