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

emotion은 css-in-js (JavaScript코드에서 CSS를 작성하는 방식) 라이브러리 중 하나로 다음의 특징이있다.자동적으로 vendor-prefix 를 붙여준다.기본적으로 고유한 이름을 생성한다.JavaScript와 CSS사이에 상수와 함수를 쉽게 공유할 수 있다.React 스타일 컴포넌트로 사용할 수 있는 것CSS 로드 우선 순위 이슈를 해결할 수 있다javascript runtime에서 필요한 CSS를 동적으로 만들어 적용한다. 패키지 설치 npm install --save @emotion/react// styled 방식 사용할시npm install --save @emotion/styled// 스타일을 압축하고 끌어 올려 스타일을 최적화하고 // 소스 맵과 레이블을 사용하여 더 나은 개..