- 카카오 map api 키 발급 및 사이트 도메인 등록
이 과정은
https://apis.map.kakao.com/web/guide/
사이트대로 진행하면 된다.
api란 프로그램 사이를 통신하게 해주는 인터페이스. 우리가 사용하는 node 서버는 웹 api 서버이다.
이번에 사용할 카카오맵 api 서비스는 map 기능을 제공하는 api이다.
먼저 사이트에 들어가 로그인하고, 애플리케이션을 추가한다.
애플리케이션을 추가하는데, 아이콘은 필수값이 아니다. 앱 이름과 사업자 명은 본인 마음대로 짓자.
만든 애플리케이션을 클릭하면 다음과 같은 창이 뜬다.
이때 아래 플랫폼 설정하기 버튼을 누르고, 우리는 웹 플랫폼을 만들 거니까 웹 플랫폼 등록을 누른다.
사이트 도메인에 우리가 이때껏 열었던 서버인
http://localhost:3000
을 입력한다.
다시 이전 페이지로 돌아가 javascript 키를 복사한다.
이제 리액트 앱으로 map을 열 것이기 때문에, 워크스페이스를 구동한다.
kakaomap이라는 워크스페이스를 만들고, cmd를 통해 해당 폴더에 create-react-app maptest를 실행한다.
설치가 끝나면 vscode에서 다시 kakaomap 워크스페이스 폴더를 열고, maptest를 확인한다.
이 리액트 내부에서 외부 api인 카카오맵을 불러오기 위해, 실제 지도를 그리는 javascript api를 불러온다.
그리고 public 폴더 index.html 헤더 안에 넣는다.
다음 src 폴더 app.js에서 지도 담을 영역을 위한 javascript 문장을 넣는다.
이제 도메인 사이트에 지도가 보이게 다음 코드를 추가한다.
cd maptest > npm start 명령어를 통해 서버를 실행하면 다음과 같은 창이 뜬다.
- 확진자 데이터는 JSON 형태로 변환
- react 페이지에 카카오 map 나타내기
- 확진자 데이터를 읽어 카카오 map 위에 표시하기.
