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

동화·2023년 4월 6일

AnimalCrossing-Project

Toy-project

목록 보기

2/4

동물의 숲에 요즘 푹 빠져사는데,
내가 좋아하는 걸로 뭔가를 만들어보면 더욱 흥미가 생길 거 같아서
일단 냅다 동물의숲 api가 있나 찾아보았다.

API 불러오기

https://api.nookipedia.com/

여기서 api key를 요청한다고 폼을 작성해 보냈고,
보냈더니 며칠 만에 응원한다며 ~~(ㅋㅋ)~~ 키를 보내주었다.

일단 데이터를 잘 받아올 수 있나 테스트를 해보기위해
주민 목록부터 postman 으로 불러와 보았다.

X-API-KEY에 내가 받은 키를 넣어주고 호출하면

이렇게 정보가 쭉~ 불러와진다.

리액트로 출력하기

프로젝트 생성

npx create-react-app 앱이름

App key 추가하기

.env

키는 일단 숨겨야 하는 내용이므로,
.gitignore 에서

# API KEY
.env

로 숨겨놔준다.

그리고 .env 파일에는 아래 내용을 적어줌

REACT_APP_API_KEY=내가 받은 API KEY

이제 공식문서를 참고해 불러와주면 된다.

App.js

import axios from "axios";

function App() {
  const URL = "https://api.nookipedia.com/villagers";

  const response = axios.get(URL, {
    headers: {
      "X-API-KEY": process.env.REACT_APP_API_KEY,
      "Accept-Version": "1.1.0",
    },
  });

  console.log(response);
  return <div className="App"></div>;
}

export default App;

콘솔창을 확인했을 때,

이렇게 불러와지는 것을 확인할 수 있다.

axios를 실행했으니 일단 promise 객체를 반환하는 함수가 만들어진 것.
이제 나머지 코드도 작성해본다

비동기 실행

aysnc await를 이용해준다

App.js

import axios from "axios";
import React, { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const URL = "https://api.nookipedia.com/villagers";

  const VillagersData = async () => {
    try {
      setError(null);
      setData(null);
      const response = await axios.get(URL, {
        headers: {
          "X-API-KEY": process.env.REACT_APP_API_KEY,
          "Accept-Version": "1.1.0",
        },
      });
      setData(response.data);
      console.log(response.data);
    } catch (e) {
      setError(e);
    }
  };

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

  if (error) return <div>error</div>;
  if (!data) return <div>없다능</div>;

  return <div className="App">{data[0].name}</div>; //Ace 출력
}

export default App;

setError(null), setData(null) : 요청 시작할 때 error와 data 초기화
const response : API에서 불러온 값을 response 변수에 저장
setData(response) : response 값을 data에 저장!

데이터를 불러왔다...

화면에 리스트 출력

화면에 주민목록을 뽑아주기 위해 따로 파일을 만들었다.

Villagers.js

import React from "react";

function Villagers({ name, gender, image_url, species }) {
  return (
    <div>
      <h2>{name}</h2>
      <img src={image_url} alt="이미지" />
      <h4>성별 : {gender}</h4>
      <h4>종류 : {species}</h4>
      <br></br> <br></br>
    </div>
  );
}

export default Villagers;

여기선 <img src={image_url} alt="이미지" />
이 부분에서 한 번 실수가 있었는데, 사진이 엑박이 떴었다.
이유는 { } 이걸 사용하지 않고 " " 이걸 사용해서 image_url 파라미터가 아예 사용되고 있지 않았다.

App.js

	...
    
return (
  <div className="App">
     {data.map((item) => {
        return (
          <Villagers
          		key={item.id}
     			name={item.name}
      			species={item.species}
      			gender={item.gender}
      			image_url={item.image_url}
      	/>
        );
    })}
  </div>
);

return 부분에 자료를 출력해줄 구문을 짜면 된당

~~ㅋㅋㅋㅋ😂 왜케 웃기냐~~ 사진 사이즈가 제멋대로니까 이부분 수정해주면 일단 동일

<img src={image_url} alt="이미지" width={"150px"} />

(App.css를 불러와서 가운데 정렬이 되었다)
아무튼 거의 500마리의 주민이 필요한 정보들만 골라서 불러와졌다.

약간의 css

display: flex
를 해주면 너~무나 당연하게도

이렇게 배치가 된다. (사진 사이즈는 height에 맞춰줘야겠음)
근데 500개가 전부 가로로 놓여있으면 보기가 힘드니깐 수정해주고 싶었다

flex-wrap: wrap

해주고 villagers.js에서도 각각 margin을 주었다.

업로드중..

오늘은 여기까지!
api소스는 물고기, 곤충, 화석... 다양한 정보가 있고
오늘은 일단 주민만 불러와 봤다.
이제 불러오는 거, 뿌려주는 거 다 해봤으니 어떻게 만들지 생각만 하면 된다. ㅠ ㅠ

공공 오픈api는 여기저기 정보가 많은데 이건 뭐 하나도 없어서...
계속 맨땅에 해당하는 기분으로 하고 있다 ㅠ ㅠ
그래도 어떤 일 하나를 아주 0인 상태부터 시작하는 건 처음이니(?)
최선을 다해보려고 한다 흑흑
그래도 내가 스스로 친 코드로 이렇게 화면에 딱! 나오니까 너무 뿌듯한디...