그 땐 IT활동했지 (41) 썸네일형 리스트형 [멋사10/Session] 2. Github 블로그 개설하기 220329 화 1. 깃블로그 개설하기 오늘 세션은 깃허브 블로그를 만드는 날이다! 맨날 깃허브 블로그를 만들어야겠다 만들어야지.. 했었는데 이번 세션을 통해 만들게 되었다! vuepress를 이용해 만들었다! https://parkjju.github.io/vue-TIL/vuepress/start.html#vuepress-%E1%84%87%E1%85%A2%E1%84%91%E1%85%A9 Vuepress 시작하기 | Today I Learned Static Site Generator 뷰프레스는 Vue 기반의 정적 사이트 생성기입니다. 하나부터 열까지 페이지를 직접 제작할 수도 있지만 현실적으로 어려운 경우가 많기 때문에 다양한 장점을 갖는 정적 사이트 parkjju.github.io 위의 운영진님이 블로그.. [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 👉🏻위 링크로 들어가 키를 발급받장! 👉🏻본인이 필요한대로 내용을.. [멋사10/Session] 1. Github 프로필 꾸미기 220322 화 코드라이언 레파지토리 만들기 오늘은 대표적인 개발자의 협업 툴인 Git 사용법에 대해 배웠다. commit과 push하는 방법을 배우기 위해 본인 계정에 코드라이언 레파지토리를 만들고 몇번의 커밋을 날렸다. 그리고 마크업 단어를 익히기 위해 readme를 꾸몄다! 깃허브 프로필 꾸미기 다음으로 깃허브 프로필을 꾸몄다! 본인 깃허브 아이디로 레파지토리를 판다!(나는 이미 있어서 빨간창이..ㅎㅎ) 그리고 아래 고양이가 하는 말을 읽어보면 해당 레포의 리드미를 꾸미면 본인의 프로필로 사용할 수 있다고 한다! 그리고 리드미를 열심히 꾸민 결과 내 깃허브 프로필은 이렇다! ㅎㅎ저번에 날잡고 (나름) 예쁘게 꾸며두어서 이번 세션은 좀 수월했당ㅎㅎ 다음에는 깃허브 프로필 꾸미는 법에 대한 글도 자세히.. [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 //마커 이미지의 이미지 주.. 이전 1 2 3 4 5 6 다음
