24-04-18 소개 페이지 오류 수정하기

오늘도 내일 있을 프로젝트 발표 준비를 하느라 정신없는 하루를 보냈다.

 

어제까지 작성한 코드들을 최종적으로 점검하고 실제로 배포까지 해보았다. 배포를 하고 이리저리 사이트를 둘러보다보니 여러 문제가 발견되어 그것을 고치는 과정도 있었다.

 

내일 있을 발표를 위해 발표 자료, 영상을 준비하는 것도 시간이 꽤 걸렸다.

 

그래도 모두 마치고 나니 뿌듯함이 컸다. 4일이라는 짧고도 긴 시간동안 문제들을 맞닥뜨리고 해결해가는 과정이 고통스러우면서도 즐겁기도 했다.

 

여기에는 간단하게 API를 불러오는 과정에서 생겼던 문제를 해결하는 과정을 정리해본다.

 

1. 웹 페이지 오류 수정하기

웹 페이지에 온도와 통합대기환경지수 데이터를 API에서 가져와 띄우는 것을 만들어두었다. 온도는 기상청에서 가져왔고, 대기오염정보는 한국환경공단에서 가져왔다.

 

배포까지 한 상황에서 페이지를 로드해보니 불러왔던 온도 데이터가 제대로 표시되지 않는 문제가 생겼다.

 

오류를 확인해보니 가져올 데이터가 존재하지 않는다(정의되지 않는다)라는 문구가 떴다.

 

원인을 알아보기 위해 API주소로 들어가 직접 JSON 데이터를 확인해보니 데이터가 아예 존재하지 않았다.

 

왜 이렇게 된 걸까 하고 기상청에서 올려둔 API 활용가이드를 읽어보았다. 그곳에서 원인을 찾을 수 있었다.

 

 

우리가 작성한 API url 주소

 

우리는 초단기실황 정보를 활용해 현재 시간에 해당하는 온도 데이터를 불러왔었다.

 

예를 들어 현재 시간이 11시 30분 이라면 11시에 해당하는 데이터(url 주소 시간 넣는 곳에 11을 넣어주면된다)를 넣어주었다. 헌데 위에서 보다시피 11시에 해당하는 온도 데이터는 11시 40분 이후부터 제공된다. 따라서 현재 날짜의 11시에 해당하는 데이터가 아예 존재하지 않는 것이다.

 

그래서 우리는  현재 시간에서 1보다 작은 값을 넣어 온도 데이터를 불러오기로 했다. 예를 들어 현재 시간이 11시 30분이면 10시에 해당하는(10을 넣어 얻은) 데이터를 가져와서 화면에 띄우기로 하였다.

 

 

그래서 코드를 위와같이 수정했다. 시간에서 빼기 1을 해주었다. 그리고 코드에서 또 틀린 부분이 있었는데 시간 값의 자리수가 한 자리일때 '2' 이렇게 넣어주는 것이 아니라 '02'을 넣어주어야했기 때문에 그 부분도 추가를 해주었다.

 

이렇게 1차로 코드를 수정하고 나서 얼마 뒤에 다시 코드를 살펴보다가 오류를 발견했다.

 

너무나도 당연한 부분인데 0시일 경우에 -1을 하면 -1시가 된다. 0시의 한 시간 전은 23시가 되어야한다.

 

그래서 코드를 다시 한 번 교체해 주었다.

 

위와 같은 식으로 계산해보면 0~23의 숫자 모두 한 시간 전의 시간으로 만들어 줄 수 있다. 그런데 다시 한 번 잘 생각해보니 이것도 완벽한 해결책이 아니다

 

왜냐하면 0시 10분일 경우 23시 10분으로 바뀌어야할 뿐 아니라 날짜까지도 바뀌어야한다. 그렇게 꼬리를 물고 월과 연도까지 모두 수정해야한다.

 

위와 같은 방식으로 수정하는 것은 어렵다고 생각해서 아예 다른 방법을 찾아보았다.

 

찾아보니 현재 시간에서 얼마 이전의 시간(하루든 1시간이든 10분이든)을 구하는 방법을 찾을 수 있었다.

 

공공 데이터가 40분 이후에 업데이트 된다고 되어있기 때문에 넉넉하게 50분 전 시간을 넣어주면 되겠다고 생각해서 아래와 같이 코드를 작성했다.

let today = new Date();
today.setMinutes(today.getMinutes() - 50)

let year = today.getFullYear();
let month = ('0' + (today.getMonth() + 1)).slice(-2);
let todaydate = today.getDate();
let hour = ('0' + today.getHours()).slice(-2);

이렇게 얻어낸 연도, 월, 날짜, 시간을 먼저 제대로 잘 나오나 콘솔로 띄어 확인해본뒤에 url에 넣고 API를 불러오니 정상적으로 작동하였다.

 

3번에 걸친 수정 끝에야 오류 없이 잘 작동하는 것을 확인할 수 있었다. 또 어디서 예상치 못한 문제가 발생할 수 있으니 잘 살펴봐야 겠다.

 

2. 오늘 알게된 것

- 오류 없이 꼼꼼히 살펴봤다고 생각했는데 구현했던 기능이 제대로 작동하지 않고, 오류의 여지가 있는 부분이 갑자기 떠오르기도 했다. 유지보수관리가 개발에서 가장 중요한 것 중 하나라는 이야기를 직접 체감해볼 수 있었다.