[API활용 프로젝트] - Holiday Calendar

🗓️ 공휴일을 알려주는 Holiday Calendar

한 줄기의 빛같은 공휴일만 보고 달려가는 사람들 모여~

 

슬라이더의 배경 이미지는 햄뿡이님의 배경을 사용했다.

https://grafolio.naver.com/wallpaper/605525

재미없는 회사PC 배경화면 (어두운 배경 추가수정!)

---

🌱 이 주제를 정한 이유

처음에는 날짜별 달의 모양을 알려주는 '천문 달력'을 만드려했다.

api활용신청을 하고 막상 데이터를 받아보니 내 예상과는 많이 달랐다.

물론 유용한 정보는 많았지만 내가 만들고자 하던 결과물에는 적합하지 않아 

다른 주제에 대해 생각을 하게 되었다.

그러다 한국천문연구원에서 제공하는 다른 open api를 발견하였다.

천문달력 보다는 유용성 측면에서 훨씬 좋을거같아 이 데이터를 활용해 '공휴일을 알려주는 달력'을 만들게 되었다.

---

🌿 프로젝트 진행

이번 프로젝트도 React로 진행해보았다.

📍 시안

첫 시안

처음에는 연도별로 공휴일을 호출하여 렌더링을 하고 싶었다.

그런데 월을 url에 입력하지 않으면 데이터가 중간에 끊겨서 들어오는 현상이 일어났다.

( 2023년도의 공휴일은 17개인데 10개만 들어옴)

그래서 년도와 월을 모두 입력해주어 전송을 하는 방식을 선택했다.

수정 시안

---

📍 데이터 요청

수업에서는 fetch로 api요청을 했었지만 이번에는 axios를 사용하여 요청을 보냈다.

이번에 활용한 데이터는 xml형식으로 axios는 자동으로 JSON데이터 형식으로 변환해주기 때문에

따로 .json()메소드를 사용하지 않고 데이터를 바로 사용할 수 있다.

const [holidayData, setHolidayData] = useState([]);
      
const getHoliday = async()=>{
    try{
      const data = await axios({
      method:'get',
      url : url
    })
    setHolidayData(data.data.response.body.items)
  } catch(err){
    console.log('error')
  }
 }

버튼을 클릭하면 데이터 요청을 할 수 있도록 함수를 만들었다.

안에 들어있는 부수적인 데이터는 제외하고 필요한 item부분만 사용하기 위해 상태를 변경해주었다.

---

📍 데이터 활용하기

데이터를 받아오면 옆에 새로운 컴포넌트에 렌더링되도록 구현

최종 시안

새로운 컴포넌트를 만들어 데이터가 담긴 state를 넘겨주었다.

그런데 렌더링을 하면서 수많은 에러를 맞닥뜨리게 되었다.

 

🔥 문제 1 ) 데이터가 하나씩 밀려서 찍힘

먼저, 실행시엔 렌더링 코드를 주석처리하고 데이터를 불러왔을때

주석을 해제하면 데이터가 찍히지만, 버튼을 누르거나 새로고침을 하면 에러가 떴다.

// 첫 렌더링 코드
{Object.keys(item).length!==0? (
                        item.map((el)=>
                            <Holiday key={el.datekind}dateName={el.dateName} locdate={el.locdate} />
                        )
                    ) : <div>쉬는 날이 없다니..</div>}

여기서는 item의 길이가 0일때(불러진 데이터가 없을때)로 조건을 나누어 렌더링을 했다.

이때는 처음 입력값에 따른 데이터가 불려와지면 렌더링이 되지만 다른 값을 넣어 다른 url로 api호출을 하면 에러메세지가 뜬다.

 

🔥 문제 2 ) 데이터가 없는 경우 

또, 주석을 풀고 새로고침을 하면 다음과 같은 에러가 뜬다.

item에 해당하는 데이터가 없는 경우를 콘솔에 찍어보니 undefined가 나와 이 경우를 조건문에 추가를 해보았다.

{item!==undefined && Object.keys(item).length!==0? (
    item.map((el)=>
    	<Holiday key={el.datekind}dateName={el.dateName} locdate={el.locdate} />)
    	) : <div>쉬는 날이 없다니..</div>}

코드를 수정하자 기존에 뜨던 에러메세지가 사라졌고 잘 동작하는 듯 보였지만 여전히 다른 데이터를 가져오는 경우에는 에러가 떴다.

그래서 코드를 또 수정해주었다.

{item!==undefined? (
	item.map((el)=>
        <Holiday key={el.datekind}dateName={el.dateName} locdate={el.locdate} />)
    	) : <div>쉬는 날이 없다니..</div>}

이제 다른 날짜를 찍어도 잘 동작했다.

 

🔥 문제 3 ) 데이터가 하나인 경우

하지만 몇몇 날짜에서는 다음과 같은 에러가 뜬다.

2023/07, 2023/08, 2023/12

2022/07, 2022/08, 2022/12 ,,,

받아오는 데이터상의 문제일까…?

 

 

 

 

위에서 에러가 났던 특정 날짜에 대한 공통점을 찾아 보았을때 (thanks to 지현님)

해당되는 데이터가 1개 뿐이라 배열이 아닌 객체 형태로 들어온다.

렌더링 조건에 이를 추가해 주었다.

삼항 연산자를 중첩해서 코드를 작성하였는데 뭔가 지저분해 보이지만 지금은 이게 최선인둣..

{item!==undefined? (
    Array.isArray(item)!==true?
        <Holiday dateName={item.dateName} locdate={item.locdate}/>:
            item.map((el)=>
                <Holiday key={el.datekind}dateName={el.dateName} locdate={el.locdate} />)
                ) : <div>쉬는 날이 없다니..</div>}

이걸 왜 몰랐을까.. 아니 처음 해보면 모를 수 있지!!

🔥 문제4 ) 2025년 이후로 데이터가 안찍히는 이유?

국가에서 확정 휴일을 중순까지 정해서 발표하는데 아직 2025년도에 대한 확정 휴일을 발표하지 않아서

데이터가 없는 것으로 보인다. (thanks to 지현님)