-
복습일지 대신 프로젝트일지 01개발일지 2021. 9. 8. 16:02
이번에 스파르타 코딩 클럽에서 내일배움단 연계로 할 수 있는 프로젝트 챌린지에 합류하게 되었다.
복습일지 관련 내용은 잠시 중단하고 해당 프로젝트에 관한 내용으로 글을 작성할 예정이다!
팀프로젝트를 좋아하지는 않지만 비슷한 강의를 수강한 다른 사람들과 나의 차이를 직관적으로 느낄 수 있는 좋은 기회라고 생각하고 임하게 되었다.
좀 더 세세한 정보를 작성하자면 9/3 ~ 9/17 까지 총 15일간 진행되는 웹제작 팀 프로젝트이다.
사실 회의도 한 일주일에 두세번 정도 하고 개인적으로 빡코딩해도 팀으로는 적당한 정보공유만 할 줄 알았는데, 개발 5일차 기준 현재까지 매일 회의를 진행하고 있으며, 평균 회의시간이 2시간을 넘어가는 굉장한 일정을 소화하고있다.
티스토리에 작성되는 코드, 이슈 및 해결사항은 코드작성을 시작한 5일차의 내용 부터 적기로했다.
사실 회의한 내용은 매일매일 작성하는 노션 개인 개발일지에 잘 적어두고 있다 ^ㅅ^..
-----------------------
5일차- 네이버 클라우드 플랫폼/Map API와 Direction 5
팀에서 구상한 웹을 제작하려면 웹이 지도 기능이 필요했다. 최소 마커구현 최대 경로찾기가 가능한 api가 필요했는데, 카카오는 경로찾기가 안되서 일단 보류 하고 네이버 클라우드 플랫폼 콘솔을 이용해서 네이버 지도 서비스를 가져오기로 했다.
처음 들어가서 멘붕함.. 어..어케하누..?
간략하게 시작 방법을 적자면 로그인 후 콘솔에 들어가면 처음엔 빨간 원으로 표시해둔 api 바로가기가 존재하지 않는다.
이때, 하단 신규상품 API로 들어가면 Application service로 가면 Maps를 찾을 수 있다. 그냥 들어가서 이용신청하면 끝!
원래는 아무것도 없어야 하지만 난 이미 발급받아서 diretions라는 키가 발급되어있다.
아무튼 +application 등록으로 가서 필요한 application을 등록해주면 된다.
생소한게 있다면 하단에 서비스 환경 등록을 해야한다는 점 인데, 웹 기준으로 설명하자면 단순히 개발프로그램에 발급받은 키만 넣는다고 구동되는 것이 아니라 web서비스 url에 등록한 주소와 일치하는 웹에서만 구동되는 환경이다.
셋 중 한개는 무조건 적어야해서 나는 국룰인 localhost:5000을 넣어줬다.
예시 마지막으로 본격적으로 사용하려면 나의 KEY를 알고있어야하는데 이제 플랫폼 콘솔 좌측을 보면 하단에 AI.NAVER API 안 Application이 생겼을 것이다.
원하는 app의 인증정보를 눌러서 키를 볼 수 있다.(Client ID, Client Secret)
map은 정상적으로 구동을 하는가? -> yes
marker는 잘 찍히는가? -> yes
길찾기는 잘 되는가? -> no
간단하게 map을 설정하는 코드 물론 상단 어딘가에 키값과 map을 불러오는 script가 있다.
참고 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
<html> <head> </head> <body> <div id="map" style="width:60%;height:800px;"></div> <script> <!-- 지도 기본 --> //지도 기본설정 var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(36.472796, 127.752943), zoom: 8, zoomControl: true, //줌 컨트롤의 표시 여부 zoomControlOptions: { //줌 컨트롤의 옵션 position: naver.maps.Position.TOP_RIGHT } }); </script> </body> </html>marker는 좌표를 이용해서 찍었다. 좌표는 구글맵을 이용해서 가져왔다.
<html> <head> </head> <body> <div id="map" style="width:60%;height:800px;"></div> <script> <!-- 지도 기본 --> //지도 기본설정 var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(36.472796, 127.752943), zoom: 8, zoomControl: true, //줌 컨트롤의 표시 여부 zoomControlOptions: { //줌 컨트롤의 옵션 position: naver.maps.Position.TOP_RIGHT } }); <!-- 마커를찍을장소 --> const locations = [ { num: "01", place:"만남의광장(부산)", lat: 37.460121, lng: 127.041890 }, { num: "02", place:"죽전휴게소(서울)", lat: 37.332380, lng: 127.104788 }, { num: "03", place:"망향휴게소(부산)", lat: 36.855352, lng: 127.180854 }, { num: "04", place:"옥산휴게소(부산)", lat: 36.657709, lng: 127.369801 } ] for (var i = 0; i < locations.length; i++) { var marker = new naver.maps.Marker({ map: map, title: locations[i].place, position: new naver.maps.LatLng(locations[i].lat, locations[i].lng), }); </script> </body> </html>for문으로 때려넣기 쌉가능,, 하지만 궁극적인 목표는 location에 한땀한땀 손으로 넣는 것이 아닌 DB를 이용해서 자동으로 넣어주는 방법을 생각 중이다.
길찾기 이슈--
우선 길찾기는 html로 불러오는 script 형식의 api가 아니었다. http get으로 가져와야했음..
놀랍게도 가져오는데 성공을해서, 길찾기도 성공했지만 몇가지 문제가 존재한다.
1. 좌표를 입력해서 길찾기를 시키면 '꽤 많이' 근처에 도로가 없다는 2번 오류가 출력된다.
2. 여차저차 길찾기를 진행하면 좌표값이 json으로 반환되는데, 해당 좌표값을 통해 시각화 할 방법을 모르겠다.
3. 제일 큰 문제인데 html과 http를 연결해서 사용하는 법을 모른다.(http는 ㄹㅇ 처음열어봄)
튜터님께 도움을 요청했으니 잘 해결되길 바란다!
direction5와 direction15의 차이점 > 경유지 5개 가능과 15개 가능의 차이
https://naveropenapi.apigw.ntruss.com/map-direction/v1/driving?start=출발좌표&goal=도착좌표&option=방법옵션" X-NCP-APIGW-API-KEY-ID:>>client id<< X-NCP-APIGW-API-KEY:>>client secret<<일단 알아낸 directions 5 http구성은 위와같이 단순하며, 구동하면 엄청난 json파일이 작성된다.
지금 생각하기론 해당 json을 html로 가져와서 저 좌표데로 그리기를 시행하면 경로가 그려질 것 같은데, 한번 해봐야겠다. 어려월...
일단 directions 5는 여기까지 두고 DB 만들기를 지원하러 가야겠다.
'개발일지' 카테고리의 다른 글
로딩중... (0) 2021.09.16 복습일지 대신 프로젝트일지 02 (0) 2021.09.14 복습일지 04 (0) 2021.09.05 복습일지 03.5 (0) 2021.09.05 스파르톤 생존일지 (21:00~06:00) (0) 2021.09.04