코드리뷰

[jiji-hoon96]

1. 하드코딩 삭제

https://github.com/johj703/lol_champ_info/blob/31d06e635df77fbf3b6eeaaa2955e10b86379724/src/app/champions/%5Bid%5D/page.tsx#L22-L28

하드코딩된 URL은 오류를 발생할 확률이 높습니다. 상수값으로 관리하는 것이 좋습니다

2. 사용하지않는 코드, 주석 삭제

console, 주석, 코드 등등 사용하지 않으면 삭제하는 것이 가독성에 좋습니다

3. Objects.values 사용 https://github.com/johj703/lol_champ_info/blob/944131e483690283e106cbc0ade49061fc4c6695/src/app/items/page.tsx#L9-L11

object.values(result.items)를 사용해보세요

4. Map

https://github.com/johj703/lol_champ_info/blob/944131e483690283e106cbc0ade49061fc4c6695/src/app/rotation/page.tsx#L37-L42 champions.find()를 반복적으로 호출하는 것은 비효율적입니다. Map을 사용해보세요!

5. Fetch를 사용하는 부분 개선

https://github.com/johj703/lol_champ_info/blob/944131e483690283e106cbc0ade49061fc4c6695/src/components/ChampionRotation.tsx#L24-L37

const useChampionRotation = () => {
  const [rotationData, setRotationData] = useState<ChampionRotation | null>(null);
  const [champions, setChampions] = useState<Champion[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [rotationResponse, championsResponse] = await Promise.all([
          fetch("/api/rotation"),
          fetch("/api/champions")
        ]);

        if (!rotationResponse.ok || !championsResponse.ok) {
          throw new Error("데이터를 가져오는데 실패했습니다.");
        }

        const rotationData: ChampionRotation = await rotationResponse.json();
        const championsData: Champion[] = await championsResponse.json();

        setRotationData(rotationData);
        setChampions(championsData);
      } catch (err) {
        setError(err instanceof Error ? err.message : "알 수 없는 오류가 발생했습니다.");
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return { rotationData, champions, loading, error };
};

코드가 너무 복잡합니다. 전체적인 개선이 필요합니다 위 코드처럼 분리하는 것도 좋아보여요

[johj703]

네 확인했습니다! 코드 리팩토링을 해보도록 하겠습니다.