TIS (Train Information System)

Roblox의 게임 중 하나인 '남청철도 | Namcheong Rail' 에서 제공하는 열차정보 API를 통해 제작한 실시간 열차정보 웹 페이지입니다.

---

사용 언어

• HTML(5)
• CSS(3)
• JavaScript

작동 방식

1. fetch() 함수를 통하여 API (https://gns.cpplatform.kr:2083/train/all) 에서 정보를 받아옵니다.
2. 받아온 데이터를 json 형식으로 변환한 뒤 반환합니다.
3. 반환된 데이터를 화면에 구현합니다. (API의 type, number, station 값만 활용함.)
   • for문을 통해 데이터의 길이만큼 화면에 구현하는 방식으로, 데이터가 존재하는 만큼만 화면에 구현하도록 설계하였습니다.
   • insertAdjacentHTML를 사용하여 화면에 지속적으로 추가하는 방식으로 설계하였습니다.
4. setInterval() 함수를 통하여 10초마다 location.reload() 함수를 통해 페이지를 새로고침 합니다.

화면 구성

• 행선지 (~행 / ~순환)
• 열차번호 (Nxxxx)
• 현재 위치 (xx.진출 / xx.진입)

어려웠던 점 (문제 해결 방법)

• 데이터 전체를 어떻게 받아서 화면에 구현해야 할 지가 어려웠으나, 반환된 데이터가 배열 방식이라는 걸 알게 된 뒤 for문을 통해 length 만큼 받아와서 화면에 구현하면 되겠다는 것을 깨달았습니다.

쉬웠던 점

• fetch() 함수를 사용하는 것이 익숙한 편이었기에 데이터를 받아오고 json 형식으로 변환하여 반환하는 것이 문제없이 구현될 수 있었습니다.