그 땐 IT활동했지/그 땐 영일영 근무했지 (20) 썸네일형 리스트형 [010/Django] secret.json | API KEY 숨기기 1. 문제상황 2022.04.19 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Naver API | 블로그, 카페 글 크롤링 해오기 이전 포스팅을 보면 Naver API KEY를 view에서 그냥 변수에 할당해 사용했다. 하지만 API KEY를 이렇게 관리하면 안 된다! 다른 사람이 악의적으로 이용할 수도 있기 때문이다. 그러므로 이러한 현상을 막기 위해 API KEY를 secret.json으로 관리하는 법을 알아보자! 2. API KEY 관리 secret.json 파일 만들기 👉🏻먼저 secret.json 파일을 만든다. { "Naver_id": "본인 API KEY", "Naver_secret": "본인 SECRET KEY" } 👉🏻이러한 형식으로 API KEY를 적어준다... [010/API] Naver API | 블로그, 카페 글 크롤링 해오기 1. 문제상황 우리 사이트에는 각 핸드폰 대리점마다 상세페이지가 있는데 이 상세페이지에 해당 대리점의 인터넷 검색결과를 불러오려고 한다. 이를 위해 Naver API를 활용하게 되었다! (공식 문서 참고! https://developers.naver.com/docs/serviceapi/search/cafearticle/cafearticle.md#%EC%B9%B4%ED%8E%98%EA%B8%80) 2. Naver API 활용하기 키 발급받기 API를 활용하기 위해 키를 발급받자! https://developers.naver.com/apps/#/register 애플리케이션 - NAVER Developers developers.naver.com 👉🏻위 링크로 들어가 키를 발급받장! 👉🏻본인이 필요한대로 내용을.. [010/API]Kakao Map API | 로드뷰 넣기 1. 문제상황 우리 사이트는 각 대리점별로 위치와 리뷰를 담은 디테일 페이지가 있다. 이번에는 이 디테일 페이지 맨 위에 로드뷰를 띄워서 위치를 더 확실히 알려주려고 한다. (공식문서 참고!https://apis.map.kakao.com/web/sample/roadviewOverlay1/) 2. 매장 detail 페이지에 매장 로드뷰를 띄워보자! url.py urlpatterns = [ ... path('', views.detail, name="store_detail"), ... ] 👉🏻먼저 매장 디테일 페이지로 가는 url을 파주자! '' 자리에 매장 id값을 넣어주어 각 매장의 디테일 페이지로 이동할 수 있다. views.py def detail(request, pk): store = get_obj.. [010/API] Kakao Map API | 인포윈도우 커스텀하기 1. 문제상황 현재 현위치 인포윈도우(말풍선)는 위 사진과 같다. 딱 봐도 예쁘지 않다.ㅋㅋㅋㅋ 그래서 인포윈도우를 커스텀하려고 한다! 일단 현위치에 마커를 찍는 방법은 아래 포스팅을 참고하자! 2022.04.12 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 현위치 표시하기 (공식문서도 참고!https://apis.map.kakao.com/web/sample/removableCustomOverlay/ ) 2. 현위치 인포윈도우 꾸미기! //map.html // 지도에 마커와 인포윈도우를 표시하는 함수입니다 function displayMarker(locPosition, message) { var imageSize = new kakao.maps.Si.. [010/API] Kakao Map API | 통신사 카테고리 넣기 1. 문제상황 2022.04.13 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 마커 커스텀하기 통신사별로 마커를 출력하기는 했는데(↑위 링크 참조!) 어떤 마커가 무슨 통신사를 의미하는지 파악하기 힘들다. 그래서 각 마커가 무엇을 지칭하는지 카테고리를 달기로 했다! (공식문서 참고하기! https://apis.map.kakao.com/web/sample/categoryMarker/) 2. 각 마커별로 범례를 달아보자 1단계 HTML&CSS SKT KT LGU+ 👉🏻먼저 HTML에는 카테고리를 표시하는 코드를 적어보자! ul과 li tag를 이용해서 만든다. .map_wrap { position: relative; width: 100%; height.. [010/API] Kakao Map API | 마커 커스텀하기 1. 문제상황 현재는 카카오에서 제공해주는 위의 기본마커를 사용하고 있다. 그런데 핸드폰 대리점들은 각 통신사별로 표시하고 싶다! LGU+, SKT, KT 이렇게 나뉘어져 있는데 대리점들을 이 통신사별로 나눠 다른 마커로 표시하려고 한다. 2. 지도에 통신사별로 다른 마커 찍기 1단계 이미지 준비 👉🏻일단 먼저 이미지를 준비하자! 나는 static에 mapmarker라는 디렉토리를 파서 마커 이미지들을 저장했다. (ALLmarker는 현위치에 사용할 마커이다.) 💡static이란? 정적 파일들로 개발자가 프로젝트를 진행할 때 사용하기 위해 미리 서버해 저장해둔 파일을 지칭한다. 이번 예시처럼 이미지를 저장하기도 하고 css, js 파일들을 저장하기도 한다. //map.html //마커 이미지의 이미지 주.. [010/API] Kakao Map API | 현위치 표시하기 1. 문제상황 카카오가 제주도에 위치해서 그런지 항상 기본 위치는 제주도로 나왔다ㅋㅋ 그래서 우리는 이 기본 위치를 현위치로 설정하기로 했다! (공식 문서도 참고! https://apis.map.kakao.com/web/sample/basicMarker/) 2. 현위치를 기본 위치로 만들어보자! 1단계 geolocation API //map.html function currentLocation() { // HTML5의 geolocation으로 사용할 수 있는지 확인합니다 if (navigator.geolocation) { // GeoLocation을 이용해서 접속 위치를 얻어옵니다 navigator.geolocation.getCurrentPosition(function(position) { var lat.. [010/API] Kakao Map API | 가게 위치 ajax로 불러오기 문제 상황 db에 있는 핸드폰 대리점들은 대략 3000개가 넘어간다. 당시 코딩 능력이 부족했던 나는 아주 정직하게 코딩했다. view에서 db의 모든 핸드폰 대리점들을 불러와서 template으로 보낸다. template내에서 JavaScripts코드를 이용해 지도 영역 내에 해당하는 대리점들 정보만 골라낸다. (3000개가 넘어가는 대리점들을 for문에 돌리는 무리수..) 이러한 방식으로 지도에 마커를 생성하니 당연히 너무 느릴 수 밖에 없었다. 게다가 지도를 움직일 때마다 지도 영역이 바뀌고 바뀌는 지도 영역에 따라 3000개 대리점을 다시 for문 돌리고 마커를 생성하니 지도 관련 기능을 만질 때마다 속도가 느렸다. 개선의 필요성을 느꼈고 ajax를 활용해 개선하기로 했다. 원래 코드 #views.. 이전 1 2 3 다음
