이번주의 Weekly I Learned
이번주는 미니 프로젝트를 만들어 보았다 그중 나는 네이버 지도의 API를 맡게 되었다
네이버 지도 Api 가져오는 법
네이버 클라우드 플랫폼에서 회원가입하기 네이버 클라우드
지도 API 링크에서 이용 신청하기 지도 API
- Application 등록
- 설정 정보 입력
- Application 이름 : 영문, 숫자, - 조합의 원하는 이름 입력
- Maps : Web Dynamic Map와 Geocoding 체크
- Web 서비스 URL : localhost:5000 입력 후 '+ 추가**' 버튼 클릭후 등록
- 지도 API 인증 아이디 확인 ( Clinet ID 와 Client Secret 코드 확인 )
-
Html 파일에 넣어보기
<!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>간단한 지도 표시하기</title> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script> // 네이버 클라우드 아이디 넣어야 할 코드 <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> #map { width: 100%; height: 400px; } </style> <script> $(document).ready(function () { let map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.4981125, 127.0379399), zoom: 10 }); }) </script> </head> <body> <div id="map"></div> </body> </html> -
네이버 지도 자바스크립트 파일 주소 중 YOUR_CLIENT_ID 부분에 콘솔에서 확인한 인증 정보 넣기
-
이렇게 한뒤 localhost:5000 으로 우리가 서버를 돌려주면 네이버 지도가 뜨게 됩니다
미니 프로젝트
-
Github 주소 : MOUNTAIN GO
-
MOUNTAIN GO 이동 : MOUNTAIN GO
느낀점
처음으로 협업하여 만들어본 프로젝트 였다 서로의 생각을 말하면서 역할을 맡아 작업을 하고
코드 를 합치니 하나의 프로젝트가 완성되었다 정말 신기하고 뿌듯했다 물론 에러가 날 방해할때는
너무 힘들었지만 그것도 풀어가는 재미라고 생각해야겠다 앞으로 많은 경험치를 쌓아
멋진 개발자가 되고 싶다
2022.05.09 START