🚤 성장일지 7.0

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

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

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

tailwind theme with light, dark mode

보통 우리가 주어진 디자인을 토대로 개발하게 될 때는 정해진 색상, 크기, 폰트 등을 정해두고 시작한다.(더욱이 디자이너분께서 잘 정리된 디자인 시스템 형태로 작성해주시면 최고!) 즉, tailwind의 모든 값들을 사용할 필요가 없다는 것이다. 이럴 땐 theme를 이용해서 필요한 값들만 정의해두고 사용하면 된다.

import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    colors: {
      primary: {
        light: '#0FC5FF',
        dark: '#0FC5FF',
      },
      secondary: {
        light: '#8B54FF',
        dark: '#8B54FF',
      },
      white: {
        light: '#FFFFFF',
        dark: '#FFFFFF',
      },
      black: {
        light: '#000000',
        dark: '#000000',
      },
      gray_00: {
        light: '#FFFFFF',
        dark: '#292F3F',
      },
      gray_01: {
        light: '#F5F5F5',
        dark: '#3B4359',
      },
      gray_02: {
        light: '#EEEEEE',
        dark: '#32394B',
      },
      gray_03: {
        light: '#666666',
        dark: '#9096A9',
      },
      gray_04: {
        light: '#666666',
        dark: '#EEEEEE',
      },
      gray_05: {
        light: '#292F3F',
        dark: '#FFFFFF',
      },
      shadow: {
        light:
          '0px 0px 16px 0px rgba(218, 226, 231, 0.3), 0px 24px 24px 0px rgba(181, 190, 197, 0.3)',
        dark: '0px 0px 16px 0px rgba(0, 0, 0, 0.20), 0px 24px 24px 0px rgba(0, 0, 0, 0.20)',
      },
      card: {
        light: '#FFFFFF',
        dark: '#3B4359',
      },
    },
    fontSize: {
      x_small: '12px',
      small: '14px',
      medium: '16px',
      large: '18px',
      x_large: '24px',
      xx_large: '30px',
    },
    fontWeight: {
      normal: '400',
      semi_bold: '500',
      bold: '700',
    },
  },
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  plugins: [],
};

export default config;

단, 주의할 점은 위와 같이 theme을 설정하게 되면 기존의 tailwind 값들은 모두 무시된다는 것이다. 따라서 기존의 tailwind 값들을 사용하고 싶다면 extend를 이용해서 추가해주어야 한다.

import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    extend: {
      colors: {
        // ... 중략
      },
    },
  },
};

잘 정의된 theme 값들이 있다면 extend를 사용하는 건 오히려 불편해지는 것 같다. 자칫하면 우리 서비스에서 사용하지 않는 값들을 쓸 수도 있고 오히려 디자인이 추가될 때, config로 돌아가서 추가해주는 게 더 나을 것 같다!

Next Image

Next.js에서 이미지를 사용할 때는 next/image를 사용하면 된다. 아래와 같이 사용하면 된다.

import Image from 'next/image';

export default function Logo() {
  return (
    <section className="flex justify-between gap-[6px]">
      <Image
        src="/images/logo/character.png"
        alt="베스트라빈스 로고 캐릭터"
        width={36}
        height={36}
      />
      <Image
        src="/images/logo/title.png"
        alt="베스트라빈스 로고 타이틀"
        width={120}
        height={20}
        className="h-[20px]"
      />
    </section>
  );
}

이 때, next/image는 기본적으로 여러가지 이미지 최적화를 지원하는데, svg에 대해서는 지원하지 않는다. 그 이유는 아래와 같다.

The default loader does not optimize SVG images for a few reasons. First, SVG is a vector format meaning it can be resized losslessly. Second, SVG has many of the same features as HTML/CSS, which can lead to vulnerabilities without a proper Content Security Policy.

기본 로더는 몇 가지 이유로 SVG 이미지를 최적화하지 않습니다. 첫째, SVG는 벡터 형식이므로 손실 없이 크기를 조정할 수 있습니다. 둘째, SVG에는 HTML/CSS와 동일한 기능이 많기 때문에 적절한 콘텐츠 보안 정책이 없으면 취약점이 발생할 수 있습니다.

📝 회고

확실히 초반에는 더뎠지만 하다보니까 점차 속도가 붙는 것 같다. next.js의 공식문서가 정말 정리가 잘되어있는 덕분이다. react 공식문서보다도 훨씬 더 잘 정리가 되어있는 것 같다 허허… 쉽지 않지만 이왕 마이그레이션하기로 한 거 계속 꾸준히 해봐야겠다..! 그러면서 리액트 자체에 대한 깊이 있는 이해도도 높이도록 하자!

참고

tailwind theme with light, dark mode
Next Image
참고