[React.js] 버스도착정보 조회 웹 페이지 개발

 웹 페이지 설명

버스도착정보

 

정류소별 실시간 버스 도착 정보를 조회하는 사이트이다.

아직은 위치를 검색하는 기능이 없어서 지도를 드래그해서 위치를 이동시킨다.

마우스 휠이나, 멀티 터치로 줌인, 줌아웃이 가능하며, 오른쪽(모바일에서는 상단) 리스트나 지도의 버스 정류장 라벨을 직접 선택하면 해당 정류장에 도착 예정인 버스 리스트를 보여준다.

 

 

 사용한 API 

공공데이터 포털의 국토교통부_버스정류소정보, 국토교통부_버스도착정보 API를 이용하였다.

공공데이터 포털에 로그인하여 개발 활용 신청을 하면, 몇 시간 안에 승인이 완료가 된다고 하는데..

나는 둘다 SERVICE KEY IS NOT REGISTERED ERROR, SERVICE ACCESS DENIED ERROR와 같은 접근 에러가 나서 몇 일이나 기다려보다가 결국 문의를 넣어서 해결했다.

Q&A에 들어가면, 같은 문제를 겪는 사람이 꽤 되는 것 같다^^

 

공공데이터 포털

 

 개발관련 이슈 

1. http API

 

국토교통부 API는 http로 지원된다... 

따라서 개발 환경인 http에서는 문제 없이 API가 콜 되지만, 배포 환경(https일 경우)에서는 Mixed Content 문제가 발생한다. (HTTPS에서는 HTTP 콘텐츠를 로딩하지 않는다.)

출처: https://www.wpkube.com/how-to-fix-insecure-content-mixed-content-error-in-wordpress/

해결 방법은 API를 https로 변경하거나(https->https), 배포를 http로 하거나..(http->http)

 

나는 전자도 후자도 아닌, 백엔드를 두어 API를 백엔드에서 호출하는 방법으로 문제를 해결해보았다.

Node.js를 이용해 Controller 역할(url 접근 시 경로 라우팅 역할)을 수행하고, React는 build하여 정적 파일로 이용하였다.

 

즉, 서버를 두어 /api/1로 들어오는 것은 버스 정류소 정보 API 호출, /api/2로 들어오는 것은 버스 도착 정보 api 호출로 나머지(*)는 /build/index.html (react)로 연결한다.

 

2. API 호출로 얻은 버스 정류소 정보 필터링

 

국토교통부 버스 정류소 정보 API는 '좌표기반근접정류소목록조회' 기능을 이용하면 GPS좌표를 기반으로 근처(반경 500m)에 있는 정류장을 검색하여 반환한다. 웹 사이트에서는 해당 지도 범위에 있는 버스 정류소 정보만을 서비스하기 위해, API를 이용해 얻은 정류소 데이터를 다시 한 번 지도 범위 내부에 있는지 확인 후, 리스트에 추가한다.

 

3. 정류소 선택 시 도착버스 정보 API 호출

 

버스 정류소 정보 API를 이용해 얻은 도시코드와 정류소 ID를 도착버스 정보 API의 파라메타로 설정하여 호출한다.

반환되는 결과 중 같은 번호의 버스는 묶어서 보여준다. (정렬은 추후에 진행할 예정)

 

4. Heroku로 배포하기

 

원래는 React로 개발하여 간단하게 github page를 이용해 deploy할 예정이었으나, 백엔드를 사용하는 바람에 다른 호스팅 사이트를 찾던 중 Heroku를 발견하였다.

Heroku에 대한 설명과, 배포방법은 아래 게시글을 참고한다.

헤로쿠(Heroku)로 Node.js 호스팅하기

 

 추후에 개선할 기능 

1. 위치 검색

 

헤더에 위경도나, 도로명 주소를 이용해 위치를 검색하여 이동시키는 기능을 추가할 예정이다.

 

2. 버스도착 예정 시간 순 정렬

 

현재는 같은 번호의 버스가 다수 조회되면, API 반환 데이터 순으로 리스트가 추가한다.

도착 시간이 빠른 순으로 정렬을 구현할 예정이다.

 

3. 도착 버스 클릭/터치 시 해당 버스 노선 그리기

 

팝업 창에서 도착 버스를 클릭/터치하면 해당 버스의 노선과, 현재 버스들의 위치를 나타내는 기능을 추가할 예정이다.