오류 내용(@post)에서 customoverlay로 클릭이벤트를 구현하는 도중 생성한 element에 id값이 정상적으로 등록되지 않는 버그가 있었습니다. 기존 구현했던 코드에서는 customoverlay를 생성하고 클릭 이벤트를 등록하는 방식이였는데, kakao map api의 경우, kakao.maps.customoverlay로 생성된 오버레이는 document.getElementById()로는 즉시 접근할 수 없는 경우가 발생할 수도 있다고 합니다. 해결무조건 customoverlay가 생성된 이후 클릭 이벤트가 등록되게 하기 위해 기존 customoverlay를 생성하고 클릭 이벤트를 등록하는 과정을 따로따로 하는 방식에서 customoverlay를 생성하는 동시에 클릭 이벤트를 등록하는 방식..
분류 전체보기
지난 포스트에서 마커를 커스텀하고 customoverlay를 활용해 infowindow를 구현해 보았습니다.이번 포스트에서는 등록한 customoverlay의 요소에 클릭 이벤트를 등록해 보고자 합니다. 클릭 이벤트 등록하기아래 사진과 같이 마커를 클릭했을 때 보이는 customoverlay의 요소에서 "상세보기"를 클릭했을 경우 해당하는 정보를 보여주도록 클릭 이벤트를 등록하고자 했는데, 아래 사진처럼 onClick으로 클릭 이벤트를 등록했을 경우 클릭 이벤트가 동작하지 않았습니다. 그래서 찾아보니 customoverlay의 경우, document element에 직접 이벤트를 등록해주어야 했습니다. 그래서, div 요소에 id를 부여하고 해당하는 클릭 이벤트를 직접 등록해 주는 식으로 구현해 주었습..
지난 포스트에서는 지도를 띄우고 여러 개의 마커를 등록해 보았습니다.이번 포스트에서는 등록한 마커를 커스텀하고 커스텀 오버레이를 활용하여 infowindow를 구현해보고자합니다. 마커 디자인 변경처음 아무런 설정 없이 마커를 등록하고 애플리케이션을 실행시키면 아래 사진과 같이 카카오에서 기본 제공되는 마커로 표시되는 것을 확인할 수 있는데요. 저는 애플리케이션에 맞게 마커를 바꿔주려고 해요. 1. 먼저 바꿔줄 이미지를 준비해 줍니다.2. 바꿔줄 이미지를 코드로 등록해 줍니다. 이미지를 등록하는 코드 이외 지도를 다루는 부분은 이전 포스트를 참고하시면 됩니다.(https://ohamin26.tistory.com/36?category=1193802) 3. 애플리케이션을 실행해 보면 이미지가 정상적으로 바뀐..
지난 포스트에서 Kakao Map API를 등록하고 로컬 환경에서 맵을 띄우는 것까지 해보았습니다.이번 포스트에서는 여러 개의 마커를 등록하는 과정을 정리해 보고자 합니다. 마커 여러 개 등록하기마커를 등록하기 위해서는 Kakao Map이 구현된 상태에서 진행해야 합니다. 관련 내용은 이전 포스트인 https://ohamin26.tistory.com/36를 참고하시면 됩니다. 1. 맵을 띄우는 것까지 완료되었다면 먼저 마커를 표시하기 위한 데이터를 준비해 줍니다. 데이터는 lat, lng, title를 포함하고 있으면 되고 형식은 편한 형식으로 사용하시면 됩니다. 저는 다음과 같이 데이터를 준비하였습니다. 2. 데이터 준비가 완료되었으면, 이전에 작성했던 mapScript에서 마커 정보를 등록해 줍니다..
프로젝트를 진행하는 중 지도 API를 활용해야 할 일이 있어 Kakao Map API를 사용하여 구현하였습니다.Kakao Map API에는 유용한 기능들이 많아 기능들에 대해 정리해 보았습니다. 더보기※ 개발 환경vscodetypescriptreact Kakoa Map API 사용하기React에서 Kakao Map API를 사용하기 위해서는 먼저 Kakao developers에 애플리케이션을 등록해주어야 합니다. Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 홈페이지에 들어가 우측 상단에 내애플리케이션을 클릭해 줍니다. 2. 애플리케이션 추가하기..
문제 구름LEVEL난이도별 다양한 문제를 해결함으로써 SW 역량을 향상시킬 수 있습니다.level.goorm.io 문제 설명거울 단어는 단어의 오른쪽에 거울을 두고 단어를 비춰봤을 때, 거울 속에 비친 단어가 원래 단어와 똑같은 단어를 의미합니다. 한 알파벳을 거울에 비춰봤을 때 어떤 알파벳으로 보이는지 표로 정리하면 아래 사진과 같습니다. 표에 없는 알파벳은 거울에 비춰봤을 때 쌍을 이루는 알파벳이 없음을 의미합니다.거울 단어의 예시를 들자면 poq나 bidbid와 같은 단어가 해당됩니다. 반면 level이나 dpb와 같은 단어는 level의 경우 e에 대응되는 다른 알파벳이 없기 때문에 거울 단어가 아니고, dpb는 거울로 비췄을 때 dqb로 보이기 때문에 거울 단어가 될 수 없습니다.알파벳 소문자로..
