Frontend/React

사용자의 현재 위치를 실시간으로 업데이트, watchPosition()

watchPosition() watchPosition()은 사용자의 위치 변화를 지속적으로 추적하는 Geolocation API의 메서드이다.즉, 사용자의 GPS 정보가 바뀔 때마다 업데이트를 받을 수 있다.  navigator.geolocation.watchPosition( (position) => { console.log("위도:", position.coords.latitude); console.log("경도:", position.coords.longitude); }, (error) => { console.error("에러 발생:", error.message); }, { enableHighAccuracy: true, // 높은 정확도 요청 maximumAge: 0,..

[Rect Hook Form] 기본적으로 버튼이 submit 버튼으로 동작, 별도의 버튼 사용시 타입 지정 꼭 해주기

태그 안에 태그를 사용하면, 기본적으로 버튼은 submit 버튼 역할을 한다.즉, 버튼을 클릭하면 onClick 이벤트가 실행되고, form 제출 동작도 함께 발생하며 onSubmit 이벤트가 실행된다.  기본 동작 안에 있는 은 기본적으로 type="submit" 속성을 가진다.사용자가 이 버튼을 클릭하면, 브라우저는 form의 데이터를 제출하고 onSubmit 이벤트를 발생시킨다. 동시에, 버튼의 onClick 이벤트가 실행된다.  왜 onSubmit이 실행되는가? 기본 동작버튼을 클릭하면 type="submit"에 의해 폼이 제출되며 onSubmit 이벤트가 발생한다.onClick과 onSubmit의 실행 순서버튼 클릭 시 먼저 onClick 이벤트가 실행되고, 그 후에 onSubmit 이벤트가 ..

함수를 호출하는 방식 (즉시 호출과 지연 호출)

즉시 호출 onClick={onDeleteClick(uuid)}이 방식에서는 함수 호출이 즉시 실행된다.컴포넌트가 렌더링될 때 onDeleteClick(uuid)가 바로 실행되며, 그 결과로 반환되는 값이 onClick에 전달된다.클릭 이벤트가 발생하기 전에 즉시 실행된다.함수가 바로 실행되어 값이 반환되기 때문에, 이벤트 리스너로 적절하지 않다.이 방식은 onDeleteClick이 함수가 아닌 그 반환 값을 사용하게 되므로, 의도된 동작이 아닐 수 있다.  지연 호출: onClick={() => onDeleteClick(uuid)}onClick 이벤트가 발생할 때 onDeleteClick(uuid) 함수가 지연 호출된다.클릭 이벤트가 발생할 때만 onDeleteClick(uuid)가 실행된다.클릭 이벤..

[Rect Hook Form] getValues()에서 Number 타입 가져오는 법

import { useForm } from "react-hook-form";interface IFormProps { name: string; price: string; // getValues()로 가져오는 값의 타입은 기본적으로 문자열(string) description: string;}const MyForm = () => { const { register, getValues, formState: { isValid, errors }, handleSubmit } = useForm({ mode: "onChange", }); const onSubmit = (data: IFormProps) => { const { name, price, description } = g..