동물의 숲 웹페이지 만들기 - 동숲 주민 일부 데이터 한글 번역하기 (3)

 

주민의 종류, 성격, 성별 등 번역된 데이터가 없는 속성들은 객체로 만들어서 사용해보려고 한다.

 

translations.js

// 종류
const speciesKr = {
  "Alligator": "악어",
  "Anteater": "개미핥기",
  "Bear": "곰",
  "Bear cub": "아기곰",
  "Bird": "새",
  "Bull": "황소",
  "Cat": "고양이",
  "Cub": "새끼",
  "Chicken": "닭",
  "Cow": "소",
  "Deer": "사슴",
  "Dog": "개",
  "Duck": "오리",
  "Eagle": "독수리",
  "Elephant": "코끼리",
  "Frog": "개구리",
  "Goat": "염소",
  "Gorilla": "고릴라",
  "Hamster": "햄스터",
  "Hippo": "하마",
  "Horse": "말",
  "Koala": "코알라",
  "Kangaroo": "캥거루",
  "Lion": "사자",
  "Monkey": "원숭이",
  "Mouse": "쥐",
  "Octopus": "문어",
  "Ostrich": "타조",
  "Penguin": "펭귄",
  "Pig": "돼지",
  "Rabbit": "토끼",
  "Rhino": "코뿔소",
  "Rhinoceros": "코뿔소",
  "Sheep": "양",
  "Squirrel": "다람쥐",
  "Tiger": "호랑이",
  "Wolf": "늑대",
}

// 성격
const personalityKr = {
  "Smug": "느끼함",
  "Big Sister": "단순활발",
  "Lazy": "먹보",
  "Cranky": "무뚝뚝",
  "Snooty": "성숙함 ",
  "Peppy": "아이돌",
  "Jock": "운동광",
  "Normal": "친절함",
}

// 성별
const genderKr = {
  "Male": "남 ♂",
  "Female": "여 ♀",
}

export { speciesKr, personalityKr, genderKr };

 

Home.js

 const animal = response.data.map(currentVillager => {
        const matchingVillager = villagers.find(villager => villager.name === currentVillager.name);
        if (matchingVillager) {
          return {
            ...currentVillager,
            name: matchingVillager.translations.kRko,
            species: speciesKr[matchingVillager.species],
            personality: personalityKr[matchingVillager.personality],
            gender: genderKr[matchingVillager.gender],
          }
        }
        return null;// 일치하는 Villager가 없을 때는 null을 반환
      });

 

종류, 성격, 성별을 정의한 각각의 객체에서 키값이 일치하는 객체를 찾고,

해당되는 값을 포함한 새로운 객체를 리턴하도록 했다.

 

 

의도한 대로 화면에 출력된다~!

추후 필요한 정보들은 동일하게 하면 될 것 같다 :)

 

최종코드

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import VillagerList from '../component/VillagerList';
import { villagers } from 'animal-crossing';
import { genderKr, personalityKr, speciesKr } from '../translations/translations';


function Home() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    const URL = "https://api.nookipedia.com/villagers?game=nh&game=pc";

    try {
      setLoading(true);
      const response = await axios.get(URL, {
        headers: {
          "X-API-KEY": process.env.REACT_APP_API_KEY,
          "Accept-Version": "1.0.0",
        },
      });
      const animal = response.data.map(currentVillager => {
        const matchingVillager = villagers.find(villager => villager.name === currentVillager.name);
        if (matchingVillager) {
          return {
            ...currentVillager,
            name: matchingVillager.translations.kRko,
            species: speciesKr[matchingVillager.species],
            personality: personalityKr[matchingVillager.personality],
            gender: genderKr[matchingVillager.gender],
          }
        }
        return null;
      });
      setData(animal);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>에러: {error}</p>;

  return (
    <div className='container'>
      <h1>동물의 숲</h1>
      <VillagerList villagers={data} />
    </div>
  );
}

export default Home;