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

Emotion으로 다크모드 적용해보았다. theme 색상적용먼저 styles 폴더 하위에 theme 전용 파일인 Theme.ts를 만들고 라이트 / 다크 모드에 대한 색상 값을 지정해줬다.// styles/Theme.tsimport { Theme } from "@emotion/react";interface VariantType { [key: string]: string;}export const colors: VariantType = { white: "#fff",};export const lightTheme: Theme = { mode: { text: "#202020", background: "#F5F7FC", backgroundMain: colors.white, borderCo..

포스트 글이 길거나 블로그, 프로젝트 갯 수가 많아지면 스크롤이 발생해 상단 이동 버튼을 배치하는게 좋을 것 같아 추가해보았다. 상단 이동 버튼window.scrollTo(xpos, ypos, behavior:'auto'}) ****를 사용하면 원하는 위치로 이동 시킬 수 있다.behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.)auto는 기본 값이며, 바로 위치로 이동한다. instant도 같은 동작을 한다.smooth는 부드럽게 이동하는 애니메이션 효과를 보여준다.⇒ 부드럽게 상단 위치하기 위해서 클릭 시 window.scrollTo({ top: 0, behavior: "smooth" }); 실행되게 했다.import { useEffect, use..

React개발 시 기본적으로 Node.js 위에서 개발을 하며 package.json 파일에 기본 설정을 하게 된다.개발을 진행하다 보면, 개발 환경과 배포 환경을 다르게 해야 하는 경우가 생긴다.개발환경과 배포환경 설정은 환경변수 선언(.env)를 통해 한다..env의 종류에는 .env.local, .env.development, .env.test, .env.production 이 있다.  React.js CRA(Create-React-App)  사용하여 프로젝트를 시작한다.기본적으로 node.js는 production(배포), development(개발), test(테스트)로 구분하여 사용한다.그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다.# prod..

영역에 비해 글자 수가 넘치면 ( "..." ) 로 말줄임표를 사용하는 경우가 있다. javascript로 일정글자 수 이상일 때 slice 함수를 활용 할 수도 있지만 css로도 제어 말줄임표를 줄 수 있다. 아래 코드와 이미지는 글자들이 width값에 맞춰 자동으로 줄바꿈이 이뤄지고 있는 상태이다. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition, inje..

Notion Api notion API를 사용하던 중 이미지를 가지고 올 때 크기 값을 보내주지 않는 것을 알고 이미지 크기를 유동적으로 가져오고 싶어서 원본 이미지 크기 값을 가져오는 방법에 대해 알아보았다.개발자 도구에서 img 태그에 있는 srcset에 있는 이미지 주소에 마우스를 올리면 아래와 같은 이미지가 나온다 rendered size : 렌더링 되는 이미지 크기intrinsic (본질적인) size : 불러오는 이미지의 원본 크기여기서 naturalWidth, naturalHeight 활용하면 이미지의 원본 크기를 알아 낼 수 있다.   기본 html 태그 폭은 100, 높이는 200 인 A.jpg 라는 이미지가 있을 경우 width, height 값이 있으면 해당 크기로 naturalWi..

useState의 상태 값이 css에 적용 해야 될 때가 있다.문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.이러한 경우 **style(인라인 스타일)**을 이용해야 한다.한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다. style(인라인 스타일) export default function Item() { const [imageSize, setImageSize] = useState({ width: 100, height: 100 }); const containerStyle = { height: imageSize.height width: imageSize.wi..

일반적으로 모달 닫기 버튼 외에 모달 영역 밖을 클릭 시 닫을 수 있어야 된다.  모달 열고 닫기 기본형useState를 활용해 클릭하는 버튼을 이전 값에 반대되는 값이 들어오게 해서 true면 모달 창이 보이고 false면 닫히게 만들었다.export default function Modal() { const [modal, setModal] = useState(false); return ( setModal((prev) => !prev)}> 버튼 {modal && ( 모달 )} );}  모달 영역 외 클릭시 모달 닫기 useRef를 사용하여 modalBtnRef와 modalRef를 생성하여 modalBtnRef**(모달..