📖 TIL - CSS 지옥에서 탈출하기: Next.js와 Tailwind로 스타일링 천국으로

🔄 자바스크립트 런타임 환경

자바스크립트가 실행될 수 있는 환경은 크게 두가지로 나눌 수 있다.

• 브라우저 환경: 웹페이지 내에서 자바스크립트를 실행
• Node.js 환경: 서버 측에서 자바스크립트를 실행

Next.js는 이 두 환경을 모두 활용하는 프레임워크로, 서버 컴포넌트와 클라이언트 컴포넌트를 구분하여 사용할 수 있게 해준다.

🖼️ Next.js Image 컴포넌트

Image 컴포넌트를 사용하는 이유가 뭘까?

Next.js에서 제공하는 Image 컴포넌트는 일반 HTML의
<img>태그보다 많은 최적화 기능을 제공하기 때문!

📏 height와 width 속성이 필요한 이유

Image컴포넌트를 사용하려면 height와 width값을 추가해줘야 정상적으로 사용할 수 있게 된다. 만약 해당 값이 없을 경우 에러가 발생하게 된다. 그렇다면 왜 height와 width값을 필수로 추가하도록 하였을까?

1. 이미지 최적화

Next.js는 이미지 크기를 알아야 적절한 크기로 최적화 할 수 있게 된다. 정확한 width와 height를 지정하면 Next.js의 이미지 최적화 엔진이 불필요하게 큰 이미지를 다운로드 하지 않고 필요한 크기에 맞게 이미지를 최적화 할 수 있다.

2. 레이아웃 쉬프트 방지(CLS)

이미지가 로드 되기 전에 브라우저가 이미지의 크기를 알고 있으면, 페이지 레이아웃에 필요한 공간을 미리 확보할 수 있다. 이렇게 하면 이미지가 로드될때 다른 콘텐츠가 밀려나는 레이아웃 쉬프트를 방지하여 UX를 향상시킬 수 있다. 이것은 Core Web Vitalsdml CLS(Cumulative Layout Shift) 지표를 개선하는데 중요한 요소이다.

🚀 추가적인 Image 컴포넌트의 장점

1. 지연로딩(Lazy Loading)

처음부터 모든 이미지들을 로드하지 않고, viewport(화면에 보이는 영역)에 가까워질때 이미지를 로드한다. 이는 초기 페이지 로드 시간과 대역폭 사용량을 줄여준다.

2. CDN 캐싱 메커니즘

Next.js Image컴포넌트는 CDN 캐싱 원리를 활용한다. 특히 Vercel에 배포할 경우, Vercel의 글로벌 엣지 네트워크가 자동으로 최적화된 이미지를 캐싱하고 배포한다. 첫 요청 시 데이터가 없으면 원본 소스에서 가져와 캐시에 저장하고 이후 요청 시에는 캐시에서 바로 가져올 수 있다.

💻 Image 컴포넌트 사용 예시

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/my-image.jpg"
      width={500}
      height={300}
      alt="이미지 설명"
      // priority 속성을 추가하면 즉시 로드(지연 로딩 비활성화)
      // priority
    />
  );
}

그럼 무조건적으로 Image 컴포넌트를 사용하는 것이 좋을까?

• Image 컴포넌트는 많은 이점이 있어 가능한 사용하는 것이 좋으나, 상황에 따라 적절히 사용하는 것도 중요하다.

🎨 Next.js와 Tailwind CSS의 관계

🌟 Next.js가 Tailwind CSS를 권장하는 이유

1. 유틸리티 우선(Utility-first) 접근 방식:

Tailwind CSS는 유틸리티 클래스를 사용해 HTML 내에서 직접 스타일을 적용할 수 있어 개발 속도를 크게 향상 시킨다. 별도의 CSS 파일을 작성하고 관리할 필요가 없어진다.

2. 성능 최적화:

프로덕션 빌드에서 사용하지 않는 스타일을 자동으로 제거하여 최종 CSS 파일 크기를 최소화 한다.

3. 일관된 디자인 시스템:

tailwind.config.js 파일을 통해 테마, 색상, 간격등을 중앙에서 관리할 수 있어 일관된 UI를 유지하기 쉽다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
        secondary: '#ffed4a',
        accent: '#f56565',
      }
    }
  }
}

4. 쉬운 통합

Next.js는 Tailwind CSS 설정을 위한 기본 템플릿을 제공하며, 새 프로젝트 생성 시 간단히 옵션을 선택하면 설정이 완료된다.

npx create-next-app --tailwind

5. 동일 회사의 지원

두 기술 모두 Vercel이라는 회사가 지원하고 있어 긴밀한 통합과 지속적인 호환성이 보장된다. Vercel은 Next.js를 만든 회사이며, Tailwind CSS의 개발도 적극 지원하고 있다.

📝 요약

• Next.js의 Image 컴포넌트는 이미지 최적화, 레이아웃 쉬프트 방지, 지연 로딩, CDN 캐싱 등의 기능을 제공하여 웹 성능을 크게 향상시킨다.
• Image 컴포넌트의 width와 height 속성은 이미지 최적화와 레이아웃 안정성을 위해 필수적이다.
• Next.js는 개발 속도, 성능 최적화, 일관된 디자인, 쉬운 통합 등의 이유로 Tailwind CSS를 권장한다.
• 두 기술 모두 Vercel의 지원을 받고 있어 지속적인 호환성이 보장된다.