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