[Vue] Vue3 기반 프로젝트에서 카카오맵 API를 통해 지도를 뿌려보자. (1) 지도 가져오기
예전에 카카오맵API를 통해 지도를 가져온 적이 있는데.. ( 해당 글 참조 )
당시에는 Vue환경이 아닌 반푼이었다. 그냥 javascript로 가져오고 검색은 ajax나 axios를 쓰기만 하고..
그래서 이번에 컴포넌트, 웹팩, Vuex 같은 것들 복습 하는 겸 Vue3 기반 프로젝트로 카카오맵을 만들어 보려고 한다.
아래 그림의 흐름대로 구현할 생각이다. 이 그림을 잘 기억해두자.
그럼 바로 시작해보자~~ ( API키 갖고 오고 이런 건 생략하겠다. 궁금한 사람은 위 링크에서 참조하자. )
MapHeader.vue
<template>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">검색</button>
</div>
</div>
</div>
</header>
</template>
mapHeader.vue에는 검색기능을 넣을 생각인데, 오늘 글에서는 아무 기능도 안하니 그냥 넘어가도록 하자.
-----------------------------------------------------------------------------------------------------------------------------------
MapBody.vue
<template>
<div>
<div id="kakaoMap"></div>
</div>
</template>
<script>
export default {
data () {
return {
map : null
}
},
mounted() {
const script = document.createElement("script");
script.src = '//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=ca49c8f9d56------c47166311';
document.head.appendChild(script);
/*
스크립트가 로드 되기전에 kakao객체에 접근하여 kakao객체를 찾지 못해 발생하는 에러를
방지하기 위해 스크립트가 로드 된 뒤에 실제 지도를 그리도록 함
*/
script.onload = () => { kakao.maps.load(()=>{
var container = document.getElementById('kakaoMap'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
//eslint-disable-next-line no-unused-vars
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
})
}
},
}
</script>
<style scoped>
#kakaoMap {width:1500px;height:800px; position: relative; left:300px; margin-top: 60px;}
</style>
오늘 가장 중요한 녀석이다. 실제로 컴포넌트가 mounted될 때 카카오맵API를 통해 지도를 가져와 map를 생성하고
지도에 표출해주는 부분.. 그럼 한번 자세히 보자..
기억할 지 모르겠지만, Vue환경이 아닌 일반 javascript환경에서는 <script>를 넣어주기만 하면 됬었다. 아래와 같이..
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[API키 넣는 곳]"></script>
근데 Vue의 컴포넌트에서는 이렇게 할 수 없다.. <script>를 넣을 수 없기 때문.. 그래서 당황..
그래서 javascript의 함수를 이용해서 직접 <script>를 생성해준다.
//스크립트 태그 생성
const script = document.createElement("script");
//스크립트 태그에 src 속성 추가
script.src = '//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=[API키]';
//헤더에 해당 스크립트를 추가
document.head.appendChild(script);
이렇게 하면 헤더에 스크립트가 추가 된다. 그리고 맵을 생성하면 되야 되는데.. 이렇게만 하면 안된다.
왜냐하면, 스크립트 객체가 로드 되기전에 kakao객체를 찾아버리고, 당연히 에러가 난다.
그래서 스크립트 객체가 로드 된 후 kakao객체를 사용할 수 있도록 다음 함수를 추가한다.
script.onload = () => { kakao.maps.load(()=>{
// kakao맵 생성 코드 넣음
});이렇게 하면 스크립트가 로드 된 뒤에 맵을 생성한다.
-----------------------------------------------------------------------------------------------------------------------------------
MapFooter.vue
<template>
<footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
</template>
<style scoped>
.blog-footer {margin-top: 50px;}
p {text-align: center;}
</style>
MapFooter.vue도 그냥 꾸미기용이니, 넘어가도록 하자.
-----------------------------------------------------------------------------------------------------------------------------------
App.vue
<template>
<div>
<map-header/>
<map-body/>
<map-footer/>
</div>
</template>
<script>
import MapHeader from './components/MapHeader.vue'
import MapBody from './components/MapBody.vue'
import MapFooter from './components/MapFooter.vue'
export default {
name: 'App',
components: {
MapHeader,
MapBody,
MapFooter
}
}
</script>-----------------------------------------------------------------------------------------------------------------------------------
main.js
import { createApp } from 'vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import App from './App.vue'
createApp(App).mount('#app')-----------------------------------------------------------------------------------------------------------------------------------
이렇게 까지 하면 아래와 같은 결과화면을 확인할 수 있다..
이제 웹팩을 통해 헤더/바디/푸터를 번들링 해보겠다. 웹팩이 필요 없다는 사람은 그냥 위의 내용만 봐도 충분하다.
웹팩에 대한 기본내용은 ( 해당 링크 ) 를 확인하도록 하자.
웹팩 번들링
==================================================================
1. webpack.config.js 파일 생성
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader'); // .vue 로더 추가
module.exports = {
mode: "development",
// main.js를 가지고 번들링함 ( main.js에 헤더,바디,푸터 컴포넌트를 가진 인스턴스가 존재 및 마운트해주기 때문에)
entry : "./src/main.js",
output : { // entry에서 설정한 js파일을 웹팩에서 번들링한 결과 js파일.
path : path.resolve(__dirname, 'mapBundle'), // 결과물을 저장할 경로,
filename : 'mapBundle.js' // 결과물 이름
},
module: {
rules: [{
test: /\.vue$/,
use: 'vue-loader' // .vue파일 호환 가능하도록 규칙설정
},
{
test : /\.css$/,// css 호환 설정
use : ['vue-style-loader', 'css-loader']
}
],
},
plugins: [ new VueLoaderPlugin() ]
}
이렇게 한 뒤,
아래 명령어를 통해 웹팩을 빌드해준다.
npx webpack --config webpack.config.js
그럼 번들링이 완료되며, mapBundle.js이 생성된다.
test.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.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../mapBundle/mapBundle.js"></script>
</body>
</html>
이렇게 원하는 html파일에 번들링 된 js파일을 넣어주기만 하면 ... 기존과 똑같이 잘 뜨는 것을 확인 할 수 있다~