인프런 커뮤니티 질문&답변

안녕하세요 마누송지혁님

해당 내용은 아래의 라마너스님께서 말씀해주셨듯이 오류가 아닌 경고 및 권고 사항정도로 지금 단계에서는 무시하셔도 괜찮습니다. 해당 경고 메세지는 말씀하신대로 <img> 대신 next/Image를 사용하라는 의미인데요 이에 대해서는 이후 챕터에서 자세히 살펴보고 있으니 쭉 수강하시면 되겠습니다.

해당 내용 warning이라서 기다리면 빌드가 되지 않으시던가요?

./src/components/book-item.tsx
9:9  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
9:9  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text

./src/pages/book/[id].tsx
31:9  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
31:9  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text

./src/pages/search/index.tsx
21:6  Warning: React Hook useEffect has a missing dependency: 'fetchSearchResults'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data    
   Generating static pages (0/9)  [    ]index page
 ✓ Generating static pages (9/9)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

옵션은 여기서 확인하시면 될거같아요.

https://nextjs.org/docs/app/api-reference/config/next-config-js/eslint

안녕하세요, 인프런 AI 인턴입니다. 마누송지혁님!

Next.js에서 img 태그를 사용하는 대신 next/image 모듈의 Image 컴포넌트를 사용하는 이유와 관련하여 몇 가지 정보를 드리겠습니다.

1. img 태그와 next/image의 차이

• img 태그는 브라우저 기본 HTML 요소로, 단순히 이미지를 표시할 때 사용합니다.
  
• next/image의 Image 컴포넌트는 Next.js에서 제공하는 이미지 최적화 도구로, 다양한 이점을 제공합니다:
  
  • 자동 최적화: 브라우저가 요청한 크기에 맞는 이미지를 자동으로 생성합니다.
    
  • 레이지 로딩(Lazy Loading): 사용자가 볼 필요가 없을 때 로드하지 않고, 스크린에 나타날 때 로드하여 성능을 개선합니다.
    
  • 반응형 이미지: 다양한 디바이스와 화면 크기에 최적화된 이미지를 제공합니다.
    

2. 이미지가 제대로 나오지 않는 이슈

• next/image를 사용할 때 경로 설정이 잘못될 경우 이미지가 나타나지 않을 수 있습니다.
  
• src 속성의 경로가 올바른지, 그리고 width와 height 속성이 지정되어 있는지를 확인해보세요.
  
• 외부 URL을 사용할 경우 next.config.js 파일의 domains 속성에 허용할 도메인을 추가해야 합니다.
  

3. ESLint 규정 무시

ESLint 규정을 완화하거나 특정 규칙을 무시하고 싶으면 다음과 같은 방법을 사용할 수 있습니다:
- 프로젝트의 .eslintrc 파일에서 특정 규칙을 비활성화할 수 있습니다.
- 코멘트를 통해 파일 내 특정 부분만 무시하도록 설정할 수 있습니다:

  // eslint-disable-next-line no-unused-vars
  const unusedVariable = "This won't trigger ESLint error";

위 문제에 대해 유사한 질문과 답변은 다음 링크를 참고하시기 바랍니다:
- “Next.js에서 Image 컴포넌트의 사용과 최적화 방법”
- “ESLint 규칙 무시하기 및 설정 관리”

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.