끄적이는 개발노트

이전에 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..