Chat GPT한테 코드리뷰 시켰습니다.. (feat. Github Action) Github Action을 이용해서 Chat GPT한테 코드 리뷰를 시켜보자! velog.io 위 글을 보고 진행했다. OpenAI API Key OpenAI API Key OPENAI API에서 로그인하고 설정에서 API Key 를 생성하자. secret key를 깃허브 리파지토리에 등록해야 하니 복사한다. OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com OPEN AI API는 무료가 아니다. Github action secret 코드리뷰를 시킬 리파지토리나 조직의 설정에 들어가서 Secrets and variable..
6004번 버스의 평일/토요일/일요일의 기점 출발 데이터를 쌓아놓은 것을 바탕으로 테이블 UI를 구성했다. const result = departures?.reduce( (acc, dep) => { const dayOfWeek = dep.departure.slice(0, 3); switch (dayOfWeek) { case 'Sun': acc.sundays.push(dep.departure); break; case 'Sat': acc.saturdays.push(dep.departure); break; default: acc.weekdays.push(dep.departure); break; } return acc; }, { weekdays: [], saturdays: [], sundays: [] }, );..
어제 밤에 서버와 클라이언트를 켜두고 오늘 새벽부터 운행 할 버스의 시간을 자동으로 기록하도록 해놨다. 운행이 감지된 첫차 5시 10분부터 시간표에 차곡차곡 작성되었다. 이제 하루치 시간표를 가지고 UI를 작성하고 백그라운드에서 자동으로 시간표가 채워지는 기능을 구현해봐야지.
홈에서 원하는 노선번호 입력 시 해당 버스 페이지로 이동 const handleNavigateBusPage = useCallback( async (e) => { e.preventDefault(); // form에서 받은 busNumber로 busId 받아오기 let busId; await axios .get(`/api/info/${busNumber}`) .then((res) => { console.log(res.data); busId = res.data.response.msgBody[0].busRouteList[0].routeId[0]; // 해당 노선페이지로 이동하면서 busNumber와 busId 전달하기 navigate(`/${busNumber}`, { state: { busNumber, busId..
노선번호 입력 폼 만들기 버스 노선번호를 입력해서 API호출을 했을 때 데이터를 받아보기 위해 간단한 폼을 작성했다. 노선번호 : 입력 노선번호로 정보 및 실시간 위치 API 호출하기 xml데이터 객체로 변환하기 response 데이터를 받아올 때 대부분의 공공데이터 API는 xml데이터를 보내준다. 그래서 서버단에서 XML을 JSON으로 변환해서 보내는 과정을 거쳐야했다. 사용한 라이브러리는 xml2js다. xml2js Simple XML to JavaScript object converter.. Latest version: 0.4.23, last published: 3 years ago. Start using xml2js in your project by running `npm i xml2js`. T..
처음부터 부딪힌 CORS 에러 버스노선정보나, 실시간 위치나 모든 데이터를 리액트쿼리로 관리하려고 한다. 그래서 아래와 같이 코드를 작성하고 일단 버스노선정보부터 API호출을 해봤다. import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; export const useGetBusInfo = () => { const { data, isLoading, error, refetch } = useQuery( ['businfo'], async () => { return await axios .get( `https://cors-anywhere.herokuapp.com/http://apis.data.go.kr/6410000/busrout..
리액트 PWA 프로젝트 생성 이번 서비스의 목표는 어플로까지 발행해서 주변 지인들이 앱으로 편하게 사용할 수 있도록 하는 것이다. 그래서 센텐스유의 PWA템플릿을 그대로 가져와서 리액트 프로젝트를 생성했다. 빌드는 웹팩 바벨 기반이고, 추가로 설치한 라이브러리들의 목록은 아래와 같다. axios : 공공데이터 API 통신용 dayjs : 날짜 관련 라이브러리 emotion : 스타일용 pwa react-query : 서버데이터 전역관리용 sweetalert2 : alert 알림용 socket.io : 실시간 버스 통신용 service-worker.jsx 전체코드 /* eslint-disable no-restricted-globals */ import { clientsClaim } from 'workbox..
프로젝트 개요 강남가는 직행버스의 기점 근처에 살고있는데, 운수업체로부터 받은 시간표가 하나도 맞지 않아 버스가 출발할 때마다 알림도 오고 시간표도 작성해주는 서비스를 만들려고 한다. 기점에서 버스가 출발하자마자 집에서 나가면 시간이 딱 맞기 때문이다. 미리 나가서 기다리면 되지 않는가? 배차시간이 극과 극이다. 운수 업체로부터 받은 시간표는 일부 맞는 것도 있지만 비슷한 시간에 미리 나가봤다가. 버스가 저 멀리 떠나가는 상황이 너무 많았다. 그래서 기점에서 버스가 출발 할 때마다 새로운 시간표에 출발 시간을 기록해주고, 나는 그 시간표를 기준으로 버스를 이용할 예정이다. 공공 데이터 API 사용 준비 서비스에 필요한 정보는 아래와 같다. 버스노선 조회 서비스 정류소 조회 서비스 공공데이터 포털 국가에서..
