next/image 에서 제공하는 property인 placeholder=’blur’와 blurDataURL={ … } 을 사용한다면, 빈 화면이 뜨는 동안 블러처리 된 이미지가 화면에 보이게 이미지가 렌더링 될 때까지 효율적으로 제어할 수 있습니다. ux적으로도 사용자에게 이미지가 로딩 중임을 알려주고, 원본 이미지를 추측할 수 있도록 도와준다.  정적으로 이미지를 불러오는 상황 // placeholder='blur' 만 추가해도 자동으로 채워준다import Image from 'next/image' export default function Page() { return ( )} 동적으로 이미지를 불러오는 상황blurDataURL 를 추가적으로 더하면 되는데 blurImg 는 base64로 ..

svg 파일에 들어가면 이미지가 svg 태그랑 path 태그로 이루어져 있다.svg 에서 변경 방법svg에 직접 색상을 바꾸고 싶으면 path태그에 style="fill: 색상 값;" 또는 fill="색상 값” 이렇게 넣어주면 된다.  style   fill   css 에서 변경 방법css 로 색상을 바꾸고 싶으면 filter로 값을 주면 된다.아래 링크를 통해 쉽게 원하는 색상에 대한 값을 구 할 수 있다. CSS filter generator to convert from black to target hex colorAdded License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Perm..

React에서 빠르게 아이콘을 사용할 수 있는 react-icons에 대해 알아보고자 한다. react-icons 주소 React Icons react-icons.github.io react-icons 설치한다.yarn add react-icons# ornpm install react-icons --save 해당 사이트에 들어가면 좌측에는 아이콘을 검색할 수 있는 검색 창과 아이콘의 종류들이 있습니다.사용하고 싶은 아이콘을 클릭하면 해당 아이콘의 이름이 복사 됩니다. 그리고 아이콘 종류마다 어떻게 import하면 되는지 설명이 있습니다. ex) import { IconName } from "react-icons/hi";  보통 아이콘의 첫 번째 단어 ex) HiArrowSmLeft (Heroicons 왼..