끄적이는 개발노트

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

백엔드 API 개발 시에 개발한 API 정보를 시각적으로 표현하고 공유하기 위해 API 문서를 만든다. 그 중 Swagger라는 툴을 통해 만들 수 있는데 NestJS에도 적용이 가능하다. 이를 통해 특정 페이지를 통해서 API의 엔드포인트, 스키마, DTO 등에 대한 정보를 시각적으로 편리하게 알아볼 수 있다. 업무 시에도 백엔드 담당 개발자 분이 Swagger를 사용해 API를 공유해서 편리하게 API를 연동한 경험이 있고, 본인 역시 업무에서 서브로 백엔드를 담당해 일부 개발할 때 문서에 맞게 Swagger를 작성한 경험이 있다. 그렇기 때문에 개인 프로젝트를 진행할 때도 Swagger를 적용하고 있다. https://swagger.io/ API Documentation & Design Tools ..