오늘은 서울시 지하철 실시간 도착정보 API를 활용한 간단한 프로젝트를 해봤다. 날씨 API 같은 흔한 데이터를 제외하고 조금 더 재미있고 실용적인 데이터를 가져와보자는 마음으로 시작했다.
1. API 키 발급
실시간 도착정보 API를 사용하려면 먼저 API 키를 발급받아야 한다. 아래 주소에서 회원가입을 하고 신청서를 작성하면 간단히 발급받을 수 있다.
발급 화면은 다음과 같다.
신청서 작성을 하면서 '사용 URL' 항목이 필수인 것을 보고 배포가 필요하다고 생각했다. 그래서 깃허브 페이지를 통해 프로젝트를 배포하기로 했다. 여기가 작은 불행의 서막이었다..
2. GitHub Pages에서 404 에러
깃허브 페이지에 배포하고 들어가봤더니 예상치 못한 404 에러가 발생했다.
구글링을 통해 알아낸 결과 GitHub Pages에서는 기본 HTML 파일 이름이 반드시 index.html이어야 한다. 나는 파일명을 다른 이름으로 저장했기 때문에 발생한 문제였다. 다행히 파일명을 수정한 뒤에는 정상적으로 작동했다.
(뒤늦게 안 사실이지만 사용 URL에는 그냥 localhost를 입력해도 된다고 한다.)
3. 첫번째 시도
인증키를 발급받고 요청 URL을 구성하였다. (인증키)부분에 발급받은 인증키를 넣고 (지역)에 자신이 원하는 역이름을 넣으면 된다. 그리고 나는 json으로 보는게 더 편해서 xml을 json으로 바꿔주었다.
http://swopenapl.seoul.go.kr/api/subway/(인증키)/xml/지역나는 집에서 가장 가까운 의정부역 데이터를 불러와 보기로 했다. 요청 URL을 통해 데이터를 호출하니 열차 리스트가 아래와 같이 출력됐다.
내 목표는 이 열차들 중 의정부역에 가장 가까운 하행 열차 정보를 추출하는 것이었다. 처음엔 find 메서드를 사용해 데이터를 가져오려고 했지만 잘못된 코드 작성으로 실패했다.
실패한 코드
fetch(subwayUrl)
.then((res) => res.json())
.then((data) => {
let subway = data["realtimeArrivalList"].find(
["realtimeArrivalList"]["updnLine"] === "하행"
);
console.log(subway);
});4. 두번째 시도: findIndex 사용
findIndex 메서드를 사용해 하행 열차의 인덱스를 먼저 찾고 해당 데이터를 기반으로 열차 정보를 추출하는 방식으로 수정했다.
성공한 코드
fetch(subwayUrl)
.then((res) => res.json())
.then((data) => {
let idx = data["realtimeArrivalList"].findIndex(
(elem) => elem["updnLine"] === "하행"
);
let subway = data["realtimeArrivalList"][idx]["arvlMsg2"];
console.log(idx);
console.log(subway);
});
다행히 콘솔창에 결과가 제대로 출력되는 것을 확인했다.
이후 열차 종류(급행/일반)와 목적지 정보를 추가로 출력하는 코드를 작성했다.
최종 코드
fetch(subwayUrl)
.then((res) => res.json())
.then((data) => {
let idx = data["realtimeArrivalList"].findIndex(
(elem) => elem["updnLine"] === "하행"
);
let subway = data["realtimeArrivalList"][idx]["arvlMsg2"];
let destination = data["realtimeArrivalList"][idx]["bstatnNm"];
let trainType = data["realtimeArrivalList"][idx]["btrainSttus"];
$("#subway").text(subway);
$("#destination").text(destination);
$("#type").text(trainType);
});최종 결과는 아래와 같다.
(css는 아직 수정을 안해서 글씨가 잘 안보이는 점은 양해를..)
5. 느낀 점
처음엔 단순한 실수 때문에 막혔지만 그 과정에서 API의 요청 구조나 웹 배포와 관련된 설정 등을 새로 익힐 수 있었다. 또한, 어제 블로그에 작성한 findIndex를 활용해보면서 제대로 복습할 수 있었고 TIL 작성의 중요성을 다시 한번 깨달았다. 만약 어제 글을 작성하면서 복습하지 않았더라면 혼자서 해결하기는 어려웠을 것 같다.
그리고 아쉬운 점이 있다면 서울시 지하철 실시간 도착정보 API가 진짜 실시간 데이터는 아니라는 점... 업데이트 주기가 다소 느린 편이라 딜레이가 있었다.
