[241202] TIL

오늘 한 것

캐럿마켓 강의 #10.0~ #10.5 수강

• 자세한 강의 내용 - 노션 정리

nextJS 에서 제공하는 이미지 컴포넌트

• 기본 jsx img가 지원하지않는 여러가지 강력한기능을 지원함

• 로딩 전후로 컴포넌트 위치가 밀리는 content shift 를 방지함.

• 압축률이나, 화면 크기별 압축옵션을 제공함

• 필수 prop으로 src, width, height, alt를 입력해주어야함.

• width, height를 모른다면, fill을 제공해주면됨

• fill은 이미지를 자동으로 부모컴포넌트의 크기로 맞춰줌

Image Hostnames

• NextJS Image는 이미지를 자동으로 최적화를 해주어 성능을 향상 시키고 빠른 로딩이 되도록 해줌
• 하지만 외부 호스트의 이미지를 불러올 때는 보안 상의 이유로 이 기능이 허용 되지 않음
• 아래와 같이 next.config.mjs 에서 hostname 들을 등록해주어야한다.
• vercel, cloudflare, 자체 서버를 사용한다해도 이미지 최적화를 서버가 작동해야한다.
• 나중에 우리는 cloudeflare도 추가해볼거임
• aws 에 업로드 하는 경우에는, AWS hostname 도 입력

// next.config.mjs

const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "avatars.githubusercontent.com",
      },
    ],
  },
};

export default nextConfig;

기타

• 말해보카
• 요가