달력 기능을 만들때 공휴일을 표시하고 싶었는데 공휴일 정보를 제공하는 API가 존재했다. 공휴일 API를 사용하는 방법을 알아보자.
https://www.data.go.kr/data/15012690/openapi.do 공휴일 API를 제공하는 사이트이다.
먼저 로그인 후 API 활용신청을 해주자!
활용신청이 완료되었다면 마이페이지에서 API 인증키를 확인할 수 있다.
인증키를 복사해서 따로 보관해두자.
이제 실제로 이용을 해볼건데 우리가 필요한 공휴일 정보는 목록에서 공휴일 정보 조회를 클릭 후 오른쪽 조회 버튼을 눌러주자.
API 요청을 하기위해서는 요청해야하는 두개의 파라미터가 존재한다. 년도와 월 실험해보니 년도만 보내주면 해당 년도에 모든 월에대한 공휴일 정보를 얻을 수 있었다. 1월부터 12월까지 12번을 요청하는건 비효율적이니 필자는 년도 파라미터만 보낼 예정이다.
요청이 성공적으로 이루어졌다면 받게되는 데이터들이다. 필자는 날짜, 명칭을 가지고 공휴일 정보를 다루었다.
페이지 맨 밑에 샘플코드가 존재한다. 필자는 JS를 이용하였다. 해당 코드를 복사해서 이용해보자.
추가 적으로 추가한 코드와 수정된 코드가 있는데 먼저 마이페이지에서 보관해두었던 인증키를 서비스키에 넣어주자.
그리고 solMonth 데이터는 요청하지 않을것이므로 주석처리를 해주었다. numOfRows 파라미터를 30으로 반영했는데 한페이지에 30개 까지 공휴일 정보를 보겠다는 의미이다. 추가하지않으면 기본값인 10으로 요청이되는데 그러면 공휴일 갯수가 10개가 넘어가버리면 한페이지에서 다 확인할 수가 없다는 불편함이 있으므로 30개로 설정해주었다.
this.status == 200이라는 조건문을 추가했는데 성공적으로 api요청이 이루어졌다면 status가 200을 반환하게 된다. 그 후 이 api response 데이터는 xml 형식이기 때문에 js에서 활용하기 편하게 DOM형식으로 pasrser 해주는 코드를 추가하였다.
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(this.responseText, "text/xml");
그 후 반복문을 통해서 날짜데이터인 locdate와, 공휴일이름인 dateName을 가져와서 data 딕셔너리에 날짜를 키값으로 벨류값을 공휴일 이름으로 추가하는 코드이다.
각자가 원하는 형태로 데이터를 처리하면 될 것이다.
let data = {}
var xhr = new XMLHttpRequest();
var url = 'http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getRestDeInfo'; /*URL*/
var queryParams = '?' + encodeURIComponent('serviceKey') + '='+'서비스키'; /*Service Key*/
queryParams += '&' + encodeURIComponent('solYear') + '=' + encodeURIComponent('2023'); /**/
queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('30'); /**/
// queryParams += '&' + encodeURIComponent('solMonth') + '=' + encodeURIComponent('09'); /**/
xhr.open('GET', url + queryParams);
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) { // 응답이 성공했다면 (200)
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(this.responseText, "text/xml");
// XML에서 원하는 데이터 추출
var items = xmlDoc.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var locdate = items[i].getElementsByTagName("locdate")[0].textContent;
var dateName = items[i].getElementsByTagName("dateName")[0].textContent;
data[locdate] = dateName;
}
} else {
console.error('오류 발생. HTTP 상태 코드:', this.status);
}
}
};
xhr.send('');
크게 어렵지 않게 API 호출을 할 수 있으므로 다들 GOOD 개발하길 바란다!