🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

tailwind dark mode

tailwind에서 다크 모드를 적용하는 방법은 크게 2가지가 있다. 각각 media와 class를 이용하는 방법이다.

media

따로 설정을 하지 않아도 기본적으로 적용되는 방법이다. 간단하게 dark:를 붙여주기만 하면 현재 내 환경의 시스템 설정에 따라서 다크 모드가 적용된다.

<div class="bg-white dark:bg-gray-800">Mode</div>

class

class를 이용하는 방법도 간단하다. 일단 tailwind.config.js에서 darkMode를 class로 설정해준다.

module.exports = {
  darkMode: 'class',
};

그리고 class를 이용해서 다크 모드를 적용하고 싶은 곳에 dark를 붙여주면 된다.

<div class="bg-white dark:bg-gray-800">Mode</div>

그런데 이 때, dark를 붙여주는 것만으로는 다크 모드가 적용되지 않는다. dark를 붙여주고 싶은 곳에 dark를 붙여주면 된다.

<div class="bg-white dark:bg-gray-800 dark">Mode</div>

이 때, 보통 특정 태그만 다크 모드가 되는 경우는 없기 떄문에 가장 최상단 태그인 html의 class에 dark를 붙여주면 된다.

<html class="dark"></html>

이 방법을 통해서 다크 모드를 toggle할 수 있는 버튼을 만들 수 있다.

Next.js 13 app 라우터 기본 페이지 구조 잡기

내가 마이그레이션 중인 프로젝트는 현재는 아주 간단한 페이지 구조를 갖고 있다. home, user, size, ingredient, result 정도의 페이지를 갖고 있는데, 이 때 user, ingredient, result는 아이스크림 조합을 결정 및 결과가 나오는 페이지로 하나의 폴더로 묶어서 관리하고 싶었다.(라우팅에 영향을 주면 안된다!) 그런 경우에는 폴더명을 ()로 감싸주면 된다. 아래는 간단한 라우팅 구조를 잡은 예시이다.

📦
├─ src
│  └─ app
│     ├─ (combination)
│     │  ├─ ingredient
│     │  │  └─ page.tsx
│     │  ├─ result
│     │  │  └─ page.tsx
│     │  └─ size
│     │     └─ page.tsx
│     ├─ favicon.ico
│     ├─ globals.css
│     ├─ layout.tsx
│     ├─ not-found.tsx
│     ├─ page.tsx
│     └─ user
│        └─ page.tsx

📝 회고

확실히 조금씩 배우면서 적용하다보니까 속도가 더딘 것 같다. 거기에 다른 프로젝트 리팩토링도 함께 진행하다보니… 참 내가 욕심이 많은건지… 그래도 조금씩 이렇게 병렬적으로 처리하는 게 재미있는 것 같다 ㅋㅋㅋ 당장 나아갈 때는 조금씩 가는 것 같지만 나중에 한번에 퐝 성장하는 기분이 들어서 그런 것 같다 :)

참고

tailwind dark mode
- media
- class
Next.js 13 app 라우터 기본 페이지 구조 잡기
참고