알토르 React ERROR - troubleshooting

React portfolio error

warn-once.js:16 Image with src "/_next/static/media/avatar.6a.png" 
has either width or height modified, 
but not the other. 

If you use CSS to change the size of your image, 
also include the styles 'width: "auto"' or 'height: "auto"' 
to maintain the aspect ratio. 

warnOnce @ warn-once.js:16Understand this warning warn-once.js:16 
Image with src "/_next/static/media/avatar.6ab47681.png" was detected 
as the Largest Contentful Paint (LCP). 
Please add the "priority" property 
if this image is above the fold.

1️⃣ Aspect Ratio 관련 경고

Image with src "/_next/static/media/avatar.6ab.png" 
has either width or height modified, but not the other...

의미: 이미지의 width 또는 height 중 하나만 CSS로 변경했을 때, 다른 쪽은 고정되어 있어 비율이 깨질 수 있음.

예시:

<Image
  src="/avatar.png"
  width={100}   // 고정
  style={{ height: 150 }} // 비율 깨짐
/>

해결 방법:

• 한쪽만 고정하고 다른 쪽은 auto로 둬서 비율 유지

<Image
  src="/avatar.png"
  width={100}
  style={{ height: "auto" }} // width 기준 비율 유지
/>

또는 CSS에서 둘 다 비율 맞춰서 조정

img {
width: 100px;
height: auto;
}

2️⃣ Largest Contentful Paint (LCP) 관련 경고

Image ... was detected as the Largest Contentful Paint (LCP). 
Please add the "priority" property 
if this image is above the fold.

• 의미: 페이지 로드 시 화면에서 가장 크게 보이는 이미지가 LCP 요소로 감지됨.

Next.js는 성능 최적화를 위해, 위 이미지를 우선 로드하도록 priority 속성을 권장.

• 해결 방법:

<Image
  src="/avatar.png"
  width={200}
  height={200}
  priority // 위쪽에 렌더링되는 중요한 이미지
/>

✅ 정리

1. Aspect ratio 경고 → CSS에서 width/height 중 하나는 auto로 유지
2. LCP 경고 → 화면 상단에 중요한 이미지라면 [priority] 속성 추가 코드를 입력하세요

---

---

[Violation] 'message' handler took 167ms

1️⃣ 의미

'message' handler → 브라우저에서 window.postMessage나 WebSocket, Worker 등으로 메시지를 수신할 때 실행되는 함수

took 167ms → 이 이벤트 핸들러가 167밀리초 동안 블로킹되었다는 뜻

[Violation] → 브라우저가 "이 코드는 느려서 UI 성능에 영향을 줄 수 있음"이라고 경고

• UI thread가 100ms 이상 블로킹되면 성능 문제로 경고가 뜹니다.

2️⃣ 원인

1. 메시지 핸들러 안에서 무거운 연산이 있음 (예: 배열 반복, JSON 파싱, 상태 업데이트 등)
2. React에서 상태 업데이트가 많거나, 렌더링이 복잡할 때도 발생 가능
3. 브라우저 개발 환경(DevTools)에서는 실제보다 경고가 더 잘 뜨기도 함

3️⃣ 해결 방법

1. 핸들러 최적화

window.addEventListener("message", (event) => {
  // 무거운 연산을 분리
  setTimeout(() => heavyWork(event.data), 0);
});

const NavLinks = ({ containerStyles }) => {
  const pathname = usePathname();

  // ✅ 여기가 적절한 위치
  React.useEffect(() => {
    const handleMessage = (event) => {
      // 무거운 연산은 setTimeout으로 분리
      setTimeout(() => {
        console.log("Received message:", event.data);
        // 필요한 작업 수행
      }, 0);
    };

    window.addEventListener("message", handleMessage);

    // cleanup
    return () => window.removeEventListener("message", handleMessage);
  }, []);
// ✅ 여기까지

  return (
    <ul className={containerStyles}>

1. priority 추가

import Image from "next/image";

<Image
  src="/avatar.png"
  width={200}
  height={200}
  priority // preload 최적화
/>

1️⃣ Preload (미리 로드)

• 정의: 브라우저가 HTML parsing 중인 동안, 페이지에 꼭 필요한 리소스를 미리 다운로드하도록 지시
• 주로 LCP(Largest Contentful Paint) 이미지, 폰트, 스크립트에 사용
• 장점: 페이지 상단에 중요한 이미지가 빠르게 표시되어 퍼포먼스 향상
• 단점: 중요하지 않은 리소스를 무조건 다운로드하면 불필요한 트래픽 증가

<link rel="preload" as="image" href="/hero-banner.jpg">

Next.js에서는 next/image의 priority 속성을 쓰면 자동으로 preload 됩니다.

2️⃣ Lazy Load (지연 로드)

• 정의: 리소스를 사용자가 실제로 필요로 할 때까지 다운로드를 미룸
• 주로 페이지 아래쪽 이미지, 스크롤 영역 밖 리소스에 사용
• 장점: 초기 페이지 로딩 속도 개선, 트래픽 절약
• 단점: 이미지가 나타날 때 약간 지연될 수 있음

<Image
  src="/avatar.png"
  width={200}
  height={200}
  loading="lazy"  // lazy load
/>