Next.js입문 7일 차 @개인 과제 100%+다크모드

오늘은 다크모드를 구현해보고(비록 디자인은 각이 안 나왔지만) 챌린지반 기술면접 시험을 보았다. 

 

먼저 기술면접을 짚고 넘어가자면, 리액트 훅이나 useContext, zustand의 차이 같은 것들은 잘 대답할 수 있었지만, 풀라우트 캐시나 cjs, esm, 이벤트 루프에 대해서는 대답하기가 좀 힘들었다. 요즘 과제나 강의의 난이도가 점점 올라가다보니 예전에 깊이 공부하던 것과는 달리 따로 공부하지 않았던 것도 한 몫 했던 것 같다. 사실 지금 최적화나 배포 환경 테스트, 반응형 구현, 에러 핸들링 같은 것들을 하는 것도 힘들어서 공부할 시간을 더 낼 수 있을지 모르겠지만, 오늘 면접하면서 배우기도 했으니 열심히 해보아야겠다. 

 

 

다크모드 구현

다크모드/라이트모드 구현을 위해선 아래 3가지를 고려해야 한다.

1. 다크모드/라이트모드 css
2. 모드 상태값을 가진 쿠키
3. 쿠키 상태값에 따라 css변경

 

이 중 가장 신경 써야 했던 것은 2번으로 next.js에서는 기존 리액트 환경에서와 달리 use client 환경에서도 localstorage를 사용할 수가 없었고, use server환경에서 next/header의 cookies()를 불러와야했다. 

 

다른 것들은 tailwind css에 대한 이해가 필요했는데, tailwind에는

bg-white dark:bg-black

 

과 같이 dark모드와 일반 모드의 css를 다르게 설정할 수 있는 로직이 이미 존재한다. 하지만 이러한 기능은 기본적으로 브라우저의 다크모드 설정을 가져와서 자동으로 적용해서 사용할 수 있는 것이다. 

 

때문에 tailwind.config.ts 파일에서 아래와 같은 설정을 하여 내가 다크모드를 수동으로 조작할 수 있도록 했다. 

  darkMode: "selector",

 

라는 환경 설정을 통해 다크모드를 수동으로 설정할 수 있게 되고 

    if (cookie === "light") {
      document.documentElement.classList.remove("dark");
    } else {
      document.documentElement.classList.add("dark");
    }

라는 조작을 통해 쿠키에 저장된 상태값에 따라 dark모드를 조작할 수 있도록 했다. 

 

결과

다크모드

 

라이트 모드