![]()
회원가입할때 이용약관 기능을 추가하였다. 1. 이용약관 전체 선택 시 나머지 네 가지 항목의 체크박스가 선택될 것 2. 이용약관 중 필수인 두가지 항목은 무조건 선택되어야 동의 버튼이 활성화 될 것 3. 회원가입 버튼이 동의가 눌러져야 활성화 될 것( 저번 기능에서 추가 ) html 이용약관, 개인정보 수집 및 이용, 위치정보 이용약관(선택), 프로모션 안내 메일 수신(선택)에 모두 동의합니다. 이용약관 동의(필수) 여러분을 환영합니다. Pika 충전소 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 Pika 충전소 서비스의 이용과 관련하여 Pika 충전소 서비스를 제공하는 Pika 충전소 주식회사(이하 ‘Pika 충전소’)와 이를 이용하는 Pika 충전소 서비스 회원(이..
아이디중복 검사와 이메일 인증을 실행하고 성공해야만 회원가입을 할 수 있도록 처음에는 회원가입 버튼이 비활성화 되어 있는 상태에서 성공했을때 활성화 시키는 기능을 구현하였다. 이전에는 아이디 중복 검사와 이메일 인증을 성공했을때 나오는 성공 문자열을 동일한지 비교해서 구현했었는데 script의 다른 함수들과 합치니 오류가 발생하였다. 우선 회원가입 버튼을 비활성화 하고 isEmailValid와 isEmailCodeValid를 false로 선언해두었다. const signupButton = document.getElementById('signup'); signupButton.disabled = true; let isEmailValid = false; let isEmailCodeValid = false; 아..
![]()
전기차 충전소 데이터베이스에 분류되어있는 카테고리 중 지역구 , 운영기관 , 충전기 타입 , 시설 이 있어 이에 따라 분류하여 checkbox를 선택하면 해당 마커만 생성되게 하는 기능을 구현했다. 생각보다 여러가지 기능이 들어가야해서 어려웠던 작업이었다. 우선 지역구별로 분류한 city를 예로 들겠다. 나머지는 동일한 방법으로 진행했다. 1. 데이터베이스에서 해당 카테고리에 해당하는 충전소만 마커 생성되게 하는 코드 function getData1(city) { fetch('/tetest/data') .then(response => response.json()) .then(data => { data.forEach(v => { const lat = v.latitude; const lng = v.longi..
![]()
지난번에는 반경을 직접 코드로 지정해주고 특정 반경 안의 마커만 생성되게 하는 기능을 구현했다. 카테고리에 따라 마커가 생성되는 기능도 같이 넣어준 지도라서 다른 카테고리를 선택했을때에도 반경 안 마커가 그대로 남아있는 것이 문제였다. 따라서 반경을 사용자가 지정할 수 있고, 지정한 반경 안의 마커가 보이기와 숨기기를 통해 생성 제거 될 수 있도록 구현했다. 반경 km 내의 충전소 찾기 숨기기 우선 html 안에 반경 몇 km를 보고싶은지 작성할 수 있는 input text 와 찾기와 숨기기 기능을 하는 함수를 연결하는 버튼을 만들었다. //현재위치 불러내는 api? navigator.geolocation.getCurrentPosition(function (position) { const lat = po..
![]()
회원가입할때 이메일을 통해 본인인증을 하고 인증된 경우에만 회원가입이 가능하도록하는 기능을 구현하기로 하였다. 우선 회원가입시 입력한 이메일주소로 인증 코드를 발송하여 해당 코드와 회원가입하려는 사용자가 입력한 코드가 일치한지를 확인하는 작업이 수행되어야 한다. 이메일 인증을 위해서 이메일 전송 기능 부터 생성했다. 이메일 전송 기능을 사용하기 위해 google 애플리케이션 비밀번호를 발급받아야한다. https://myaccount.google.com/security Google 계정 myaccount.google.com 이후에 본인의 gmail 주소와 발급받은 키를 "" 안에 차례로 작성하여 준다. package com.example.board.email; import javax.mail.Authent..
![]()
전날 Modal의 창이 어둡게 나오고 비활성화 되는 부분과 닫기 버튼을 누르면 Modal창이 닫아지게하는 기능이 안되는 것이 문제였다. option 에 backdrop:false 를 주니 Modal창이 활성화되었다~! 또한 close 기능은 아래와 같이 해결했다. function run(coffeeStore) { console.log(coffeeStore); const options = {backdrop:false}; var myModal = new bootstrap.Modal(document.getElementById('myModal'), options); myModal.show(); $('.close').click(function(){ $('#myModal').css('display','none');..
![]()
목표 : 이전에 만든 다양한 이미지 마커 생성 지도에서 infowindow 의 content에 버튼을 생성하고 그 버튼을 누르면 해당 카페(편의점/음식점)의 제휴 할인 쿠폰이 Modal로 나오도록 구현 Bootstrap 5.1 에서 구현하기 위해 html에 Modal 내용을 작성하고 script 에서 버튼 클릭시 Modal 나타나도록 함수를 설정하여주었다. script의 지도 관련 내용 중 데이터베이스에서 해당 카페 상호명과 같은 데이터를 가져와야하기때문에 동일한 script 안에서 함수를 작성하여줬다. function run(obj) { console.dir(obj); const options = { }; var myModal = new bootstrap.Modal(document.getElementB..
![]()
데이터를 h2 데이터베이스에 저장하는 방법은 쉽지 않았다. insert into excel (id, address, place) values (1, '가평소방서', '경기도 가평군 가평읍 대곡리 213-5'); → insert into 테이블명(컬럼명)values(데이터 내용); 위와같이 입력하면 데이터가 저장되긴 하지만 한개씩 써야한다는 단점이 있다. 엑셀 내용이 거의 500셀이 넘어가서 이렇게 하기에는 무리라는 판단이 들었다. 은인 박 님의 도움으로 엑셀 데이터를 올리는 방법을 알게되었다 Thank you!!! 😉' 박 님의 친절한 설명은 여기에~! https://newdvlp.tistory.com/15#comment14368043 h2에서 csv 열기 코드를 쓰기 전에 먼저 엑셀에서 파일 > 내보내..
![]()
커피숍, 편의점, 음식점 을 카테고리로 분류하여 클릭시 마커 생성 및 infowindow 생성 하는 기능 구현 참고한 Sample : https://apis.map.kakao.com/web/sample/categoryMarker/ 커피숍 편의점 음식점 마커 위에 infowindow는 잘 생성되는데 내용이 바뀌지 않았다. // 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다 function createCoffeeMarkers(lat,lng,content) { for (var i = 0; i < coffeePositions.length; i++) { var imageSize = new kakao.maps.Size(22, 26), imageOptions = { spriteOrigin: new k..
카카오 지도 api 를 사용하며 가장 많이 사용한 기능이라고 생각한다. 내가 쓰고 싶고, 가져왔던 데이터들이 다 주소만 있고 위도 경도가 포함이 되어있지 않아 지도에 표시하려면 주소를 위도, 경도로 바꾸어주는 기능이 꼭 필요했다. 저번 프로젝트때는 검색 기능을 넣어 검색한 주소의 위도 경도만 출력되게 만들었었는데 이번에는 약 500개의 위도, 경도가 필요해서 위도 경도만 출력되게 만들었다. 그 와중에 주소가 잘 못되어 위도 경도가 나오지 않는 경우도 있고 순서가 제멋대로라 excelId를 통해 1번부터 끝번까지 제대로 출력되는지를 확인하고 위도는 result[0].y , 경도는 result[0].x로 출력해서 엑셀에 넣은 후 다시 이를 h2 데이터 베이스에 넣는 작업을 반복했다
카카오 지도 api Sample 에 있는 다양한 이미지 마커 표시하기 가이드를 활용하여 내 h2데이터 베이스와 연결한 후 데이터 베이스에 있는 위도경도로 마커가 생성되게 만들었다. 데이터베이스는 json으로 받아서 활용하였다. 원래 커피숍, 편의점, 주차장 세가지인데 주차장을 음식점으로 바꾸려고 하다 알아보니 여기서 쓴 마커 이미지가 하나의 통일된 이미지에서 가져온것같아서 바꾸지는 못하고 주차장 이름만 음식점으로 변경했다. json으로 가져오면서 시간이 걸려서 그러는지 이유는 잘 모르겠으나 버튼을 눌렀을때 한번에 마커들이 생성되는것이 아니라 두번쯤 눌러야 생성된다. 참고한 가이드 페이지 : https://apis.map.kakao.com/web/sample/categoryMarker/ infowindow..
현재 위치 기준으로 반경 5km 정도를 지정하여 5km 이내의 전기차 충전소 마커만 생성되게 하였다 처음에 script 안에 현재위치 위도경도 값을 가져오는 getCurrentPosition 이 중복 사용되면 안된다고 생각해서 getData함수 안으로 위치를변경하니 지도 생성 자체가 안되는 문제점을 발견했다 위도경도값을 가져오는 부분만 getData 안에도 넣어주고 나머지 if문 등을 감싸주니 현재위치 기반 반경 5km 이내의 값만 가져올 수 있었다
