공부/kakao map api5 [kakao map api] 스크립트 분리해보기 이전 글에서 간단히 카카오 지도 api를 사용하는 방법에 대해 알아보았다. 이번에는 index.html파일을 여러 개의 파일로 분할해서 작성하는 방법에 대해 알아본다. index.html처럼 한 파일에 몰아서 작성하면 불편사항이 생기게 되는데, 파일 길이가 길어질수록 보기도 안 좋고 무엇보다 코드를 관리하기 힘들어지기 때문에 프로그래머라면 습관을 기르는 것이 좋다. ctrl+n -> ctrl+s 을 눌러서 새로운 스크립트를 생성하고 workspace폴더에 css파일 형식으로 저장한다. 생성된 스크립트를 클릭해서 오른쪽 레이어로 드래그하면 창이 두 개로 분할된다. index.html에서 head의 부분을 style.css에 붙여 넣고, index.html에는 를 추가한다. 사진 1에서 했던 것처럼 Java.. 2021. 12. 25. [kakao map api] 예제 실행시켜보기 이전 글에서 visual studio code 설치와 Apache http server 설치에 대해서 알아보았다. 길었던 프로그램 설치와 환경설정을 마치고, 이번에야말로 카카오 지도 api를 사용해서 기능을 구현해보는 방법에 대해 알아본다. 카카오 지도 api로 지도를 생성한 다음 컨트롤과 확대/축소, 검색 기능 세 가지 기능을 추가해 볼 것이다. 친절하게도 카카오에서는 api 샘플을 제공한다. https://apis.map.kakao.com/web/sample/ 샘플 중에서 우선 지도 생성하기를 클릭하고 Javascript + HTML을 클릭해서 코드를 복사한다. visual studio code를 실행시킨다음 새로운 파일 하나를 생성 후 저장한다. 저장할 때 파일 이름은 index.html로 만들고,.. 2021. 12. 25. [kakao map api] Apache 로컬서버 등록과정 이전 글에서 카카오 지도 api 라이선스 발급과 플랫폼 등록하는 법을 알아보았다. 이번에는 html 코드를 편집할 수 있는 visual studio code 설치와 Apache http server 설치에 대해서 알아본다. 그런데 사실 나도 이번에 처음 사용하는 거라서 어떤 옵션이 좋은 것인지 모른다. 설치할 때 딱히 체크했던 게 없어서 그냥 설치 파일 받아서 적당히 설치하면 된다. 설치 파일은 다음 사이트에서 받을 수 있다. https://code.visualstudio.com/ 내가 설치한 Apache 버전은 2.4.52다. 그전에 사용하던 버전이 있는 것도 아니고, 딱히 안정성이 필요한 것도 아니라서 그냥 글 작성기준 가장 최신 버전으로 설치했다. https://www.apachelounge.com.. 2021. 12. 22. [kakao map api] kakao developers 등록과정 카카오 지도 api를 사용하면 다양한 작업들을 할 수 있다. 그리고 당연한 얘기지만, 카카오 지도 api를 사용하려면 라이선스를 발급받아야 한다. 글의 시작은 우선 라이센스 키가 어디에 어떻게 필요한지 간단히 설명한다. (부끄럽지만 내가 몰랐던 내용이기 때문) 카카오 지도 api를 사용해서 다음 예시들처럼 만들 수 있다. https://apis.map.kakao.com/web/sample/ 지도 생성하기를 클릭해보면 카카오 맵을 자주 사용하는 사람은 익숙한 카카오 지도와 카카오 지도를 불러오는 코드가 보인다. 하단에 에서 발급받은 APP KEY를 사용하세요 부분에 라이선스 키를 집어넣으면 된다. api를 발급받기 위한 절차는 다음 사이트를 참고하면 된다. 왼쪽 아래 열쇠모양 클릭하면 카카오 개발자 사이트.. 2021. 12. 22. 이전 1 2 다음
