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

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

 

1. 문화공공데이터광장

 

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

문화공공데이터광장

 

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

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

 

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

2. 사용방법

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

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

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

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

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

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

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

 

3) 입력한 메일에 들어가, 확인하기

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

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

 

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를 신청하고 활용하는 방법에 대해 알아보았습니다.

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