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