홈에서 원하는 노선번호 입력 시 해당 버스 페이지로 이동 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..
문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) 나의 풀이 function solution(a, b) { return new Date(2016, a - 1, b).toString().slice(0, 3).toUpperCase(..
노선번호 입력 폼 만들기 버스 노선번호를 입력해서 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..
MongoDB 설정 회원가입 후 새로운 프로젝트 생성 New Project를 클릭 프로젝트명을 입력 후 Next를 클릭 Create Project 클릭하여 프로젝트 생성 클러스터 생성 Build a Database 클릭 DB의 무료요금제(M0)선택 후 리전(Region)은 한국 선택 후 클러스터명을 작성 후 Create를 클릭 연결 및 인증에 사용할 유저명과 비밀번호 설정 IP 엑세스 리스트에 0.0.0.0 추가 후 Finish Admin 권한 설정 Database Access에서 Actions의 EDIT클릭 Built-in Role Atlas admin으로 변경 클러스터에서 Application 연결 Database의 클러스터에서 Connect 클릭 Connect your application 클릭 N..
리액트 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 사용 준비 서비스에 필요한 정보는 아래와 같다. 버스노선 조회 서비스 정류소 조회 서비스 공공데이터 포털 국가에서..
문제 설명 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 제한 조건 n은 2이상 1000000이하의 자연수입니다. 나의 풀이 function solution(n) { let answer = 0; const arr = new Array(n + 1).fill(true); const end = Math.sqrt(n); for (let i = 2; i
Function(함수) Function(함수)는 특정 작업을 수행하기 위한 코드의 블록이다. 함수는 특정한 입력 (인자)을 받아들이고, 그 입력에 따라서 일련의 계산을 수행한 뒤, 그 결과를 반환할 수 있다. 함수는 모듈화된 코드를 작성할 때 매우 유용하다. 함수는 함수의 인자와 반환 값의 타입을 명시할 수 있다. 이를 통해 함수의 사용자는 함수가 어떤 형태의 인자를 받고, 어떤 형태의 값을 반환하는지 미리 예측할 수 있으며, 이를 기반으로 코드를 작성할 수 있다. 함수의 인자와 반환 값의 타입 명시는 함수를 사용하는 코드의 안정성을 높여준다. 함수의 타입 명시는 함수 선언문 또는 함수 표현식에서 가능하다. 함수 선언문은 함수 이름과 함수 인자를 명시하여 함수를 정의하는 것이며, 함수 표현식은 함수를 변..
Type Operators(타입 연산자) 타입스크립트(TypeScript)는 자바스크립트(JavaScript)의 상위 집합 언어로, 정적 타입(static type)을 지원한다. 타입스크립트는 변수, 함수, 객체 등의 값의 타입을 사전에 정의하고, 그것이 잘못 사용되는 것을 방지할 수 있다. 이 때, 타입스크립트에서는 다양한 Type Operators(타입 연산자)를 제공하여 타입 정의를 더욱 유연하게 할 수 있다. Union Type Operator: | (or) 유니언 타입 연산자는 | 기호로 표시된다. 이 연산자는 두 개 이상의 타입을 묶어서 하나의 타입으로 정의할 때 사용된다. 예를 들어, 문자열과 숫자 중에서 하나의 타입을 가지는 변수를 정의하려면 다음과 같이 작성할 수 있다. let myVar..
