포켓몬도감 오류와 해결과정

이번 글에서는 포켓몬 도감 애플리케이션을 개발하면서 직면했던 오류들과 해결 과정을 모아서 설명하겠습니다. 개발 프로젝트에서는 크고 작은 오류들이 자주 발생합니다. 이러한 오류를 해결하는 과정에서 많은 교훈을 얻을 수 있습니다. 각 오류와 해결 방법을 하나씩 살펴보겠습니다.

1. 이미지 로딩 문제

문제 상황

Card 컴포넌트에서 포켓몬 이미지를 로드할 때, 특정 상황에서 이미지가 제대로 로딩되지 않고 빈 화면이 표시되는 문제가 발생했습니다. 이 문제는 네트워크가 느리거나 이미지 URL이 잘못되었을 때 발생했습니다.

원인 분석

• 이미지 로드가 완료되기 전에 컴포넌트가 렌더링되면서 빈 이미지가 화면에 나타났습니다.

해결 방법

1. 로딩 상태 관리: 이미지 로드 상태를 추적하기 위해 로딩 상태(isImageLoaded)를 추가했습니다.
2. 로딩 중 표시: 이미지가 로드되지 않았을 때는 로딩 중이라는 메시지나 플레이스홀더를 표시하도록 변경했습니다.

import React, { useState } from 'react';

function Card({ pokemon }) {
  const [isImageLoaded, setIsImageLoaded] = useState(false);
  const navigate = useNavigate();

  return (
    <CardContainer onClick={() => navigate(`/detail/${pokemon.id}`)}>
      {!isImageLoaded && <div className="loading-placeholder">로딩 중...</div>}
      <img
        src={pokemon.front}
        alt={pokemon.name}
        onLoad={() => setIsImageLoaded(true)}
        style={{ display: isImageLoaded ? 'block' : 'none' }}
      />
      <div className="pokemon-name">{pokemon.name}</div>
      <FavoriteButton pokemonId={pokemon.id} />
    </CardContainer>
  );
}

2. 다국어 설정 초기화 문제

문제 상황

i18next를 사용하여 다국어 지원을 구현하는 과정에서, 언어 설정이 초기 로드 시 잘못된 언어로 표시되거나 제대로 적용되지 않는 문제가 발생했습니다.

원인 분석

• i18n 초기 설정이 클라이언트 로컬스토리지에 저장된 값과 일치하지 않거나, 초기화가 느리게 진행되어 잘못된 언어가 적용되었습니다.

해결 방법

1. 언어 초기화를 클라이언트 로컬스토리지 값을 기반으로 설정하여, 사용자가 이전에 선택한 언어가 항상 유지되도록 했습니다.
2. useEffect 활용: 컴포넌트가 로드될 때 언어를 다시 한 번 설정하여 초기 로드 문제를 해결했습니다.

useEffect(() => {
  const storedLanguage = localStorage.getItem('language') || 'en';
  i18n.changeLanguage(storedLanguage);
}, []);

3. Redux 상태 관리 오류

문제 상황

Redux를 통해 포켓몬 데이터를 관리하는 과정에서, 비동기 데이터가 로드되지 않은 상태에서 컴포넌트가 렌더링되는 문제가 있었습니다. 이로 인해 undefined 데이터를 참조하려고 할 때 오류가 발생했습니다.

원인 분석

• 비동기적으로 데이터를 로드하는 경우, 데이터가 로드되기 전에 컴포넌트가 렌더링되어 상태가 undefined인 경우가 발생했습니다.

해결 방법

1. 로딩 상태 추가: Redux slice에 loading 상태를 추가하여 데이터를 가져오는 동안 로딩 중임을 표시했습니다.
2. 조건부 렌더링: 컴포넌트에서는 데이터가 완전히 로드되었는지 확인한 후 렌더링을 진행했습니다.

const pokemonData = useSelector((state) => state.pokemon.data);
const loading = useSelector((state) => state.pokemon.loading);

if (loading) {
  return <LoadingSpinner />;
}

return (
  <div className="pokemon-list">
    {pokemonData.map((pokemon) => (
      <Card key={pokemon.id} pokemon={pokemon} />
    ))}
  </div>
);

4. 사용자 인터랙션 지연 문제

문제 상황

즐겨찾기 버튼을 클릭할 때, 버튼의 반응이 느려 사용자가 여러 번 클릭하는 문제가 있었습니다.

원인 분석

• 버튼 클릭 시 Redux 상태가 업데이트되는 데 시간이 걸리면서 즉각적인 피드백이 제공되지 않아 발생한 문제였습니다.

해결 방법

1. Optimistic UI 업데이트: 상태가 Redux에 반영되기 전에 UI에서 먼저 반영하여 사용자에게 즉각적인 피드백을 제공합니다.
2. 클릭 애니메이션 추가: 버튼 클릭 시 애니메이션을 추가하여 사용자에게 명확한 인터랙션 피드백을 제공했습니다.

<button
  onClick={(e) => {
    e.stopPropagation();
    setIsFavorite(!isFavorite); // Optimistic UI 업데이트
    dispatch(isFavorite ? removeFromFavorite(pokemonId) : addToFavorite(pokemonId));
  }}
  className={isFavorite ? 'animate-pulse' : ''}
>
  {isFavorite ? '❤️' : '♡'}
</button>

마무리

이번 글에서는 포켓몬 도감 애플리케이션을 개발하는 동안 발생했던 주요 오류들과 그 해결 과정을 설명했습니다.각 상황에 맞는 해결 방법을 적용함으로써 더 안정적이고 사용자 친화적인 애플리케이션을 만들 수 있었습니다.