Per ardua ad astra.

Console Error Attempting to parse an unsupported color function "lab" 문제 해결 방법 (html2canvas)들어가며Next.js와 TailwindCSS를 이용하여 개발할 때, @html2canvas@ 라이브러리를 이용하여 웹피이지를 이미지 파일로 저장하는 기능을 구현하려고 할 때, 다음과 같이 @lab()@ 관련 오류가 발생할 수 있다.Console Error Attempting to parse an unsupported color function "lab" Call Stack 10 Show 10 ignore-listed frame(s)이때 이 문제를 해결하는 방법을 간단하게 정리해본다. 해결 방법이 문제는 TailwindCSS / PostCSS..

Zustand들어가며전역 상태 라이브러리 중 하나인 Zustand에 대해 간단하게 정리해본다. Zustand개념독일어로 상태(Status)라는 뜻리액트 앱에서 전역 상태 관리를 해주는 아주 가볍고 단순한 라이브러리Redux의 복잡한 구조(Action, Reducer, Dispatch)를 사용하지 않고, Hooks 기반의 간단한 API 제공"minimal, fast, scalable"을 목표로 만들어졌다. 비교Redux와 비교Redux는 boilerplate한 코드가 많다.@action@, @reducer@, @slice@를 작성해야 한다.// Redux Toolkitconst slice = createSlice({ name: "counter", initialState: { count: 0 }, re..

Three.js들어가며웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있게 해주는 라이브러리인 Three.js에 대해 간단하게 정리해본다. Three.js개념웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리웹에서 3D 콘텐츠를 보여주기 위해 거의 필수로 사용되는 도구 Three.js – JavaScript 3D Library threejs.org 핵심 개념① Scene (장면)모든 3D 객체가 배치되는 무대 공간나무, 빛, 카메라 등 모든 객체는 이 @scene@에 추가되어야 화면에 렌더링된다.여러 객체를 그룹화하거나 배경색, 안개 효과 등을 설정할 수 있다.const scene = new THREE.Scene();// 배경색을 검정색으로 설정scene.backg..

Nodemailer 라이브러리들어가며Node.js 환경에서 메일을 간단하게 보낼 수 있도록 도와주는 Nodemailer 라이브러리에 대해 정리해본다. Nodemailer 라이브러리개념Node.js 환경에서 이메일을 쉽게 보낼 수 있도록 도와주는 라이브러리간단한 설정으로 SMTP, OAuth2 등을 활용한 이메일 전송을 할 수 있다.텍스트와 HTML 형식의 이메일, 첨부 파일 전송 등 다양한 기능을 제공한다.무료로 사용 가능하다.오픈 소스로 관리되고 있다. 주요 특징SMTP, OAuth2, AWS SES, SendGrid 등 다양한 이메일 서비스 지원이메일 본문을 일반 텍스트 또는 HTML 형식으로 작성 가능이미지, 문서 등 파일 첨부 가능기본 인증 외에도 OAuth2를 지원하여 보안성 강화이모티콘이나 다..

React Hook Form 라이브러리들어가며리액트(React.js) 애플리케이션에서 폼(Form)의 상태 관리를 쉽게 해주는 라이브러리인 React Hook Form에 대해 정리해본다. React Hook Form개념리액트 애플리케이션에서 폼(Form)의 상태를 관리해주는 라이브러리간단하고 효율적이며 퍼포먼스가 뛰어나다.리액트의 훅(Hook)을 활용하여 사용하며, 폼 상태 관리를 위한 기본적인 기능과 유효성 검증(Validation) 기능을 제공한다. React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-..

Moment.js 라이브러리들어가며자바스크립트(JavaScript)에서 날짜와 시간을 처리하기 위해 많이 사용되는 Moment.js 라이브러리에 대해 정리해본다. moment.js개념자바스크립트에서 날짜와 시간을 처리하기 위해 사용되는 인기 있는 라이브러리날짜 및 시간 계산, 형식화, 파싱, 시간대 변환, 상대적인 시간 표현 등을 쉽게 처리할 수 있도록 도와준다.자바스크립트의 기본 @Date@ 객체와 비교하여 훨씬 더 직관적이고 강력한 기능을 제공한다.2020년부터 Moment.js는 유지보수 전용 모드로 전환되었고, 새로운 프로젝트에서는 Day.js나 Luxon, Date-fns과 같은 다른 라이브러리를 대신 사용하도록 권장되고 있다. (하지만 여전히 많은 프로젝트에서 사용되고 있다.)Day.jsMom..

React Share 라이브러리들어가며React Share 라이브러리에 대해 정리해본다. React Share개념리액트 애플리케이션에서 다양한 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 해주는 라이브러리여러 소셜 미디어 플랫폼에 링크를 공유할 수 있는 버튼을 제공하며, 간단한 설정을 통해 버튼을 커스터마이징할 수 있다. 주요 특징간단하게 설치할 수 있다.필요한 소셜 미디어 공유 버튼을 컴포넌트로 불러와 사용할 수 있다.버튼의 크기, 모양, 스타일을 쉽게 커스터마이징할 수 있으며, SVG 아이콘을 사용하여 스타일을 자유롭게 변경할 수 있다.다양한 소셜 미디어 플랫폼을 지원한다.Facebook, X(Twitter), LinkedIn, Pinterest, Telegram, WhatsApp, Line, R..

Faker.js 라이브러리들어가며Faker.js 라이브러리에 대해 정리해본다. Faker.js개념다양한 유형의 가짜 데이터를 쉽게 생성할 수 있도록 도와주는 자바스크립트 라이브러리애플리케이션 개발, 테스트, 데모용 데이터를 빠르게 생성할 때 유용하다.이름, 주소, 전화번호, 이메일, 날짜, 이미지 URL 등을 무작위로 생성할 수 있다.관리 문제로 2021년에 개발이 중단되었고, 이후 커뮤니티에서 @＠faker-js/faker@라는 이름으로 포크(Fork)하여 유지보수하고 있다.기존의 @faker.js@는 더 이상 유지보수되지 않는다.자세한 내용은 이 글을 참고한다. 따라서 커뮤니티에 의해 관리되고 있는 @＠faker-js/faker@를 사용한다.Faker로 생성한 데이터는 무작위이며 실제 데이터가 아니므..

Zod 라이브러리들어가며타입스크립트(TypeScript)에서 유효성 검사를 쉽게 해주는 Zod 라이브러리에 대해 정리해본다. Zod 라이브러리개념타입스크립트(TypeScript)에서 유효성 검사를 쉽게 해주는 스키마 선언 및 데이터 검증 라이브러리타입 안전성을 유지하면서 데이터의 유효성을 검사할 수 있도록 설계되어 있다.데이터 검증을 더욱 명확하고 직관적으로 수행할 수 있도록 도와준다. 설치$ npm install zod # yarn add zod 기본 사용법다음과 같이 간단한 문자열(String) 스키마를 만들 수 있다.import { z } from "zod";// creating a schema for stringsconst mySchema = z.string();// parsingmySchem..

daisyUI들어가며테일윈드 CSS의 확장 UI 라이브러리인 dasiyUI에 대해 정리해본다. daisyUI개념테일윈드 CSS를 확장한 UI 라이브러리다양한 기본 스타일을 제공하여 빠르게 UI를 구성할 수 있도록 도와준다.테일윈드 CSS의 유틸리티 클래스와 함께 사용된다.버튼, 카드, 모달, 알림, 폼 요소 등 여러 가지 컴포넌트 스타일을 미리 정의해 둔 상태로 제공한다.daisyUI를 이용하면 UI를 쉽게 커스터마이징하고, 일관성 있는 디자인을 유지하면서 빠르게 개발할 수 있다. 특징테일윈드 CSS와 완벽하게 호환되며, 추가적인 스타일링 없이 유틸리티 클래스를 사용할 수 있다.일관된 디자인 시스템을 기반으로 하기 때문에, 프로젝트 전반에 걸쳐 일관된 UI를 유지할 수 있다.버튼, 알림, 모달, 카드 등..

전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor)들어가며Axios의 전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor) 개념에 대해 정리해본다. 전역 인스턴스(Global Instance)개념Axios의 기본 인스턴스를 설정하여 애플리케이션 전체에서 사용할 수 있도록 하는 방법모든 Axios 요청에 기본적인 설정(예: @baseURL@, @headers@ 등)을 적용할 수 있다. 설정 방법프로젝트의 @src@ 폴더 안에 @axios@ 폴더를 만들고, @global.js@ 파일을 생성한다.그리고 다음과 같이 코드를 작성한다.import axios from 'axios';// In latest axios version common proper..

react-toastify 라이브러리들어가며간단하게 토스트(Toast) 메시지를 띄워야할 때 @react-toastify@ 라이브러리를 사용할 수 있다.@react-toastify@ 라이브러리의 사용법을 간단하게 정리해본다. react-toastify 라이브러리개념리액트 애플리케이션에서 사용자에게 알림을 제공하는 토스트 메시지(Notification)를 쉽게 구현할 수 있게 해주는 라이브러리이 라이브러리를 사용하여 다양한 스타일과 애니메이션 효과로 간단하게 알림을 띄울 수 있다.기본적으로 설정이 간편하며, 다양한 사용자 정의 옵션을 제공하여 알림을 원하는 대로 커스터마이징할 수 있다. 라이브러리 설치$ npm install react-toastify # yarn add react-toastify 사..

uuid, nanoid 라이브러리 사용하기 (key)들어가며다음과 같이 @map@을 이용하여 요소를 하나하나씩 표현할 경우 @key@ 값을 지정해야 하는데 어떤값을 @key@ 값으로 지정해야할 지 모를 경우가 많다.이때, @uuid@ 또는 @nanoid@ 라이브러리를 이용하면 이 고민을 해결할 수 있다.import { data } from './data.js';export default const App = () => { return ( {data.map((item) => {item.content}} )}  uuid 라이브러리개념@uuid@는 Universally Unique Identifier 의 약자로, 전 세계에서 고유한 값을 생성할 수 있는 식별자이다.@u..

Framer Motion 라이브러리들어가며Framer Motion 라이브러리에 대해 정리해본다. Framer Motion개념인터랙티브 웹 애니메이션과 UI 디자인을 쉽게 구현할 수 있도록 도와주는 라이브러리리액트 프레임워크와 함께 사용되며, 프론트엔드 개발자가 애니메이션을 더 직관적이고 효율적으로 만들 수 있게 도와준다.강력한 API를 제공하여 복잡한 애니메이션을 쉽게 작성할 수 있게 해주며, 코드 기반의 애니메이션을 만들 때 생산성을 높여준다. 설치$ npm install framer-motion # yarn add framer-motion 주요 기능기본적인 모션을 쉽게 적용할 수 있다.위치, 크기, 불투명도 등의 속성을 애니메이션화할 수 있다.드래그와 같은 인터랙션을 손쉽게 구현할 수 있다.예를..