일단 API 키를 발급 후도메인 등록까지 마쳤으면 지도를 띄우는 과정 중 절반은 해낸거나 마찬가지임
그게 없으면 아예 지도를 띄울수없응게
다음과정은
html에 발급받은 API key를 넣고 카카오맵 api를 호출하는 자바스크립트를 호출해준다
html div에 지도 map을 추가해준 다음, 자바스크립트 코드에 map 객체를 생성해주면 끝
*API 키는 카카오에 등록한 사용자가 맞다는 일종의 인증 방법
대충 글로 적어본 과정은 위와같으며 아래는 코드에 적용한 방법
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>페이지 타이틀。</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width:700px;height:500px;"></div>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ajax-cross-origin.min.js"></script>
<!-- 기본 지도 app key -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APP API KEY=발급받은 키 입력&libraries=services"></script>
<!-- 기본 지도 기능에서 클러스터 추가 사용 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APP API KEY&libraries=services,clusterer,drawing"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
위처럼 html 파일을 작성하면 width 너비가 700, height 높이가 500인 지도를 웹페이지에 표출할수있다
(아래 자바스크립트 코드도 작성해야됨)
지도를 사용자 디바이스 너비에맞게 css를 조절하는게 좀 까다로웠는데
일단 지도 띄우는것만 시도해보는 것이므로 그냥 고정값을 줘봤다
+아래에 변형해본 css를 추가해보았으니 참고해서 응용해보자
기본 지도 app key 부분은 카카오맵 지도 api에서 제공하는 기본적인 기능을 사용할 때 호출하는 방식이고
아래의 기본지도 기능에서 클러스터를 추가했다는 부분은 지도 api에서 제공하는 기능들 중
좀더 심화된 기능을 사용할 때 사용한다
따라서 기본적인 지도의 경도 위도, 주소등의 정보만 이용할 때는 서비스만 사용해도 되고,
지도 데이터를 시각화하거나 지도 위에 뭔가 그려내고자 할 때는 아래의 ,clusterer,drawing 를 추가해주면 된다
javascript
//지도 생성에 사용
var map;
var mapContainer;
window.onload = function() {
mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
map = new kakao.maps.Map(mapContainer, mapOption);
}
페이지가 로드될 때 지도 객체를 새로 생성하게 함
페이지가 로드되고, 생성된 지도에 클릭 이벤트, 지도 위 마커 생성 등 지도의 기능을 계속 사용하기 위해
전역으로 map, mapcontainer를 선언하여 사용했다
mapOption 객체
center는 경도 위도 좌표를 주고 지도를 생성할 때 디폴트로 열리는 위치를 선언함
level 지도의 확대, 축소된 정도 (1~14까지 가능, 1이 최대 확대된 정도)
지도 클러스터 기능 예시
이런식으로 지도에 묶어서 보여줄수있는게 클러스터(집단) 기능
아래는 내가 임의로 css를 이것저것 추가해보고 지도 사이즈를 내가 사용하기 적합하게 바꾼 내용
/* 지도 */
.map_wrap {
position:absolute; overflow:hidden; width:100%;
height:1024px;
}
사실 높이부분이 아직도 마음에 안드는데 이건 내가 위아래에 다른 요소를 추가한다고 찌그러진거라
일단 너비는 위와같이 참고하면 디바이스 너비에맞게 100%를 유지한다
이 css를 적용하려면 html map에 style 대신 class="map_wrap"를 적용해주면 됨
XML(Extensible Markup Language) XML 구문은 매우 간단하고 구조적이어서 익히기 쉽고 사용하기 쉽다
간략 요약
XML 선언법
1. XML문서의 맨 앞에 선언해야된다 2. 맨 앞에 적은 <xml>태그를 XML 프롤로그라 하며, 이때 사용하는 xml 태그는 소문자로만 적는다
XML Prolog(프롤로그) 1. 버전을 명시한다 2. 문자 인코딩을 설정하며, 기본값은 UTF-8이다 3. 파싱할 외부 문서 여부를 설정할 수 있다
상세 내용
XML 문법
1. 모든 요소의 부모요소인 root element를 하나만 갖는다 2. 모든 xml 태그는 닫는 태그가 필요하다 3. 태그는 대소문자를 구별한다 4. 상위 단계의 태그보다 하위 단계의 태그가 먼저 닫힌다 5. 태그의 값은 따옴표(")로 감싸야 된다 6. html과 달리 띄어쓰기를 인식한다
XML 기초
XML 문서들은 모든 elements들의 부모 요소인 root element를 하나만 가져야 한다 모든 XML 태그들은 닫는 태그가 필요하다
태그들은 대소문자를 구별하며(case sensitive) 부모 태그는 자식태그보다 나중에 닫는다
예시)
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
<p><strong>이 구문은 오류를 발생합니다.</p></strong>
<p><strong>이 구문이 정확한 순서입니다.</strong></p>
※<p>가 부모태그라면 <strong>이 자식태그로, <strong>태그가 먼저 닫혀야된다
아래의 XML 구문에서 root element는 note 이다
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
태그의 값은 따옴표로 감싸주어야한다
<student name=abc> // 오류
<student name="abc"> // 정상
const str = '주소 : 서울특별시 강남구 삼성동 영동대로 513';
var sl = str.length;
console.log(str.substr(5,sl-5));
// expected output: "서울특별시 강남구 삼성동 영동대로 513"
//str.substr(A,B);
//A: str 문자열 중에서 자를 위치 (배열처럼 0부터 시작)
//B: A에서부터 몇개의 문자를 자를것인지 개수 입력
예를들어, http://a.com?name=egoing&job=programmer 에서 &job=programmer 중 '&'는 하나의 파라미터가 끝나고 다음 파라미터가 온다는 의미이다.
그런데 다음과 같이 job의 값에 &문자가 포함된다면 시스템은 job의 값을 제대로 인식할수 없게 된다. http://a.com?name=egoing&job=programmer&blogger
이런 문제를 회피하기 위해서 다음과 같이 치환해준다. http://a.com?name=egoing&job=programmer%26blogger 그럼 시스템에서는 %26을 &로 해석하여 원래의 의도대로 값을 해석할 수 있게 된다. 이러한 처리를 이스케이핑(escaping)라고 부른다.
encodeURI 사용예시
활용 예시
//주소 url인코딩 네이버 지도 API 응용본
const uri = 'nmap://place?lat='+lat_+'&lng='+long_+'&name='+Addr+'&appname=www.naver.com';
const encoded = encodeURI(uri);
//인코딩 값 테스트용 출력
console.log('주소 url 인코딩 : ' +encoded);
기존에 사용하는 lat_, long_, Addr 변수들을 사용하여 변수 uri에 넣은 다음
//이미지 업로드 파일
//imgUpload.js
const multer = require('multer')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploadImg')
//이미지 업로드시킬 폴더 위치
},
filename: function (req, file, cb) {
cb(null, file.originalname)
//서버에 저장할 파일 명
}
})
var upload = multer({ storage: storage })
//storage는 업로드 될 폴더 위치
module.exports = {
upload
};
서버에서 post 요청 저리하는 부분
main.js
//server.js
var express = require('express')
//이미지 업로드
var img = require('./imgUpload.js')
//파일 1개를 업로드 하는 경우
app.post('/upload', img.upload.single('file'), function (req, res, next) {
console.log('이미지 업로드 ㅇㅋ');
})
클라이언트에서 post 요청으로 이미지 서버로 넘기기
index.js
//서버에 이미지 업로드 post 요청
//index.js
function imgUpload(){
console.log('이미지 업로드 한 경우');
let formdata = new FormData();
var file = document.getElementById('imgUpload').files[0];
formdata.append('file', file);
fetch("/upload",{
method : "POST",
body: formdata
})
}
