#javascript
질문nodejs + 네이버api(내위치 파란점) 추가
안녕하세요 이번에 nodejs + 네이버api로 제 위치 주변 약국찾기를 완성하였습니다. 그런데 제 위치를 보여주는 파란점을 추가하면 좋겠다싶어 이리저리 찾아보던중 overlay라는 함수가 필요하더군요. 기쁜마음으로 index.html에서 수십번 스스로 코드 변형 및 추가를 해보았으나 잘 되지가 않았습니다. 혹시 어디를 고치고 추가해야하는지 도움을 좀 구할 수 있을까요?. 저의 기존 index.html은 아래와 같고 사진처럼 보이게 하기 위한 overlay함수를 추가하려고 합니다 <html> <head> <!-- script type는 자바스크립트, src를 넣어 소스는 다른 곳에 있다고 지정 ex) 네이버 open api에 있는 정보--> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xeulgqnc95&submodules=geocoder"></script> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;"> 약국 지도💊 </div> <div id="map" style="width:100%; height:80%"> </div> </body> <script> $(document).ready(async function(){ let XY = await getLocation(); //alert("위도" + XY.lat); //alert("경도" + XY.lng); // reverseGeocode는 비동기형이라 await 추가 await naver.maps.Service.reverseGeocode({ location: new naver.maps.LatLng(XY.lat, XY.lng) },function(status, response){ let result = response.result; let items = result.items; //console.log(items[0].addrdetail.sido); //console.log(items[0].addrdetail.sigugun); let sido_arr = items[0].addrdetail.sido.split(" "); let gubun_arr = items[0].addrdetail.sigugun.split(" "); let sido = ""; let gubun = ""; if(sido_arr.length ==1) { sido = sido_arr[0]; gugun = gubun_arr[0] } else if(sido_arr.length > 1) { sido = sido_arr[0]; gugun = sido_arr[1] } console.log(sido); console.log(gugun); $.ajax({ url: "/pharmach_list", type: "GET", // GET을 통해 밑에 주석처리한 api url 부분 ?뒤부터 눈에 보이게끔 값들을 하나하나 입력해줌 cache: false, //cache는 쓰지 않을거라 false dataType: "json", //dataType은 json으로 받겠다 data: {"Q0": sido, "Q1": gugun, "QT": "", "QN": "", "ORD": "", "pageNo": "1", "numOfRows": "1000"}, success: function(data) { console.log(data); //지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다. var mapDiv = document.getElementById('map'); // 'map'으로 선언해도 동일 //옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다. var mapOptions = { center: new naver.maps.LatLng(XY.lat, XY.lng), zoom: 14 } var map = new naver.maps.Map(mapDiv, mapOptions); data.items.item.forEach(function(it, index){ let dutyName = it.dutyName; let dutyAddr = it.dutyAddr; let dutyTel1 = it.dutyTel1; let dutyTime = ""; if(it.dutyTime1s && it.dutyTime1c) { dutyTime += "월요일: " + it.dutyTime1s + " ~ " + it.dutyTime1c + "<br>"; } if(it.dutyTime2s && it.dutyTime2c) { dutyTime += "화요일: " + it.dutyTime2s + " ~ " + it.dutyTime2c + "<br>"; } if(it.dutyTime3s && it.dutyTime3c) { dutyTime += "수요일: " + it.dutyTime3s + " ~ " + it.dutyTime3c + "<br>"; } if(it.dutyTime4s && it.dutyTime4c) { dutyTime += "목요일: " + it.dutyTime4s + " ~ " + it.dutyTime4c + "<br>"; } if(it.dutyTime5s && it.dutyTime5c) { dutyTime += "금요일: " + it.dutyTime5s + " ~ " + it.dutyTime5c + "<br>"; } if(it.dutyTime6s && it.dutyTime6c) { dutyTime += "토요일: " + it.dutyTime6s + " ~ " + it.dutyTime6c + "<br>"; } if(it.dutyTime7s && it.dutyTime7c) { dutyTime += "일요일: " + it.dutyTime7s + " ~ " + it.dutyTime7c + "<br>"; } if(it.dutyTime8s && it.dutyTime8c) { dutyTime += "공휴일"; + it.dutyTime8s + " ~ " + it.dutyTime8c + "<br>"; } let pharmacy_location = new naver.maps.LatLng(it.wgs84Lat, it.wgs84Lon) let marker = new naver.maps.Marker({ map: map, position: pharmacy_location }); var contentString = [ '<div class="iw_inner">', ' <h3>'+dutyName+'</h3>', ' <p>'+dutyAddr+'<br />', ' '+dutyTel1+'<br />', ' '+dutyTime, ' </p>', '</div>' ].join(''); var infowindow = new naver.maps.InfoWindow({ content: contentString, maxWidth: 440, backgroundColor: "#eee", borderColor: "#2db400", borderWidth: 5, anchorSize: new naver.maps.Size(30, 30), anchorSkew: true, anchorColor: "#eee", pixelOffset: new naver.maps.Point(20, -20) }); naver.maps.Event.addListener(marker, "click", function(e) { if (infowindow.getMap()) { infowindow.close(); } else { infowindow.open(map, marker); } }); }); }, error: function(request, status, error) { } }); }); }); // geolocation은 gps와 관련된 객체, 이 객체가 존재하면 getLocation 실행함 // getCurrentPosition 사용시 현재 위치를 알 수 있다, position 이라는 객체를 통해 현 위치 파악 async function getLocation() { let XY = new Object(); if(navigator.geolocation) { let promise = new Promise((resolve, rejected) => { navigator.geolocation.getCurrentPosition((position) => { resolve(position); }); }); let position = await promise; //위도 position.coords.latitude //경도 position.coords.longitude XY.lat = position.coords.latitude XY.lng = position.coords.longitude } return XY; } </script> </html> 현재는 이렇게 보입니다 https://pharmacy1234.herokuapp.com/ 그리고 저의 이메일입니다! [email protected]
1.1K
1
0
질문웹 사이트 호환 브라우저 확장에 대해
Chrome, Edge만 지원하던 웹 사이트를 추후에 IE가 호환되도록 작업을 해보신 분이 계신가요? 만약 그런 분이 계신다면 어떤 방식으로 작업을 진행하셨나요? 개발 환경:node js, vue js, ejs, javaScript, jQuery
1.1K
1
0
케이플·2023-04-27
IE같은 구형 브라우저에 돌아가도록 가져다가 쓰는 코드를 폴리필(PolyFill)이라고 하는데요.
"IE 폴리필"이라고 이라고 검색해보시면 관련 방법들을 찾아볼 수 있습니다.
질문PHP에서 데이터 베이스 추출 조건을 데이터베이스 내용과 테이블 내용이 일치할경우 데이터베이스내용을 표시하는방법을 알고 싶습니다.
컴퓨터가 일본어 설정이여서 일본어로 하고있습니다. 데이터베이스의 내용도참고해주시면 감사합니다. 테이블을 작성한 후 표의 날짜와 이름을 맞춰서 표안에 셀을 채우는 작업을 할려고 하고있습니다. 현재 셀안에 있는 0,1을 데이터베이스에서 추출뒤 표시를 하고싶습니다. php에서 데이터베이스를 연결한후 테이블을script에들고는 왔지만 그뒤에 어찌해야될지 고민입니다. 예시) a에 0이 데이터베이스에 들어가있기떄문에 0을 표시한다 날짜도 맞춰서 표시하고싶지만 날짜순서는 데이터베이스상에서 순서를 맞춰서 넣기때문에 따로 필요없지않나 생각은하지만 혹시 좋은방법이 있으면 여러분들에 생각을 듣고싶습니다. 밑에 소스는 제가 지금 작성하고 있는부분입니다. <!DOCTYPE html> <html class=center lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href='http://ojt.local/wp-content/themes/jang-child/style.css' type='text/css' media='all'/> <title>ステータスボード</title> </head> <body> <div class="container" align="center"> <h1>cookai</h1> <?php global $wpdb; $result = $wpdb->get_results('select * from wp_m_cookai'); $sampleJson = json_encode($result); ?> <table class="border" border="1"> <script> var id = <?php echo $sampleJson?>; console.log(id); document.write(JSON.stringify(id)); //날짜 document.write('<tr>'); //낳짜공백 document.write('<th>ステータス</th>'); //var array = ['m_bbs','m_cal','m_work','m_bulid']; var array = ['A','B','C','D']; console.log(array); var now_date = new Date(); var week = []; //날짜루프 for(i=0; i<7; i++){ now_date.setDate(now_date.getDate() + 1); //하루돌리기 //날짜표시 document.write('<th>' , (now_date.getMonth() + 1) , '/' , now_date.getDate() , '</th>'); } //날짜 끝 document.write('</tr>'); //상품명 document.write('<tr>'); for(y=0; y<array.length; y++){ document.write('<th>' + array[y] + '</th>'); //상품명0,1임시 표시 for(n=0; n < 2; n++){ document.write('<td>' + n + '</td>'); } document.write('</tr>'); } </script> </table> </div> </body> </html>
1.0K
0
질문spring (egov) safari 파일다운 질문드립니다 ㅠㅠ 도와주세요
전자정부로 웹 개발을 하던중 프로그램 다운 로직을 만들어서 hwp다운을 구현하였습니다 ios와 안드로이드로 테스트를 해보니 안드로이드는 정상적으로 다운로드가 되고 ios 는 파일이 깨저서 html 로 다운 받아지는 현상이 되고 있어서 도움을 구하고자 글을 올립니다! 먼저 userAgent 로 os를 확인해서 iphone ipad 일 경우 XMLHttpRequest(); download.js이용하여 다운로드를 하고 ipad iphone 가 아닐경우 엘스로 이동하여 안드로이드에서 다운이 되게끔 해두었는데 안드로이드에서는 작동이 잘 되나 아이폰 아이패드로 테스트 할 경우 alert(22)먼저 타게되고 1번을 타게 됩니다 그리고나서 개발자모드로 보면 이렇게 오류가 뜨고 있습니다 무엇이 문제 일까요?
1.9K
1
0
sonaki84·2021-03-30
개발자 모드를 보시면 아래와 같이 404 에러가 보인다고 하셨는데요.
HTTP 상태코드 404는 URL 경로가 존재하지 않는 경우에 발생합니다.
즉, http://210.179.59.151/mIoT/mIoT/mobileIdvInfoDtl.do 라는 경로가 존재하지 않기 때문에
비정상적인 결과로 넘어오는 것은 아닌지 확인할...
질문자바스크립트 scroll 관련 질문 (스크롤 시 한번만 이벤트가 일어나도록)
안녕하세요 scroll down 관련해서 event 실행 해보려는데 쓰다가 막힙니다. = ( 마우스로 스크롤 내려서 특정 지점을 지나면 이벤트 1번만 일어나게 하고 싶습니다. 여기서 무엇을 더 추가해야할까요? 지금은 내리거나 올릴때 계속 이벤트가 발생됩니다.
6.7K
1
0
닥터핸·2021-03-12
현재의 스크롤 방향을 변수에 저장해 놓고
마지막에 저장된 방향 과 스크롤 중인 방향을 비교하여 위, 아래 스크롤 시 한번만 실행하게 하시면 됩니다.
아래 예제는 위, 아래 방향이 바뀔때마다 runAction() 함수가 한번만 실행됩니다.
function runAction(direction) {
console.log(directi...
초보자가 풀스택 개발자가 될 수 있는 가장 빠르고 간단한 방법
1단계 – HTML 2단계 – CSS 3단계 – JavaScript 4단계 – React 5단계 – Node.js 6단계 – MySQL 7단계 – MongoDB 8단계 – Git 명령어 9단계 – 프로젝트 만들어서 GitHub에 올리기 축하합니다!! 풀스택 개발자가 되셨습니다!! 취업 준비 완료!!
1.3K
1
2
0
닥터핸·2021-03-04
얼추 동감합니다
마인크래프트 봇 만드는 자바스크립트 소스 Mineflayer 3.0 출시
302 mineflayer - JS.ORG Dedicated to JavaScript and its awesome community since 2015 mineflayer.prismarine.js.org 마인크래프트 좋아하시는 분들 관심 있을 듯요~
1.5K
1
1
0
보브컷·2021-02-23
집에서 마크 한창인 애들한테 뭐 만들어줘야겠네요ㅎ
질문웹앱 브라우져 [홈 화면에 추가] 기능 관련
웹앱 브라우져용으로 개발을 하고 있습니다. 당사 서비스 내에서 버튼을 만들고 해당 버튼을 누를 시 핸드폰 [홈 화면에 추가]를 하고 싶습니다. 하단 이미지 및 설명을 참고해주세요. [이미지 참고] [ AS-IS ] 현재는 웹브라우저 설정에 들어가서 사용자가 직접 [홈 화면에 추가]를 해야했습니다. [ TO-BE ] 서비스내 버튼 클릭만으로 [홈 화면에 추가] 할수 있도록 구현 크롬, 사파리 , 파이어폭스 등 (IOS, Android) 브라우져에서 작동되어야 함. [현재 프론트 개발환경] React Native for Web [ 질문 정리 ] 현재 PWA 방식을 사용하여 Android(Chrome)에서 서비스 내 버튼 클릭으로 [홈 화면에 추가]는 됐으나. IOS(Chrome, Safari)에서는 정상 작동되지 않는 현상이 있습니다. 즉 IOS에서는 수동으로 사용자가 추가해야 한다는 글들이 많은데 위 기능과 관련해서 다른 대체할 수 있는 방법이나 경험 공유해주시면 감사합니다.
7.7K
4
1
0
닥터핸·2021-02-11
PWA는 구글에서 홍보하기 위한 용어이지 공식 용어는 아닙니다.
iOS가 그런 부분에서 제한이 많은 것으로 보이기는 하나 사실 웹앱을 처음으로 선보인 것은 iOS입니다.
iOS는 처음으로 스마트폰 홈화면에서 웹페이지가 전체화면으로 실행되는 방식을 제공했습니다.
현재 iOS는 지금의 HTML5 웹앱이 충분하다고 보기 때문에 PWA...
겍코·2021-02-10
iOS에서는 안드로이드만큼 PWA가 완벽하게 동작하지 않습니다.
다만 아래와 같은 몇 가지 방법을 통해 일정 부분 보완할 수 있습니다.
1. 앱 아이콘 적용하기
앱 아이콘처럼 보이게 하기 위해 link 태그에 apple-touch-icon 을 설정합니다.
<link rel="apple-touch-icon" href="touch-...
2021년에 배워두어야 할 프론트엔드 프레임워크 TOP 3
1위 React React는 수년 동안 계속해서 인기를 얻었으며 프론트 엔드 애플리케이션을 구축하는 데 가장 많이 사용되고 가장 선호하는 JavaScript 라이브러리로 꾸준히 자리를 매김하고 있습니다. State of JS 설문 조사에서 React는 5년 연속 프론트엔드 애플리케이션 구축에 가장 많이 사용되는 JavaScript 라이브러리로 선정되었습니다. 응답자의 80 % 이상이 가장 많이 사용되는 라이브러리로 React를 선택했습니다. 이것은 수년간 React 채택이 꾸준히 증가하고 있음을 보여줍니다. 최근 React 동향 React Hooks 이것은 작년에 React에 추가 된 가장 큰 변경 사항입니다. 많은 개발 팀이 현재 Hooks를 채택했습니다. Hooks는 React 학습을 더 쉽게 만들고 클래스를 사용하지 않고도 기능적인 React 구성 요소를 작성하는 데 도움이됩니다. Hooks에 대해 들어 보지 않았거나 아직 사용하지 않았다면 React Hooks에 대해 모두 알아보십시오. React Dev Tools React Dev Tools는 개발 및 디버깅 도구로 매우 훌륭하고 유용합니다. React는 최근 React 개발 도구의 업그레이드 된 버전을 출시했습니다. 이 릴리스는 Chrome, Firefox 및 Edge에서 사용할 수 있습니다. 이 새 버전은 상당한 성능 향상과 향상된 탐색 환경을 제공합니다. React 개발자라는 프론트엔드 개발자 시장에서 가장 가치가 높을 것입니다. React의 인기가 높아지면서 많은 회사도 React를 사용하여 프론트엔드를 다시 작성하는 방향으로 나아가고 있습니다. 이것은 React 개발자를 위한 많은 일자리를 창출 할 것입니다. 모바일쪽에서도 React는 React Native와 함께 트렌드를 이끌 고 있습니다. 즉, React를 앎으로써 웹 개발과 모바일 개발 작업에 모두 적용할 수 있습니다. 2위 Vue - 간발의 차로 2위 Vue는 출시 이후 프론트엔드 개발에 계속 영향을 미치고 있습니다. Vue는 React와 Angular의 모든 장점을 모두 갖추고 있는 나름의 고유한 프레임 워크입니다. Vue의 채택은 수년에 걸쳐 꾸준히 증가하고 있습니다. 개발자의 41.7 %는 Vue를 사용했고 다시 사용할 것이라고 답했으며 31.3 %는 관심이 있습니다. 또한 Vue의 학습 곡선은 다른 프레임 워크 및 라이브러리보다 훨씬 적습니다. JavaScript, HTML 및 CSS를 이미 알고 있다면 Vue 앱 빌드를 시작하는 것은 매우 쉽습니다. 최근 Vue 기능 Vue 3 릴리즈 2020년 9월에 Vue 3 코어가 공식 출시되었습니다. 작년 Vue의 가장 큰 변화입니다. React Hooks와 같은 기능적 구성 요소 React hooks 개념에서 영감을 얻어 자체적인 방법으로 로직을 기능적 구성 요소로 캡슐화하고 코드 전체에서 구성 요소를 재사용 할 수 있습니다. 이는 Vue 앱에 더 높은 유연성과 확장성을 제공합니다. 3위 Angular - 하향 추세 Angular는 여전히 최고의 프론트 엔드 JavaScript 프레임 워크 중 하나이며 많은 회사에서 사용하고 있습니다. 하지만 매년 Angular를 사용하는 개발자들의 관심과 만족도가 감소하고 있습니다. 개발자의 32.6%가 Angular를 다시 사용하지 않겠다고 답했으며 개발자의 34.8%는 Angular를 배우는 데 관심이 없습니다. 개발자들은 Angular에 대한 관심이 줄어들고 있지만 지난 몇 년 동안 이미 널리 채택되었습니다. 여전히 Angular는 세계에서 가장 많이 사용되는 프런트 엔드 프레임워크 중의 하나이며 Angular 개발자라면 아직 많은 일거리를 찾을 수 있습니다. 다만 바라는 점은 Angular 프레임워크가 프론트엔드 프레임워크의 시장 점유율을 유지하기 위해 더 나은 유연성과 개발자 경험으로 옮겨가길 바랄 뿐입니다. 결론 중요한 건 프레임워크와 라이브러리 및 도구가 지속적으로 진화하고 있다는 점을 지적하고 싶습니다. 당시에 유행 할 수도 있고 몇 년 후에는 쓸모가 없을 수도 있습니다. 개발자로서 하나의 프레임워크를 마스터하는 것에만 집중하기 보다는 개발 철학과 아키텍처에 관심을 가지면서 기본기를 다지시기 바랍니다. 참고 : https://codewithmosh.medium.com/top-frontend-frameworks-to-learn-in-2021-7bb80b1e60f4
3.8K
1
0
질문크롬 console에서 <script> 내용 해석 질문
콘솔에서 보이는 내용입니다. item_id item name price 우측에 입력된 값은 관리자가 html 편집 환경에서 직접 입력했다고 해석할 수 있나요? 예) '1000000750' [HAY/헤이] - - - - - - '84000' 아이템마다 다 입력되어 있어 직접 입력했다기 보다 치환코드 공통태그를 입력한 것으로 판단되는데 console에서 html을 보면 이해가 되지 않습니다. = ( 저렇게 보이는 건 어떤 방법으로 js script에 입력한 건가요?
1.4K
2
0
sonaki84·2021-02-09
<script> 태그의 자바스크립트 코드에 값이 들어가 있는 것으로 보아
운영자가 관리자 페이지에서 입력한 상품 정보가 <script> 태그 안에 들어가도록 프로그래밍을 한 것으로 보여집니다.
예를 들어 만약 PHP 코드로 만든 페이지라면 다음과 같은 방식으로 만들었을 것으로 예상됩니다.
...
$item_id = '100000...
질문자바스크립트 연습 중에 발생한 문제 입니다.
안녕하세요. console에서 잘 돌아가다가 갑자기 addEventListener에서 에러가 납니다. onClick으로 해도 마찬가지입니다. = ( 지웠다 다시 쓰기 / 새로고침 등 다해봤으나 똑같은 결과가 나오고 있습니다. ㅠㅠ
1.6K
2
0
sonaki84·2021-02-02
올려주신 코드 상에서 document.querySelector로 #sign-up-form > button 을 찾지 못해서 발생하는 문제입니다.
HTML 태그 중에 id="sign-up-form" 으로 지정된 태그가 있는지 찾아보고
해당 태그 바로 아래 태그 중에 button 태그가 있는지 확인해보시기 바랍니다.
꺽쇠(>) ...
질문초보 개발자 겸 마케터입니다. 자바스크립트 관련 문의. indexOf에 관하여
안녕하세요 자바스크립트 보고 해석하다가 이부분이 궁금해서 올려드립니다. 예시 indexOf("") 이후에 != -1을 하는 이유가 무엇인가요? 특별한 이유가 있나요?? indexOf까지 설정하면 특정 숫자가 나오는 부분까지는 이해했습니다. != (부정)을 넣고 -1을 넣는 부분에서 해석해보는데 이해가 되지 않습니다. 감사합니다.
1.8K
2
0
sonaki84·2021-02-01
indexOf()를 사용하면 찾고자하는 문자열이 발견된 곳의 인덱스 값을 가져올 수 있습니다.
아래 예는 indexOf()를 사용하는 예입니다.
var myString = "Hello World!";
var searchString1 = "llo Wor";
var positionNumber1 = myString.indexOf(searchStr...