Develop47 RN 카카오 맵 + 공공데이터 API 사용하기 화면 위에 카카오 맵 API 사용해서 webview 형식으로 불러오는 거 까지 성공한 상태에서 추가 작업하기! 상단에 버튼을 두고 버튼 누를 시javascript로 공공데이터포털에서 제공하는 전기차 충전소 제공 API를 사용해보려고 했다. ☑️ 충전소 찾기 버튼 + 드롭다운 리스트 일단 상단에 주변 충전소 찾기 라는 버튼을 하나 두고버튼을 클릭 시 드롭다운 리스트가 나오게 했고사용자가 시/도 선택시 시/군을 선택 할 수 있는 리스트가 활성화되게 했다.각각 시/도와 시/군에는 value값을 둬서 전기차 충전소 API를 호출할 때 사용할 수 있게 했다.충청남도에 해당하는 value 44를 선택하게 되면 cityDistricts에서 값을 가져온다.여기서 다음 드롭다운이 활성화되면서 시/군이 사용자한테 보여지.. 2024. 11. 15. 전기차 충전소 API (6) 마지막 작업 내용 : 팝업창에 나온 전기차 충전소 위치를 충전소 길 찾기로 전달해서 도착지점 설정하기 오늘 작업 내용 : ✅리스트 불러올 때 지도에 마커 전부 표시, 해당 마커 클릭시 팝업창 뜨게하기 오늘 오전엔 팀원들 작업 내용 다 합치고 다시 배포하느라 한게 많이 없다! ✅ 리스트 불러올 때 지도에 마커 전부 표시, 해당 마커 클릭시 팝업창 뜨게하기 기존에 사용하던 코드에서 약간 수정했다.// 마지막으로 생성된 마커를 추적할 전역 변수let lastMarker = null;// displayResults 함수에서 전역 매핑 객체 사용function displayResults(items) { const resultList = document.querySelector(".searchlist u.. 2024. 11. 14. 전기차 충전소 길찾기 (5) 오늘의 작업내용!오늘은 오전에 이 정도로 끝내고,시간 되면 네이티브 하고 안되면 sqld에 집중...! ✅팝업창에 나온 전기차 충전소 위치를 충전소 길 찾기로 전달해서 도착지점으로 설정하기 기존에 리스트를 클릭하면 해당 충전소의 정보를 stationData에 저장해둔걸 최대한 활용했다. kakao map에 도착지 선택시 처리 코드// 도착지 선택 시 처리function selectDestinationPlace(place) { document.getElementById("destinationInput").value = place.place_name; document.getElementById("destinationCoords").value = `${place.x},${place.y}`; .. 2024. 11. 13. 전기차 충전소 API 상세 정보 팝업 (4) 오늘도 돌아온 작업 내용 정리 시간! 오늘은 리스트 클릭 시 해당 지역에 마커가 찍히면서 충전소 상세정보 팝업이 뜨게 하기! ✅ 리스트 클릭 시 해당 지역 마커 + 상세정보 팝업 마지막까지의 작업 내용 ↓ 여기에 이어서 리스트 클릭 시 카카오 지도에 마커를 전달하면서 해당 위치로 이동하게 한 후 팝업창이 나오게 구현했다. 리스트를 만들때 사용했던 lat, lng (위도,경도)를 이용해서 kakaomap에 전달했고 전달받은 값에 마커가 찍히게 했다.위도와 경도 + 각종 팝업창에 띄울 필요한 값들을 생각해서 클릭 시 같이 전달하게 했다.listItem.addEventListener("click", function () { const stationData = { name: displa.. 2024. 11. 12. 전기차 충전소 API 데이터 가공하기 (3) 오늘 작업한 내용들 정리하기! ✅충전소 검색 결과 CSS✅페이지네이션 버튼 누르면 검색 결과의 최상단으로 이동✅각 충전기 상태 업데이트✅이용자 제한 여부 표시✅사용자한테 현재 위치 받아서 카카오지도에 표시하기✅검색결과에 나온 충전소 위치들의 lat,lng(위도,경도) 이용해서 카카오지도에 전달해서 마커표시✅입력 폼 삭제✅충전기 타입에 대한 필터링 부분 적용하기 ✅충전소 검색 결과 CSS 기존에 이렇게 나오는 부분을 정리했다. ✅페이지네이션 / 버튼 누르면 검색 결과의 최상단으로 이동 결과값에 대한 페이지네이션을 주고 좌 우 버튼을 통해 10개씩 표시되게 했다.한 결과값에 대한 list는 30개씩 가져오게 했다! 스크롤 해서 30개의 충전소 리스트를 확인할 수 있다.// 페이지네이션func.. 2024. 11. 11. 네이티브 환경설정 + 카카오 맵 프로젝트 폴더는 잘 만들었고 이제 카카오API 사용을 위한 환경설정 하기! 웹으로 할때는 간단했다. 거의 다 자바스크립트로 했고 그냥 문서 보면서 API 가져와서 쓰면 됐었는데 네이티브로 하려고 하니 각종 기본 설정을 해야 할 것들이 많았다! 일단 환경은 vscode, reactNative 0.72.6, jdk11, node.js 18.20.4 LTS 로 설정 + 테스트 기기는 z플립4 로 설정 하고 시작! 환경설정 카카오 디벨로퍼 공식 문서를 많이 참고하면서 진행했다.https://developers.kakao.com/docs/latest/ko/android/getting-started 기존에 쓰던 카카오 디벨로퍼 플랫폼에서 Android도 추가해줘야했다. 안드로이드 사용하려면1.패키지명 [필수]2... 2024. 11. 10. 이전 1 2 3 4 5 6 7 8 다음
