서론
교회 웹사이트 구현 과정에서 교회의 위치를 지도로 표시하면 좋을 것 같다는 요청이 있었다. 그래서 학기 중 자주 사용했던 카카오 API를 이용하여 react에서 지도를 표시해보고, APP-Key를 env파일에 연결해서 관리하는 것까지 정리해보았다.
순서
- 카카오 디벨로퍼스에서 앱키(app key) 받아오기
카카오 디벨로퍼스에 들어가서 로그인 후 애플리케이션 추가하기를 눌러서 추가를 해준 뒤 자바스크립트키를 복사해놓는다.
(안에 입력해야하는 자세한 내용들은 따로 정리해놓으신 블로그들이 많으니 생략.)
- index.html에 라이브러리를 추가한다.
react 프로젝트 폴더 안에있는 index.html 파일 안에(head태그 안에) 아래와 같이 라이브러리를 입력한다.
<!-- kakao 지도 api -->
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?
appkey=앱 키 입력하는 부분">
</script>자세한 스크립트 및 예제는 카카오 지도 API에 들어가서 설명을 읽으며 확인해보면 된다.
(필자는 지도와 마커만 있으면되서 추가적인 라이브러리는 추가하지 않았다.)
- .env를 이용하여 앱키를 지정해넣는다.
이 부분은 선택사항이기는 하다. 그래서 나도 지금까지는 그냥 직접 코드에 넣었지만 프로젝트의 규모가 커질수록 이런 자잘한 키들은 관리하기 어렵다. 그래서 이번에는 .env환경변수를 이용하여 앱키를 넣어주었다.
다 필요없고 어떻게 쓰는지만 궁금한 사람들은 스크롤을 조금 내리면 나온다.
env ?
.env는 환경변수를 선언하고 관리하는데 도움을 주는 파일이다.
종류는 몇 개 있는데, 일단 내가 자주 사용할 친구들 먼저 정리해놓겠다.
.env.development
개발 환경시 사용하는 환경변수들을 모아놓는 파일. 시작 명령어는 package.json에서 확인 가능(보통 npm start)
.env.production
배포 환경시 사용하는 환경변수들을 모아놓는 파일. 시작 명령어는 package.json에서 확인 가능(보통 npm build). 개발이 끝나고 배포를 위해 빌드 명령어를 쳤을 때 이쪽으로 실행이 된다.
.env
환경 변수들을 모아놓는 파일. 위에 친구들이 개발환경과 배포환경을 나눠놓았다면 이건 둘 다 사용 가능한 변수들을 넣어놓는다. 우선순위가 가장 마지막에 있어서 만약 카카오앱키를 env.development와 .env 둘 다 넣어놓았다면 .env.development에 있는 것으로 실행된다.
그래서 env는 어떻게 쓰는데?
package.json과 같은 위치(깊이?)에 .env 파일을 생성한 후,
REACT_APP_KAKAO_MAP = 앱키
// REACT_APP_원하는변수명 = 변수를 넣어준다.
- SAMPLE을 리액트 형식에 맞춰서 바꿔 넣는다.
내 코드
/*global kakao*/
import React, {useEffect} from 'react'
const Map = () => {
const lat = 위도값;
const lon = 경도값;
// const { kakao } = window;
useEffect(() => {
let container = document.getElementById('map');
let option = {
center: new kakao.maps.LatLng(lat, lon), // 지도의 중심좌표
level: 1 // 지도의 확대 레벨
};
let map = new kakao.maps.Map(container, option); // 지도 생성
// // 마커가 표시될 위치
var markerPosition = new kakao.maps.LatLng(lat, lon);
// // 마커 생성
var marker = new kakao.maps.Marker({
position: markerPosition
});
// // 마커가 지도 위에 표시되도록 설정
marker.setMap(map);
},[ lat, lon])
return (
<>
<div
style={{
marginTop: '60px',
width: '100%',
height: '60vh',
backgroundColor: '#c8c8c8'
//사이즈나 MAP에 대한 사이즈나 위치값은
//css로 조정해주면 된다.
}}
id='map'
>
</div>
</>
)
}
export default MapuseEffect안에 넣어줘야하는 것 말고는 샘플코드와 크게 다른 점은 없었다.
완성!
잘 따라왔다면 위와같이 예쁘게 나올 것이다!
이슈
MAP 코드에러
React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)
개발 중 화면이 안나오면서 개발자 콘솔에 이런 내용이 나왔다. 리액트 hook useEffect를 이용하면서 사용하고있는 state를 마지막에 초기값 배열안에 넣어달라는 내용이다. 나는 state를 사용하고있지 않은데 위와같은 에러가 나와서 사용하고 있는 변수(lat, lon)들을 넣어주었더니 해결되었다.
.env 에러
undefine으로 나오는 경우가 많다고 하는데 나같은 경우는 이것도 그냥 하얗게 아무것도 나오지않았다;;;
아무튼 이럴 땐 3가지를 확인해보자.
- 라이브러리를 설치했는지 확인
npm i dotenv
세상에 이것도 라이브러리가 따로 있을 줄이야,,,,
- 서버 재시작
.env 파일은 처음 시작 및 빌드시에 체크한다고 한다. 그러니 내용을 수정하거나 추가하였을 경우엔 서버를 재시작해보자.
- key를 적는 부분에 process.env넣지 말기
index.html에 키를 적는 부분에는 process.env를 적으면 안된다. 어이없게도 이거 때문에 시간 되게 많이 썼다;;; 다른 컴포넌트에서 불러다 쓸 때는
<h1>{process.env.REACT_KEY_변수명}</h1>이런식으로 적어야 불러올 수 있는데 html에는 안되는 줄 몰랐다...
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?
appkey=%env변수명%">
</script>이런식으로 입력해주어야한다.
