[공주찾기] 공휴일 찾기 구현하기

[공주찾기] 공휴일 찾기 구현하기

공휴일 찾기를 빠르게 구현해보도록 하자. 해당 프로젝트에서는 입력 값 예외처리는 하지 않았다. 무조건 정상적인 검색어만 넣고 검색한다는 가정하에 구현하였다. 참고하고 보면 좋을 것 같다. 그리고 설명의 편의성을 위하여 최종 코드를 먼저 공개하고 설명하는 것이 좋을 것 같아서 코드 먼저 최상단에 표시를 해두었다.

1. 공휴일 찾기 API 호출, 응답받기, Cors 에러 해결

Cors 에러 해결하기

위 코드 18번 줄에서 basic url인 "http://apis.data.go.kr"을 앞에 적어두고 한 경우 아래와 같은 에러가 콘솔에 보일 것이다. 에러 내용을 보면 웹 개발하면서 만나면 엄청 엄청 엄청 짜증나는 것 중 하나인 cors 에러가 나를 반기고 있다. 우선 이 cors에러를 해결해야지만, 다음 단계를 진행할 수 있기 때문에 빠르게 해결해보자.

가장 간단한 방법은 package.json 파일에 들어가서 "proxy": "http://apis.data.go.kr"를 적어주고 위 18번 줄처럼 앞에 해당 basic url을 지우는 것이다. 아래 이미지를 참고해서 package.json에 넣어보자

API 호출하기, 응답받기

사실 위 cors 에러만 해결하면 API 호출, 응답은 매우 쉽다. 그냥 fetch 함수를 사용하여 호출하면 된다. 위 코드 60번 줄을 보면 fetch 함수를 사용해서 API를 호출하고 있다. 사실 해당 코드는 json으로 변경한 코드인데, 이때 변경하지 않고 62번째 줄에서 바로 console.log(result)를 하게 되면 아래 이미지와 같이 xml 포맷으로 오게 된다.

json 데이터 포맷이 xml 데이터 포맷보다 파싱하기 쉽기 때문에 xml 데이터를 json으로 변경해주도록 하자.

2. xml 데이터를 json 포맷으로 변경

xml 데이터를 json 포맷으로 변경하기 위해 xml-js 패키지를 설치해야 한다. 설치 명령어 : yarn add xml-js

사용방법은 매우 간단하다. 위 코드에서 63~64번째 코드를 보면 된다. 아래 이미지를 확인해보자.

위 이미지는 변환한 데이터에서 내가 원하는 데이터까지 depth를 직접 들어간 것이기 때문에 자신이 원하는 데이터를 얻을 수 있는 depth까지 각자 들어가야 한다.

3. Publishing

이제 데이터를 받은 것을 바탕으로 publishing을 해주어야 한다. 필자는 그냥 material-ui에 있는 컴포넌트를 사용하였다. 사람마다 방식이 너무 다르기 때문에 스스로 해보도록 하고, 어려우면 그냥 필자의 코드를 보고 따라 해보도록 하자.

결론

React 프로젝트에서 간단하게 cors 에러 해결하는 방법, xml 데이터 포맷을 json 데이터 포맷으로 변경하는 방법을 확인할 수 있다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.