33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
SUDO를 계속 입력하지 않는 방법을 알 수 있을까요?
초반에 npm install을 할 때 ERR가 떴었는데, 이 부분 찾아보니 모듈 다운 승인을 해줘야 하기 때문에 앞에 sudo를 입력하고 하면 된다고 해서 그 부분은 해결을 하였습니다! 그런데 중간 중간 Install 과정에서 계속해서 ERR가 떠서 그때마다 sudo를 입력하고 하고 있는데, 제목처럼 이런 승인 절차 없이 강사님처럼 바로바로 인스톨 되게 하는 방법을 알 수 있을까요??(강의와 똑같이 진행이 안되는 느낌이 들어서 괜히 불안해서 질문 남겼습니다!! 감사합니다!)
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
var로 선언하는 이유
안녕하세요! 강의 수강 중에 변수선언 키워드로 var를 사용하는 이유를 알고싶어서 질문 남기게 되었습니다.특별한 이유가 없다면 var 대신 let이나 const로 바꾸어서 사용하고싶은데, var키워드를 사용하는 특별한 이유가 있을까요?~
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
Places 코드가 안돼요.
let ps = new naver.maps.service.Piaces(); Places(); 이부분이 안돼요. 검색 기능이 안되요. ㅠㅠ 도와주세요. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <title>myfirstmap</title> <link rel="stylesheet" href="/stylesheets/style.css" /> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=x8m68jepl8" ></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=08431822c52c7e66355e30a38ecf97bc&libraries=services" ></script> </head> <body> <div id="navbar">myfirstmap</div> <div id="infoBox"> <div id="infoTitle">현재날짜</div> <div id="infoConent">2022.08.10</div> </div> <div id="search"> <input id="search_input" placeholder="목적지를 입력해주세요" /> <button id="search_button">검색</button> </div> <div id="current">현재 위치</div> <div id="map" style="width: 100%; height: 100vh"></div> <script type="text/javascript" src="/data/data.js"></script> <script> var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10, }; var map = new naver.maps.Map("map", mapOptions); var markerList = []; var infowindowList = []; for (var i in data) { var target = data[i]; var latlng = new naver.maps.LatLng(target.lat, target.lng); marker = new naver.maps.Marker({ map: map, position: latlng, icon: { content: "<div class='marker'></div>", anchor: new naver.maps.Point(12, 12), }, }); var content = `<div class='infowindow_wrap'> <div class='infowindow_title'>${target.title}</div> <div class='infowindow_content'>${target.content}</div> <div class='infowindow_date'>${target.date}</div> </div>`; var infowindow = new naver.maps.InfoWindow({ content: content, backgroundColor: "#00ff0000", borderColor: "#00ff0000", anchorSize: new naver.maps.Size(0, 0), }); markerList.push(marker); infowindowList.push(infowindow); } for (var i = 0, ii = markerList.length; i < ii; i++) { naver.maps.Event.addListener(map, "click", ClickMap(i)); naver.maps.Event.addListener( markerList[i], "click", getClickHandler(i) ); } function ClickMap(i) { return function () { var InfoWindow = infowindowList[i]; infowindow.close(); }; } function getClickHandler(i) { return function () { var marker = markerList[i]; var InfoWindow = infowindowList[i]; if (infowindow.getMap()) { infowindow.close(); } else { infowindow.open(map, marker); } }; } let currentUse = true; $("#current").click(() => { if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function (position) { const lat = position.coords.latitude; const lng = position.coords.longitude; const latlng = new naver.maps.LatLng(lat, lng); if (currentUse) { marker = new naver.maps.Marker({ map: map, position: latlng, icon: { content: '<img class="pulse" draggable="false" unselectable="on" src="https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png" >', anchor: new naver.maps.Point(11, 11), }, }); currentUse = false; } map.setZoom(14, false); map.panTo(latlng); }); } else { alert("위치정보 사용 불가능"); } }); let ps = new kakao.maps.services.Places(); $("#search_input").on("keydown", function (e) { if (e.keyCode === 13) { let content = $(this).val(); ps.keywordSearch(content, placeSearchCB); } }); function placeSearchCB(data, status, pagination) { if (status === kakao.maps.services.Status.OK) { let target = data[0]; const lat = target.y; const lng = target.x; const latlng = new naver.maps.LatLng(lat, lng); marker = new naver.maps.Marker({ position: latlng, map: map, }); } else { alert("검색결과가 없습니다."); } } </script> </body> </html>
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
애니메이션 관련 질문
안녕하세요. panTo를 통해서 지도를 옮겼는데, 강사님과같은 애니메이션 효과는 나타나지 않습니다. 혹시 어떤 차이점이 있는 것인지 궁금합니다. 감사합니다.
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
(index):121 Uncaught ReferenceError: kakao is not defined at (index):121:10
목적지를 입력하세요 부분에 경희대학교를 포함한 어떤것을 입력해도 zoom이 되기는 커녕 마커도 뜨지 않습니다. f12를 눌러 콘솔에 들어가보면 제목과 같은 오류가 뜨고 (index):121 을 눌러보면 let ps = new kakao.maps.Services.Places(); 에서 new kakao.maps.Services.Places(); 부분에 빨간줄이 그어 있는것을 확인할 수 있습니다. 몇번을 확인해도 코드에서 문제점을 찾지 못했습니다. 어떤 부분에 문제가 있는지 알려주시면 감사하겠습니다!! 혹시 카카오 api 키 발급 및 적용에서 잘못이 있을까여? REST Api를 사용했고 플랫폼에서 Web에 https://localhost:3000도 등록했습니다. 다음은 index.ejs 코드입니다 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>myfirstmap</title> <link rel="stylesheet" href="/stylesheets/style.css"/> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=a6xx165w2v"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript" src="//dapi.kakao.com"/v2/maps/sdk.js?appkey=6ae93f30966074b8be538be3257f65ac&libraries=services"></script> </head> <body> <div id="navbar">myfirstmap</div> <div id="infoBox"> <div id="infoTitle">현재날짜</div> <div id="infoContent">2022.05.03</div> </div> <div id="search"> <input id="search_input" placeholder="목적지를 입력해 주세요" /> <button id="search_button">검색</button> </div> <div id="current">현재 위치</div> <div id="map" style="width:100%;height:100vh;"></div> <script type="text/javascript" src="/data/data.js"></script> <script> var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; var map = new naver.maps.Map('map', mapOptions); var markerList =[]; var infowindowList =[]; for (var i in data){ var target = data[i]; var latlng = new naver.maps.LatLng(target.lat, target.lng); marker = new naver.maps.Marker({ map : map, position : latlng, icon : { content : "<div class='marker'></div>", anchor: new naver.maps.Point(12, 12) }, }); var content = `<div class='infowindow_wrap'> <div class='infowindow_title'>${target.title}</div> <div class='infowindow_content'>${target.content}</div> <div class='infowindow_date'>${target.date}</div> </div>` var infowindow = new naver.maps.InfoWindow({ content : content, backgroundColor : "#00ff0000", borderColor : "#00ff0000", anchorSize : new naver.maps.Size(0, 0) }) markerList.push(marker); infowindowList.push(infowindow); } for (var i = 0, ii = markerList.length; i < ii; i++){ naver.maps.Event.addListener(map, "click", ClickMap(i)); naver.maps.Event.addListener(markerList[i], "click", getClickHandler(i)); } function ClickMap(i){ return function(){ var infowindow = infowindowList[i]; infowindow.close() } } function getClickHandler(i){ return function(){ var marker = markerList[i]; var infowindow = infowindowList[i]; if(infowindow.getMap()){ infowindow.close(); } else{ infowindow.open(map, marker) } } } let currentUse = true; $('#current').click(() => { if('geolocation' in navigator){ navigator.geolocation.getCurrentPosition(function(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; const latlng = new naver.maps.LatLng(lat, lng); if (currentUse){ marker = new naver.maps.Marker({ map : map, position : latlng, icon : { content : '<img class="pulse" draggable="false" unselectable="on" src="http://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png">', anchor: new naver.maps.Point(11, 11), } }); currentUse = false; } map.setZoom(14, false); map.panTo(latlng); }); }else { alert("위치정보 사용 불가능"); } }); let ps = new kakao.maps.services.Places(); let search_arr = [] $("#search_input").on("keydown" ,function(e){ if (e.keyCode === 13) { let content = $(this).val(); ps.keywordSearch(content, placeSearchCB); } }) $("#search_button").on("click", function (e){ let content = $("#search_input").val(); ps.keywordSearch(content, placeSearchCB); }) function placeSearchCB(data, status, pagination) { if (status === kakao.maps.services.Status.OK){ let target = data[0]; const lat = target.y; const lng = target.x; const latlng = new naver.maps.LatLng(lat, lng); marker = new naver.maps.Marker({ position: latlng, map: map }) if (search_arr.length == 0){ search_arr.push(marker) }else{ search_arr.push(marker) let pre_marker = search_arr.splice(0,1); pre_marker[0].setMap(null); } map.setZoom(14, false); map.panTo(latlng); }else{ alert("검색결과가 없습니다.") } } </script> </body> </html>
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
히트맵 구성
지도위에 마커 말고 히트맵을 그리고 싶습니다. 좌표는 Qgis에서 미리 뽑아놨습니다. 방법을 좀 어떻게 알 수 있을까요?? https://navermaps.github.io/maps.js/docs/tutorial-1-visualization-heatmap.example.html
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
이벤트리스너 추가부분 질문..
안녕하세요. 강의 수강하다가 해결못하는 부분이 있어서 질문드립니다. 코드는 똑같은 것 같은데, 인포윈도우를 띄웠을 때, 마커 두개에 두번째 데이터(마지막 데이터)가 표시되는데 원인을 못찾고 있어요.ㅠㅠ 첫번째 for문에서 리스트에 각각 두개가 들어가는 것까진 확인했는데 원인이 뭔지 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>BARRIER FREE</title> <link rel="stylesheet" href="/stylesheets/style.css"/> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=2t3ojlwea9"></script> </head> <body> <div id="navbar">barrier free</div> <div id="infobox"> <form action=""> <div id="infotitle">filter</div> <label for="filter"></label><br> <select name="categories" id="categories"> <option value="all">All</option> <option value="cosmetics">화장품</option> </select> <!-- <input type="submit" value="Submit"> --> </form> </div> <div id="map" style="width:100%;height: 100vh"></div> <script type="text/javascript" src="/data/data.js"></script> <script> var mapOptions = { center: new naver.maps.LatLng(37.48124681977143, 126.95270482812877), zoom: 17 }; var map = new naver.maps.Map('map', mapOptions); var markerList=[]; var infowindowList=[]; for (var i in data){ var target = data[i]; var latlng = new naver.maps.LatLng(target.lat,target.lng); marker = new naver.maps.Marker({ map:map, position: latlng, icon:{ content:"<div class='marker'></div>", anchor : new naver.maps.Point(12,12) } }); var content=`<div class='infowindow_wrap'> <div class='infowindows_title'> ${target.title} <div class='infowindows_store'>${target.store} <div class='infowindows_category'>${target.category} <div class='infowindows_detail'>${target.detail} </div> ` var infowindow = new naver.maps.InfoWindow({ content : content, backgroundColor : "#00ff0000", borderColor : "#00ff0000", anchorSize : new naver.maps.Size(0,0) }) markerList.push(marker); infowindowList.push(infowindow); } for(var i=0; i<2;i++){ naver.maps.Event.addListener(markerList[i],"click",getClickHandler(i)); } function getClickHandler(i){ return function(){ var marker = markerList[i]; var infowinidow=infowindowList[i]; if(infowindow.getMap()){//infowindow가 표시되어있는지 infowindow.close(); }else{ infowindow.open(map,marker) } } } </script> </body> </html> 도움을 받을 수 있을까요..
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
for문 돌릴때 ii 에 대해서 궁금합니다.
안녕하세요. for (var i = 0, ii = markerList.length; i < ii; i++) { // console.log(markerList[i]); naver.maps.Event.addListener( markerList[i], "click", getClickHandler(i) ); } 여기에서 ii가 2개씩 들어가는건 처음보는데요...어떻게 이렇게가 가능한거죠? 그리고 대략적으로 각각의 i들이 markerList.length만큼 이니까 2개씩 들어가있고, 그 아이들이 markerList [i] 에서 하나 사용되고 getClickHandler(i)로 사용되는걸로 이해했는데 맞나요?또.. 이렇게 사용하는거를 뭐라고 쳐야 예시가 많이 나오는지도 궁금합니다! i 하나만으로도 될것같아서 해봤는데 왜 안될까요..? 신기하네요.. ㅠㅠ
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
express 설정
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. zsh: command not found: express 자꾸 이렇게 뜨는데,, 그대로 따라해도 자꾸 express가 설치가 안되는거 같습니다 어떻게 해야하나요?(mac os 입니다)
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
이름공간 문법?
제가 자바 개발을 위주로해서 자바스크립트에 익숙치 않습니다. 아래와 같이 이름공간 처럼 하는 문법이 생소한데 공부하려해도 어떤걸로 찾아봐야 할지 모르겠어요. 어떤 문법 내용으로 찾아야 하는건가요? new naver.maps.Map()
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
마커가 안뜹니다
for문으로 들어가면서 마커가 뜨질 않습니다 그리고 배너도 지도 화면을 클릭하면 사라져서 다시 나오지 않습니다
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
nodemon 설치 에러
설치 중 에러가 뜨는데 어떻게 해결하죠?? 왜 나는지도 모르겠어요
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
AI NAVER API 관련 질문
개발자 페이지 소개 및 지도 api 발급 부분을 보면 네이버 클라우드 플랫폼 콘솔로 들어간 다음 발급받을 수 있는 것으로 보이는데 강의와 달리 저는 ai naver api 부분 자체가 안 떠서 그러는데 api를 어떻게 얻을 수 있을까요?
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
궁금한게 있어요 link로 연결할때 href에 public 경로를 빼야만 적용되는 이유는 뭔가요??
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 현재 node.js를 여기서 처음 사용해보는데 제가 html,css,JS만 배워서 css파일을 연결할때는 프로젝트 폴더안의 같은 경로상에서 다른 경로를 다적어 주었는데 여기서는 오히려 public경로를 적어주면 오류가 나더라구요 왜그런건가요?? (제가 생각나는만큼에 한해서 구글링 해봤는데 못찾았어요)
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
node와 ncm 의 버전 확인이 안됩니다ㅠㅠ
PS C:\Users\김소현> node--version node--version : 'node--version' 용어가 cmdlet, 함 수, 스크립트 파일 또는 실행할 수 있는 프로그램 이 름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다 위치 줄:1 문자:1 + node--version + ~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (no de--version:String) [], CommandNotFoundExcept ion + FullyQualifiedErrorId : CommandNotFoundExce ption PS C:\Users\김소현> npm--version npm--version : 'npm--version' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으 로 인식되지 않습니다. 이름이 정확한지 확인하고 경 로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + npm--version + ~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (np m--version:String) [], CommandNotFoundExcepti on + FullyQualifiedErrorId : CommandNotFoundExce ption 지웠다가 다시 깔아도 보았습니다ㅠ
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
저장후엔 localhost가 열리지 않네요ㅠ
다음 강의들을 보고 작업한다음에 저장 후 vscode를 종료했더니 localhost가 열리지 않습니다..
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
설치가 안됩니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
naver.maps.Map 클래스
new naver.maps.Map('map', mapOptions) 로 지도 유형을 설정할 때, 지도를 삽입할 html div id는 작은따옴표로 가져와야하나요? 클래스 사용시, 어떤 요소에만 작은따옴표를 쓰는지 궁금합니다. 추가로, marker를 생성할 때, icon의 content 속성 정의를 위해 <div class~부분에 큰따옴표를 쓰는 이유가 궁금합니다 작은따옴표, 큰따옴표를 사용하는 일반적인 규칙이 무엇인가요?
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
현재 위치 정보 데이터 호출 불가.
안녕하세요 질문이 있습니다. 현재 위치 버튼을 클릭시 매개변수로 선언한 position안에 값이 없어서 지도상에 현재 위치가 출력이 안되고 있습니다. 크롬상에서 위치권한 전부 허용으로 해놨는데 파라미터값이 비어있는 이유는 어떠한 이유인가요?
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
별다른 오류창 없이 마커가 송출되지 않습니다
index.ejs var data = [ { title: "서울", content: "서울 남산", date: "2021-07-02", lat: 37.515145, lng: 127.035393, }, { title: "서울2", content: "서울 용산", date: "2021-07-20", lat: 37.515000, lng: 127.016676, } ] index.ejs <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>myfirstmap</title> <link rel="stylesheet" href="/stylesheets/style.css" /> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xme01nth90"></script> </head> <body> <div id="navber">myfirstmap</div> <div id="infobox"> <div id="infotitle">현재날짜</div> <div id="infocontent">today</div> </div> <div id="map" style="width:100%;height:100vh;"></div> <script type="text/javascript" src="/myfirstmap/public/data/data.js"></script> <script> var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; var map = new naver.maps.Map('map', mapOptions); for (var i in data){ var target = data[i]; var latlng = new naver.map.Latlng(target.lat, target.lng); Marker = new naver.maps.Marker({ map: map, position: latlng, icon: { content: "<div class='Marker'></div>", }, }); } </script> </body> </html> style css body { padding: 0px !important ; margin: 0px !important ; } #navber { height: 50px; width: 100%; background: #262626; color: white; font-weight: bolder; font-size: 25px; display: flex; justify-content: center; align-items: center; } #infobox { position : absolute; top: 100px; z-index: 10000; background: white; left: 20px; padding: 15px; border: 1px solid rgba(0, 0, 0, 0.2); } #infotitle { font-size: 15px; font-weight: bolder; } .Marker { border: 1px solid black; background: green; opacity: 0.8; width: 24px; height: 24px; border-radius: 50%; }