[NextJS] Trouble Shooting(lol-dex app)

아이템 이미지가 불러와지지 않는 문제

문제 상황

아이템 페이지에서 Riot Games API를 통해 불러온 아이템 데이터를 카드 컴포넌트에 전달하고 <Image> 컴포넌트로 아이템 이미지를 표시하려 했다.

코드 구조

1. 페이지 컴포넌트

// app/items/page.tsx
export default async function ItemsPage() {
  const version: string = await fetchVersion();
  const items: Item[] = await fetchItems();

  return (
    <section>
          {items.map((item) => (
            <ItemCard key={item.id} item={item} version={version} />
          ))}
    </section>
  );
}

2. 카드 컴포넌트

// components/items/ItemCard.tsx
import { itemUrl } from "@/constants/constants";
import { Item } from "@/types/Item";
import Image from "next/image";

type ItemCardProps = {
  item: Item;
  version: string;
};

export default function ItemCard({ item, version }: ItemCardProps) {
  const ITEM_IMAGE_URL = itemUrl(version, item.image.full);

  return (
    <div>
      <div>
        <Image src={ITEM_IMAGE_URL} alt={item.name} width={60} height={60} />
      </div>
      <div>
        <h3>{item.name}</h3>
      </div>
    </div>
  );
}

해결 과정

1. ITEM_IMAGE_URL을 브라우저에 검색해 봤을 때는 정상적으로 잘 나오는 걸 확인할 수 있었음 $\to$ 링크에는 문제 x
   

---

2. 예전에 config 파일에 외부 이미지 도메인 값을 입력해주지 않았을 때 이미지를 불러오지 못했던 점이 생각나서 다시 확인 $\to$ 이미 설정해뒀었음 문제 x

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["ddragon.leagueoflegends.com"],
  },
};

export default nextConfig;

---

3. ITEM_IMAGE_URL 타입 단언 시도

<Image src={ITEM_IMAGE_URL} alt={item.name} width={60} height={60} />

src 속성에 전달된 값이 string | StaticImport 형식이 아니라는 타입 에러 발견 $\to$ ITEM_IMAGE_URL를 string으로 타입 단언 $\to$ 여전히 해결 x

---

4. 다시 원점으로 돌아가서 ITEM_IMAGE_URL을 반환하는 itemUrl을 살펴보자!

// constants.ts
export const itemUrl = (version: string, itemImg: string) => {
  `${API_URL}/cdn/${version}/img/item/${itemImg}`;
};

여기서 문제 발견!!
itmeUrl에서 값 자체가 반환되고 있지 않았다!!!!

화살표 함수에서 중괄호를 사용하면 return을 명시해줘야 하지만, 생략되어 있는 상태였던 것이다.

따라서 version과, itemImg에 타입을 string으로 선언하고, 템플릿 리터럴을 사용함으로써 itemUrl의 타입은 string으로 추론되고 있었는데, 반환값이 없기에 src에 undefined가 전달되면서 타입 에러가 발생하고, 이미지 또한 불러와지지 않았던 것이다.

---

해결 방법

export const itemUrl = (version: string, itemImg: string) =>
  `${API_URL}/cdn/${version}/img/item/${itemImg}`;

아주 간단하게 해결되었다 ^^... 위와 같이 중괄호를 지워 암시적 반환을 설정해두니, 반환값이 제대로 설정되면서 타입 에러도 사라지고 이미지도 정상적으로 불러와졌다.

---

느낀 점

종종 화살표 함수랑 맵 메서드 사용할 때 때 소괄호 대신 중괄호를 써서 리턴되는 값이 없어 당황했던 경험이 몇 번 있었는데 그 실수를 오늘 또 한 것이다!!

마음이 급할 때 특히 이 실수를 자주 하는 것 같다... 이번 일을 마지막으로 반환값 패턴 실수는 반드시 고쳐야겠다고 다짐 또 다짐합니다...

제발 정신 차리고 코드 쳐야겠다... 반성합니다...
(그냥 모니터 밑에 포스트잇으로 적어서 붙여놓을 예정 ㅎ...)

배포 후 로테이션 페이지 에러

Vercel에 환경변수 추가를 깜빡해서 에러가 났다 ㅎ...
NEXT_PUBLIC_RIOT_API_KEY를 추가해주고 나서야 제대로 동작!

이번 프로젝트는 사소한 실수로 시간을 너무 많이 날린 것 같다.
다음부터는 프로젝트 시작 전에 자주 하는 실수들 체크 리스트를 간략하게라도 만들어 두고 시작하든 해야겠다...😂