[URECA] Day64 React API 공공데이터

🛜 공공데이터 포털 OpenApi 이용하기

https://www.data.go.kr/

공공데이터 포털

공공데이터 포털도 회원가입을 통해서 원하는 api를 가져올 수 있다.

 

구현은 어제 만들어놓은 페이지에 공공데이터 api를 추가해서 작업을 하겠다.

 

이번 실습에서는 한국관광공사 전국 야영장 등록 현황 데이터를 이용했다.

 

1. 원하는 데이터의 api신청을 한다.

2. 홈 > 마이페이지 > 데이터 활용 > Open API > 활용신청 현황

일반 인증키(Decoding) 인증키를 복사해서 인증키 설정으로 들어간다.

 APIKeyAuth2(apiKey) - value에 복사값을 붙여넣은 뒤 설정을 누른다.

 

그 뒤 OpenAPI 실행 준비를 클릭해 데이터들이 출력이 자~알 되는지 TEST를 해본다. 

출력이 잘 되는걸 확인할 수 있다.

Request URL에 있는 이 값을 복사하고 VSCode로 들어가 한 번 더 확인해준다.(확인 또 확인)

 

확장 프로그램으로는 Thunder Client를 설치했다.

.

.

.

.

.

.

.

.

 

New Request를 클릭해

Get에 주소를 입력하면 Response에 데이터가 출력된는걸 확인할 수 있다.

.env.local에 VITE_CAMPING_API_KEY 변수를 만들어 service Key 즉! api키를 복붙하면 된다! 이제 기본적인 준비는 다 끝났다!

이제 원하는 기능을 구현하면 된다.

---

📃 getCampingAPi.js

import axios from 'axios'

const CAMPING_API = import.meta.env.VITE_CAMPING_API_KEY
const CAMPING_BASE_URL =
  'https://api.odcloud.kr/api/15037499/v1/uddi:1fe51f51-e956-425b-a9e3-e4555cb57880'

export const getCampingData = async (page = 1, perPage = 10) => {
  try {
    const res = await axios.get(
      `${CAMPING_BASE_URL}?page=${page}&perPage=${perPage}&serviceKey=${CAMPING_API}`
    )
    return res.data
  } catch (err) {
    console.log(err)
  }
}

getCampingApi.js파일을 만들어준다. .env.local에서 저장했던 CAMPING_API를 호출하기 위해 import.meta.env를 통해 가져온다. 

 

import.meta.env가 뭐지?🤔 

 👉🏻Vite(번들러)가 환경변수를 읽어오는 공간이다.  (VITE_CAMPING_API_KEY는 내가 .env파일에 저장해둔 API KEY이름이다.)

💭 아! 프로젝트 바깥에 숨겨둔 API 키를 코드안으로 안전하게 가져오는 방법이구나! 

 

export const getCampingData = async (page = 1, perPage = 10) => {
  try {
    const res = await axios.get(
      `${CAMPING_BASE_URL}?page=${page}&perPage=${perPage}&serviceKey=${CAMPING_API}`
    )
    return res.data
  } catch (err) {
    console.log(err)
  }

 

캠핑장 데이터를 API로 요청해서 가져오는 함수(서버에 요청 → 캠핑 데이터 받아오기)

 

export const getCampingData = async (page = 1, perPage = 10) => {

getCampingData 함수를 만들어 page = 1, perPage = 10으로 기본값을 만들어준다. (1페이지 데이터, 10개씩 가져오겠다는 의미)

 

try {
  const res = await axios.get(
    `${CAMPING_BASE_URL}?page=${page}&perPage=${perPage}&serviceKey=${CAMPING_API}`
  )

 

axios.get()으로 서버에 GET 요청을 보낸다.

 

요청할 때는 URL을 다음과 같이 만든다.

BASE_URL + ?page=1&perPage=10&serviceKey=xxx

 

• page=${page} → 몇 번째 페이지를 요청할지
• perPage=${perPage} → 한 번에 몇 개 데이터를 가져올지
• serviceKey=${CAMPING_API} → API 사용 허가 키

👉🏻 서버에 필요한 정보들을 URL에 붙여서 요청

return res.data

 

 

서버로부터 받은 응답 데이터(res.data)를 그대로 리턴해준다. 이걸 다른 컴포넌트나 함수에서 받아서 사용할 수 있게..

 

catch(err)문은 요청 중 에러가 발생하면 큰솔에 에러가 출력된다.

 

---

🐛 실습 중 겪은 문제 - API 호출 시 필수 파라미터 이해

• 문제 상황
  요청할 때 필요한 추가 파라미터(page, perPage, returnType)가 뭔지 헷갈렸다.
• 원인
  처음에는 흐름이 익숙하지 않았다.
• 해결 방법
  • page: 몇 번째 페이지 가져올지
  • perPage: 한 번에 몇 개 가져올지
  • returnType: 응답 타입 (기본 JSON)
  • 기본값을 그대로 사용해도 API 정상 호출 가능하다는 것 확인

---

⚙️ 해결과정 - API 호출 시 필수 파라미터 이해

• 해결 방법
  • page: 몇 번째 페이지 가져올지
  • perPage: 한 번에 몇 개 가져올지
  • returnType: 응답 타입 (기본 JSON)
  • 기본값을 그대로 사용해도 API 정상 호출 가능하다는 것 확인

---

🐛 실습 중 겪은 문제 - 인증 키 오류 문제

• 문제 상황
  OpenAPI 호출 시 "인증되지 않은 키입니다" 에러 발생
• 원인
  serviceKey 파라미터에 입력한 인증키 앞에 공백 문자(탭, 스페이스)가 들어있었다.

---

⚙️ 해결과정

• 두 개의 입력창이 있었는데, Authorization(header) 와 serviceKey(query) 방식이 구분되어 있었음.
• 해결 방법:
  • Authorization 부분은 비워두고,
  • serviceKey 부분에 디코딩된 인증키만 입력 후 '설정' 클릭

 

창문 밖의 날씨는 화장 그자체~ (창문 밖 뷰는 하늘과 아파트 뷰..) 

방구석에서 하루종일 수업듣는데 밖으로 나가고 싶다..

로그인할때마다 보안문자 입력하는거 귀찮다아~

 

요즘 너무 게을러졌다 🦥
마음은 조급한데 몸이 따라주지 않는다. 그래도 포기하지 않고, 천천히 다시 리듬을 찾아야겠다.

괜히 폰만 만지작거리고, 하루가 금방지나가버린다. 시간아 멈춰~~~