동물의 숲 웹페이지 만들기 - API 불러오기 (1)

 

동물의 숲 관련 페이지를 만들어 보고 싶어서  API 키를 요청했다.

모동숲 관련된 정보들만 우선 만들어보려고 한다.
https://api.nookipedia.com/

Nookipedia Animal Crossing API

 API 키는 여기서 폼을 작성해 보냈고, 며칠 뒤 API 키 요청 승인 메일을 받아볼 수 있었다.

 

우선 데이터를 받아 올 수 있는지 확인하기 위해 Postman(api 테스트 프로그램)으로 테스트를 해봤다.

공식 문서에서 확인

Nookipedia API

 

x-api-key에 메일로 받은 API 키를 넣고 호출하니 정보가 불러와지는 것을 확인할 수 있었다.

 

React로 출력하기

create-react-app 프로젝트를 생성하고, 

[React] Create React App(CRA) 사용하기

[React] Create React App(CRA) 사용하기

 

API 키는 노출되지 않도록 .env파일에 작성한 후 .gitignore에서 .env파일을 숨겨준다.

// .env
REACT_APP_API_KEY = "API KEY"

// .gitignore
# API KEY
.env

 

 

동물의 숲 주민 데이터 불러오기

// App.js
import axios from 'axios';
import { useEffect, useState } from 'react';
import './css/App.css';

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

  const fetchData = async () => {
    const URL = "https://api.nookipedia.com/villagers";

    try {
      setLoading(true); // 요청 시작 시 로딩 상태를 true로 설정
      const response = await axios.get(URL, {
        headers: {
          "X-API-KEY": process.env.REACT_APP_API_KEY,
          "Accept-Version": "1.0.0",
        },
      });
      setData(response.data); // 요청이 성공하면 데이터를 설정
      console.log(response);
    } catch (error) {
      setError(error.message); // 에러가 발생하면 에러 메시지를 설정
    } finally {
      setLoading(false); // 요청이 완료되면 로딩 상태를 false로 설정
    }
  }

  useEffect(() => {
    fetchData(); // 컴포넌트가 마운트될 때 fetchData 함수를 호출
  }, []);


  if (loading) return <p>Loading...</p>; // 로딩 중일 때 로딩 메시지 표시
  if (error) return <p>Error: {error}</p>; // 에러가 발생하면 에러 메시지 표시

  return (
    <div className='container'>
      <h1>Animal Crossing</h1>
      <p>{data[0].name}</p>
      <img src={data[0].image_url} alt="주민" />
    </div>
  );
}

export default App;

 

공식문서를 참고해서 원하는 데이터를 불러와

동물의 숲 여러 주민 정보를 화면에 출력하기 위해 VillagerList라는 별도의 컴포넌트를 생성했다.

 

리액트에서 map사용 시 li에 key값이 필요한데 id값으로 넣어줬더니 key값 중복 오류가 발생했다.

 

우선 일시적인 해결책으로 index값을 넣어 오류를 해결했다.

// VillagerList.js
function VillagerList({ villagers }) {
  return (
    <ul className="villager-list">
      {villagers.map((villager, idx) => (
        <li key={idx} className="villager-item">
          <img src={villager.image_url} alt={villager.name} />
          <h2>{villager.name}</h2>
        </li>
      ))}
    </ul>
  )
}
export default VillagerList

// App.js
...
  return (
    <div className='container'>
      <h1>Animal Crossing</h1>
      <VillagerList villagers={data} />
    </div>
  );

 

이미지 사이즈가 다양해서 css는 우선 대충 해두었다:)

뿌듯..ㅎ

 

이제 뭘 만들지 생각을 해봐야겠다!