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..

개발 환경 구축 (React.js)들어가며리액트(React.js) 개발 환경 구축을 위해서 필요한 과정들을 정리해본다. Node.jsLTS 버전으로 설치하기Long Term Service, 장기 지원 버전 Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 버전 관리가 필요할 경우 NVM(Node Version Manager)를 설치한다. Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreyb..

React.memo()들어가며리액트(React.js)에서 제공하는 고차 함수(Higher-Order Component)인 @React.memo()@에 대해 정리해본다. React.memo()개념리액트에서 제공하는 고차 함수(Higher-Order Component)함수형 컴포넌트의 불필요한 재렌더링을 방지하는 역할을 한다.전달된 @props@가 변경되지 않는 한 해당 컴포넌트는 다시 렌더링되지 않도록 최적화(Optimization)할 수 있다.@React.memo()@는 함수형 컴포넌트를 인자로 받아, 그와 동일한 동작을 하는 새로운 컴포넌트를 반환하지만, 추가적으로 @props@가 변경되었는지 확인하는 최적화 작업이 추가된다.@props@가 변경되지 않은 경우, 메모이제이션된 컴포넌트는 이전 렌더링에서..

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..