문화공공데이터 Open API 사용하기

Open API를 사용하기 위해, 여러 사이트를 찾아본 경험이 있을거에요.
저도 프로젝트에 필요한 여러 Open API를 찾던 도중, 좋아 보이는 사이트를 발견했습니다!

 

---

1. 문화공공데이터광장

 

문화공공데이터광장 바로가기

문화공공데이터광장

 

사이트에 대해 알아보기 전에, 문화공공데이터가 무엇일까요?

 

문화공공데이터란? 문화체육관광부 및 타 부처, 지자체에서 보유하고 있는 유산, 예술, 체육, 관광, 한글 문화재 등 다양한 문화 분야의 공공데이터를 의미합니다.

즉 , 정부는 공공데이터 개방을 통해 사용자의 창의성 및 혁신적 아이디어와 결합하여, 새로운 비즈니스를 창출할 수 있는 생태계를 구축하고자 하는 것이에요!

---

2. 사용방법

그럼 사용해 봐야겠죠! 사용방법에 대해 알아봅시다.

2-1. 데이터 개방 메뉴에 들어가서, 내가 원하는 오픈API를 검색

저는 한국문화정보원_초중고등학교 주변 도서관 정보를 검색했어요.

원하는 오픈API를 클릭하면, 다음과 같은 화면이 나옵니다.

 

2-2. 활용 신청 버튼을 눌러, 오픈 API를 신청

활용 신청 버튼을 누르면, 다음과 같은 신청하는 창이 나타납니다.

동의한 후, 모든 단계를 완료해 주세요!

 

2-3. 입력한 메일에 들어가, 확인하기

신청이 완료되었으면, 입력했던 메일에 들어가 확인해 봅시다!

그러면, 다음과 같은 코드가 도착해 있는 것을 확인할 수 있어요.

 

2-4. 오픈 API 가져오기

그럼 이제, 직접 활용해 봐야겠죠!

맞춤 API 상세 페이지 하단으로 내리다 보면, 다음과 같이 활용 명세란이 있을 거에요.

GET 버튼을 클릭해 줍시다.

 

그럼 다음과 같은 란이 펼쳐지게 될 거에요.

오른쪽에 Try it out 버튼을 클릭한 후, 각 란에 값을 입력해 주세요!

 

그러면 다음과 같이 Request URL이 나타납니다!

이 URL을 기억해 줍시다.

 

이제 VSCode로 들어가서 다음과 같이 입력해 줍니다.

저는 axios 라이브러리를 사용해서, API를 가져왔어요.

 

??? : axios가 설치가 되어있지 않아요!

그러면, 다음과 같이 입력해서 설치해 줍시다! (공식 사이트 바로가기)

npm install axios

 

App.tsx

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

// API 데이터 타입
interface Item {
  schNm: string;
  fcltyNm: string;
}

const App: React.FC = () => {
  const [data, setData] = useState<Item[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);

  // API 가져오기
  useEffect(() => {
    axios
      .get(
        "http://api.kcisa.kr/openapi/API_CNV_065/request?serviceKey=서비스키입력&numOfRows=10&pageNo=1&schNm=%EB%8C%80%EC%A0%84%EC%86%A1%EC%B4%8C&dist=100"
      )
      .then((response) => {
        setData(response.data.response.body.items.item);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>; // 로딩
  if (error) return <div>Error: {error.message}</div>; // 에러

  return (
    <>
      {data?.map((item, index) => (
        <div key={index}>
          <h1>{item.schNm}</h1>
          <p>{item.fcltyNm}</p>
        </div>
      ))}
    </>
  );
};

export default App;

 

이제, 결과를 확인해보면, 정상적으로 나오는 것을 확인할 수 있어요!

 

---

3. 정리하며

지금까지 문화공공데이터에서 오픈API를 신청하고 활용하는 방법에 대해 알아보았습니다.

이를 활용하여, 여러가지 원하는 사이트를 제작할 수 있을 것 같아요!