[개발] 국경일 확인표 만들기 with HTML, CSS, Javascript, JQuery

23년 추석 연휴가 개천절까지 껴서 매우 길게 느껴졌습니다. 그러면서 궁금증이 생겼습니다.

과연 다음번에 있는 가장 긴 연휴는 언제일지 궁금해지기 시작했습니다. 그래서 저만의 국경일 달력? 표?를 만들어 보는 것도 재밌을 것 같더라고요.

 

국경일 API 승인받기

일단 제작에 앞서 국경일 API를 승인받아야 합니다.

https://yogyui.tistory.com/entry/%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8%EA%B3%B5%ED%9C%B4%EC%9D%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A1%B0%ED%9A%8C-REST-API

공공데이터포털::공휴일 데이터 조회 (REST API)

요겨님의 말로는 공공데이터 포털에 들어가서 승인을 받아야 한다고 합니다.

 

승인을 받고 옵시다! (너무 귀찮지만 한번 해보는 것도 경험에 도움이 된다고 생각합니다.)

 

승인받고 오면 90%는 성공입니다. ㅎㅎ

 

달력 넘기기 및 표 만들기

1. 달력 넘기기 버튼 및 라벨 만들기

<ul class="lecture_arrow_area" style="width:250px; padding-left: 100px;">
  <li>
  	<a id="prevDate" title="prevDate" data-prev_date="" style="cursor: pointer;" class="ico_pre_date"><img style="width:20px;" src=" https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbu7RYx%2FbtsxaK4MhRT%2FUYRCkkl9ZqymW9BLR6EOn1%2Fimg.png ">
  	</a>
  </li>
  <li class="year_month">
  	<label for="" id="currentDate" style="vertical-align:top;">2023.10</label>
  </li>
  <li>
  	<a id="nextDate" title="nextDate" data-next_date="" style="cursor: pointer;" class="ico_next_date"><img style="width:20px;" src=" https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fmg4Np%2FbtswbFrXvyI%2FbyQ9AAkF11I4fKJP7ybmIK%2Fimg.png ">
    </a>
  </li>
</ul>

코드가 길어 보이는 것은 <a> 태그에 넣어놓은 <img> 태그 때문입니다.

이미지 다운로드한 것을 넣으면 짧고 좋지만 예시 코드라서 그냥 제 블로그에 이미지 넣은 깡통 글 하나 만들어서 붙여 놓은 것입니다.

여러분은 여러분이 원하는 이쁜 버튼을 원하면 다운로드하여서 사용하시길 바랍니다.

 

이렇게 ul 태그와 li 태그를 작성하고 css를 손봐야겠죠.

 

.lecture_arrow_area {list-style-type: none; position:relative;top:0;left:18%;height:22px;margin-bottom:10px;margin-left:-109px;line-height:17px;overflow:hidden}
.lecture_arrow_area li{float:left}
.lecture_arrow_area li.year_month{padding:0 20px 6px 20px;color:#333;font-size:17px;text-align:center;font-weight:600}
.lecture_arrow_area li.year_month i{float:right}
.lecture_arrow_area li.year_month>img{cursor:pointer;margin:-3px 0 0 10px}

1. .lecture_arrow_area 관련 css

• list-style-type : none  :  원래는 점을 찍어서 리스트를 구분했는데, 이 효과를 주면 점이 사라집니다.
• position : relative  : 요소 자기 자신의 원래 위치를 기준으로 배치합니다.
• overflow : hidden  : 내용이 넘치는 경우에 대비해 내용을 숨기는 스타일입니다.

2. .lecture_arrow_area li

•  float : left : .lecture_arrow_area 클래스에 속한 <li> 요소들을 왼쪽으로 띄우는 스타일을 지정

이렇게 만들면 아마

이것과 유사한 모양이 나올 것입니다.

 

다음은 표를 만들어 보겠습니다.

 

2. 국경일 표 만들기

<table border='1'>
  <caption>국경일</caption>
  <thead>
	<tr>
		<th scope="col">국경일 명</th>
		<th scope="col">날짜</th>
		<th scope="col">휴일 여부</th>
	</tr>
  </thead>
  <tbody id="nationalHoliday_dataList">
  </tbody>
</table>

<th> 태그 안에  scope="col"을 넣은 것은 해당 셀이 열을 위한 헤더 셀임을 명시하는 작업입니다.

 

css를 보겠습니다.

table{ border-collapse : collapse; }  /*이중선 제거*/
 th,td{
      width: 100px;
      height: 50px;
      text-align: center;
      border: 1px solid #000;
      
      vertical-align: top;	/* 위 */
      vertical-align: bottom;   /* 아래 */
      vertical-align: middle;   /* 가운데 */
    }

• border-collapse : collapse   : 이중선 제거 작업입니다. 원래는 박스별로 다 네모칸으로 되어있는데, 이 효과를 넣으면 이쁜 표가 됩니다.

다 작성하면 이러한 표가 만들어질 겁니다.

 

JQuery, Ajax 이용하여 값 가져오기

처음 프로그램을 실행했을 시에 이번달의 국경일을 확인하게 만드려고 합니다.

let today = new Date(); //오늘 날짜 불러오기

function updateHolidayList(monthOffset = 0){  //버튼 누르면 년, 월 변경되는 메서드)
  today.setMonth(today.getMonth() + monthOffset);

  let year = today.getFullYear();
  let month = today.getMonth() + 1;
  if(month>0 && month<10){
  	month = "0"+month;
  }
  $("#currentDate").empty();
  $("#currentDate").append(year + ". " + month);
  getHolidayList(year, month);
}

updateHolidayList 메서드 설명

1. 오늘 날짜에서 몇 월인지 구하고 monthOffset 변수를 더하거나 빼서 setMonth를 하게 되면 다음 달이나 이번 달로 설정됩니다.

2. 만약 월이 1월 ~ 9월까지 라면 월에 0을 붙여서 다음 함수를 실행해야 합니다. (API에서 그렇게 하라고 합니다)

ex) 01월, 02월, 03월....

3. 위에 <label> 태그에 선택한 날의 년, 월을 표시합니다.

4. getHolidayList 함수를 실행합니다.

 

이러면 getHolidayList 함수가 궁금해지겠죠?

 

function getHolidayList(year, month) {
  let holidayDataList = $("#nationalHoliday_dataList");
  holidayDataList.empty();

  $.ajax({
    type: "get",
    url: "https://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/
    	getHoliDeInfo?serviceKey='자신의 키 입력'&solYear=" + year + "&solMonth=" + month,
    dataType: "xml",
    success: function(xmlData) {
    	if($(xmlData).find("totalCount").text()==0){
    		var htmlStr = "";
    		htmlStr += "<tr>";
    		htmlStr += "<td colspan='3'>😱국경일이 없습니다.😱</td>";
    		htmlStr += "</tr>";
    		holidayDataList.append(htmlStr);
    	}else{
      $(xmlData).find("item").each(function() {
        var dateName = $(this).find("dateName").text();
        var locdate = $(this).find("locdate").text();
        var isHoliday = $(this).find("isHoliday").text();
        var holidayStatus = isHoliday === "Y" ? "휴일" : "평일";

       var htmlStr = "";
    	htmlStr += "<tr>";
    	htmlStr += "<td>"+dateName+"</td>";
    	htmlStr += "<td>"+locdate+"</td>";
    	htmlStr += "<td>"+holidayStatus+"</td>";
    	htmlStr += "</tr>";
    						  
  		holidayDataList.append(htmlStr);

      });
      }
    },
    error: function(xhr, status, error) {
      console.error("Error: " + error);
    }
  });
}

getHolidayList 함수 설명

1. holidayDataList 변수에 위에 표에 있는 <tbody> 요소를 할당합니다.

2. 할당된 요소 안에 내용을 .empty() 함수로 비워둡니다.

3. AJAX 통신을 이용해서 데이터를 가져옵니다. dataType은 xml입니다.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<response>
    <header>
        <resultCode>00</resultCode>
        <resultMsg>NORMAL SERVICE.</resultMsg>
    </header>
    <body>
        <items>
            <item>
                <dateKind>01</dateKind>
                <dateName>추석</dateName>
                <isHoliday>Y</isHoliday>
                <locdate>20230928</locdate>
                <seq>1</seq>
            </item>
            <item>
                <dateKind>01</dateKind>
                <dateName>추석</dateName>
                <isHoliday>Y</isHoliday>
                <locdate>20230929</locdate>
                <seq>1</seq>
            </item>
            <item>
                <dateKind>01</dateKind>
                <dateName>추석</dateName>
                <isHoliday>Y</isHoliday>
                <locdate>20230930</locdate>
                <seq>1</seq>
            </item>
        </items>
        <numOfRows>10</numOfRows>
        <pageNo>1</pageNo>
        <totalCount>3</totalCount>
    </body>
</response>

이런 식으로 받아와 집니다.

4. xml 파일에 <totalCount> 요소가 0이면 국경일이 없다고 결과가 나오게 하고, 있다면 xml 파일의 데이터들을 정제하여 표에 뿌려주게 됩니다.

5. dateName, locdate, isHoliday 변수를 할당합니다. 정제하는 방법은 xml 파일과 script 문을 잘 보면서 이해햐면 될 것 같습니다.

$(xmlData).find("item").each : xml 데이터에서 item 요소를 찾으세요.

$(this).find("dateName").text() : item 요소에서 dateName 요소의 text를 찾으세요.

같은 의미입니다.

6. holidayDataList에 위에 작성한 htmlStr을 붙여서 넣습니다.

 

이제 마지막으로 버튼 클릭 시에 변경되는 값에 대한 함수를 만들겠습니다.

 

버튼 클릭 시 변경 함수

$(document).ready(function() {
  // 초기화 함수 호출
  updateHolidayList();

  // 이전 달로 이동 버튼 클릭 이벤트 처리
  $("#prevDate").click(function() {
    updateHolidayList(-1);
  });

  // 다음 달로 이동 버튼 클릭 이벤트 처리
  $("#nextDate").click(function() {
    updateHolidayList(1);
  });
});

1. document 가 실행되면 먼저 오늘의 년 월을 할당해서 데이터를 받아오게 됩니다.

2. 이전 버튼을 누르면 이전 달로 가고

3. 다음 버튼을 누르면 다음 달로 넘어가게 됩니다.

 

이렇게 만들면 완성입니다.

 

소감

코드가 길면 뭔가 지저분해 보이고 사람들에게 도움이 될까 생각합니다. 하지만 저의 공부를 할 수 있었다는 점은 또 좋습니다.

HTML이나 CSS 쪽은 관심이 별로 없어서 최근 들어 조금 열심히 하고 있는데, 생각보다 까다로운 친구들이더라고요.

계속하다 보면 언젠가 잘할 수 있을 것이라고 믿습니다.

행복한 나날을 위해 달려가 봅시다.