개발일지

카카오 맵 마커에 마우스를 올리면 해당 마커만 정보를 표기하고 싶은데 내가 선택한 마커를 어떻게 구분해야 하나 고민하다 유틸타입인 Record 를 알게 됐다Record 는 TypeScript의 유틸리티 타입으로 객체의 키와 값 타입을 정의할 수 있다각 마커에 id값을 키로, 마커 활성화 여부를 확인하기 위해  boolean 값을 값으로 넣어 state를 만들어준다그리고 Object.fromEntries는 배열로 주어진 키-값을 받아 객체로 변환하는 내장메서드로 마커의 id를 키로 값은 false로 넣어 객체 생성 완료 1. 마커의 hover 상태를 추적하기 위해 키는 id(string) 값은 false( boolean)  객체 타입의 state 생성2. 마커배열을 Object.fromEntries 와 m..

좌표를 주소로 변환geolocation은 위도와 경도를 가져올 수 있지만 우리가 이해할 수 있는 주소로 표기할 수 없다그래서 좌표를 주소로 변환하는 함수를 만들었다 getCurrentAddress 함수에 geolocation으로 현재 위도와 경도를 가져오고 getAddressHandle(주소 변환 함수)에 인자로 넘겨주었다 좌표를 주소로 변환하기 위해 Kakao Maps API의 Geocoder 객체를 생성해 준다Geocoder의 coord2Address 메서드를 호출하고 인자로 위도, 경도, 콜백함수를 넘겨준다콜백함수를 통해 요청이 성공하면 데이터를 변수에 할당해 준다 (result를 꼭 콘솔로 찍어서 구조를 확인해 볼 것)그리고 지도에 저장해 준다 * 주소 변환 변수를 지도에만 저장하는 이유지도는 현..

kakao API 사용하기api 키 발급 및 초기 설정은 아래 블로그 참고https://rominlamp.tistory.com/20 [React] KaKao 지도 API / 카카오맵 사용하기KaKao 지도 API를 사용하여 내 웹 사이트에 카카오맵을 적용해보겠습니다.  Kakao 지도 Javascript API 키 발급 및 웹 플랫폼 추가하기  Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발rominlamp.tistory.com지도 생성지도 위치가 바뀔 때마다 상태를 변경해줘야 하니까 mapState를 만들어준다초기값 좌표는 카카오 api 링크에 나온 좌표를 참고해서 넣자function App() { const [mapState, setMapState] = useStat..

// 개별 선택export const onCheckedHandler = ( e: ChangeEvent, item: any, setCheckItems: React.Dispatch>) => { if (e.target.checked) { setCheckItems(prev => [...prev, item]); } else { setCheckItems(prev => prev.filter(check => check.id !== item.id)); }};// 전체 선택 export const allCheckedHandler = ( e: ChangeEvent, data: any[], setCheckItems: React.Dispatch>) => { if (e.target.checked) {..

const highlightKeyword = (title: string, keyword: string) => { const parts = title.split(new RegExp(`(${keyword})`, "gi")); return parts.map((part, index) => part.toLowerCase() === keyword.toLowerCase() ? ( {part} ) : ( part ) ); }; {highlightKeyword(item.title, debouncedKeyword)}  RegExp: 정규 표현식을 사용하기 위한 내장 객체new RegExp(($..