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: [] }, );..
댓글 기능 삭제 유저들이 많이 올려준 글 들 중에 댓글이 작성된 적을 본 적이 없다. 아무래도 글을 올리고 글에 대한 공감은 '좋아요' 버튼으로 충분해서 그런 것이라고 판단했다. 그래서 과감히 댓글 기능을 삭제기로 마음을 먹었다. 수정 전에는 포스트를 클릭 하면 세로방향으로 커지고 댓글 관련 form영역이 있었다. 그리고 포스트를 작성 한 유저라면 수정/삭제 버튼이 보이도록 되어 있었다. 클라이언트의 Postlist 컴포넌트에서 댓글 관련 코드 UI 및 함수 삭제 서버의 댓글 관련 API 삭제 서버의 댓글 Schema를 삭제 수정 후에는 포스트를 클릭해도 아무일도 일어나지 않는다. 수정/삭제 관련 버튼만 남겨놨다. 물론 유저들의 유입과 활동량이 적어서 그런 것도 있지만 댓글기능이 없는 것이 서비스의 문..
시작하기 버튼의 클릭 영역 에러 시작하기 버튼의 바깥쪽 영역을 클릭하면 반응은 하지만 버튼의 기능은 하지 못한다.(로그인/회원가입 페이지로 안넘어간다는 뜻) export const LoginButton = styled.button` ... padding: 0.4rem 1.2rem; `; 수정 전에는 a태그(리액트라우터의 Link)를 감싸고 있는 button에 padding이 있다. export const LoginButton = styled.button` ... /* padding: 0.4rem 1.2rem; */ a { padding: 0.4rem 1.2rem; } `; button태그에 있던 padding을 지우고 자식인 a태그에 padding을 옮겨줘서 a태그의 영역으로 버튼영역을 채워줘서 해결했다..
스크롤 시 화면 아래가 잘리는 버그(?) 캡쳐에 이상한 점을 느끼셨나요? 스크롤 영역이 두군데로 나눠져서 이런 현상이 나타나버렸다. html, body, #root { overflow: scroll; ... } 문제는 이 코드였다. overflow를 scroll로 해놔서 fixed 상태인 navbar영역 만큼 스크롤이 되어서 저렇게 보이는 것이었다. 해당 코드를 삭제하니 깔끔하게 해결됐다.
어제 밤에 서버와 클라이언트를 켜두고 오늘 새벽부터 운행 할 버스의 시간을 자동으로 기록하도록 해놨다. 운행이 감지된 첫차 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..
