프론트엔드 아홉 번째 교육 !!!

김윤경·2023년 6월 1일

CSS JavaScript UDR html 멋쟁이사자처럼 언더독레볼루션 조치원도시재생센터 프론트엔드

FrontEnd

목록 보기

7/12

2023.06.01 Today I Learned(TIL)

"Kakaomap app" 만들기

01. 파일 생성

django_kakaomap 이라는 파일 새로 만들기

02. git clone

git clone https://github.com/matt700395/django_kakaomap
➡ django 파일 복사하기

03. 가상환경 생성

✔ 가상 환경 생성
python -m venv venv_django_kakaomap
✔ 복사한 파일 오픈
open folder -> "django_kakaomap

04. 환경 설정하기

F1 -> python:select interpreter -> + enter interpreter path -> 상위 폴더로 이동 -> venv_django_kakaomap -> python.exe 파일 오픈

05. secrets.json 파일 생성

제일 바깥에 secrets.json 파일을 생성하고, 시크릿 코드를 작성한다.

{
    "SECRET_KEY": "django-insecure-+*=ofk8zw264b24fy1c#a-+v=s7&jdi$&%-((xqe)zk&fmox"
}

06. DB 생성

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

07. 파일 브라우저에서 실행하기

Starting development server at http://127.0.0.1:8000/
VSCode에서 Go Live를 누르면 html 파일을 여는 것 뿐, 연결이 되는 것은 아님 !!!

08. index.html 파일 내용 작성

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<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">
  <title>Document</title>
</head>
<body>
  <h1>카카오맵 첫번째 랜딩페이지입니다</h1>
  <!-- 임의로 설정된 크기 width :500px; heigjt : 400px; -->
  <div id="map" style="width:500px;height:400px;"></div>

  <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=890eb7fd7b55736becc3388f215623f7"></script>
  <script>
    var container = document.getElementById('map');
    var options = {
    center: new kakao.maps.LatLng(37.579562, 126.977047), //위도, 경도
    level: 3 // 높이 레벨 (5로 잡으면 멀리서)
    };

    var map = new kakao.maps.Map(container, options);
  </script>
</body>
</html>

📌 가상환경 켜고 끄기

켜기 : python manage.py runserver
끄기 : ctrl+c x 2

09. javascript 내용 작성

<script>
var container = document.getElementById('map');
var options = {
  center: new kakao.maps.LatLng(36.600996, 127.296272), //위도, 경도
  level: 3 // 높이 레벨 (5로 잡으면 멀리서)
};

var map = new kakao.maps.Map(container, options);

// 마커를 표시할 위치입니다 
var position =  new kakao.maps.LatLng(36.600996, 127.296272);

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
  position: position,
  clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정
});

// 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정
// marker.setClickable(true);

// 마커를 지도에 표시
marker.setMap(map);

// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우 생성
var iwContent = '<div style="padding:5px;">조치원역</div>', 
// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element 가능
    iwRemoveable = true;
// removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼 표시

// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
  content : iwContent,
  removable : iwRemoveable
});

// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
  // 마커 위에 인포윈도우를 표시합니다
  infowindow.open(map, marker);  
});
</script>