다크모드

다크 모드를 next-themes를 이용해 구현한 것을 글로 작성하고자 한다.1. next-themes 설치하기npm install next-themes해당 모듈을 설치해주고, 이가 제대로 설치되었는지 확인해준다. package.json으로 들어가 설치되었는지 확인한다.해당 모듈은 Html 태그의 className을 "light"와 "dark"로 바꿔준다.2. 전역에 설정해주기1) pages/_app.js 수정 전function MyApp({ Component, pageProps }) { return }export default MyApp2) pages/_app.js 수정 후import { ThemeProvider } from 'next-themes'function MyApp({ Component, p..

1. 필요한 패키지 설치하기 npx create-react-app {app 이름} 새로운 react app을 생성하도록 한다. npm install --save styled-components npm install --save styled-reset npm install --save react-router-dom npm install react-icons styled-components : createGlobalStyle를 사용하기 위해 설치해준다. createGlobalStyle : 글로벌 스타일 적용을 도와주는 styled-components내장 메서드이다. styled-reset : styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.j..