공공 API 사용하여 웹페이지 만들기 -2

node.js

공공 API 사용하여 웹페이지 만들기 -2

dev_summer 2022. 10. 10. 17:25

이 블로그는 내 만족용 블로기이긴 하지만 가끔 인기글 순위를 본다.

공부할때 기록용으로 작성하였던 공공api를 사용한 웹페이지만들기를 꾸준히 많이 보는것 같다.

네이버 블로그를 했을때에도 댓글이 많이 달려서

공공api를 이용하려는 학생분들이 많구나 싶었다.

이번에 학교에서 간단한 데이터활용 웹페이지를 만들어보라고 해서 공공api를 이용하여 지도에 표시하는 웹페이지를 만들어봤는데

한때 여러 블로그들을 보면서 공공 api 활용하려고 했던 나를 생각하며 이번엔 좀 자세히 풀어보아야겠다.

3년전의 나를 격려하는 글이라고 보는게 좋겠다.

공공 오픈 api는 신입 개발자가 포트폴리오를 만들때 참 활용하기 좋은 것 같다.

한창 코로나가 시작될때쯤이여서 면접도 안잡히고 아무것도 안하기엔 너무나도 불안해서 마스크를 살수있는 약국 정보를 실시간으로 받아 프로젝트로 활용 했었는데 이번에는 그와 조금은 비슷한 전동휠체어급속충전기가 있는 곳의 정보를 지도로 표현할 수있는 간단한 페이지를 만들어 보겠다.

활용할 공공 api

https://data.seoul.go.kr/dataList/OA-15813/S/1/datasetView.do?tab=A

열린데이터광장 메인

데이터분류,데이터검색,데이터활용

data.seoul.go.kr

다른 여러 데이터들도 활용이 가능하다.

카카도 지도 api

https://apis.map.kakao.com/web/

1. 지도 생성

카카오 샘플가이드는 참 친절하다.

카카오지도 샘플에서 지도 생성하기를 그냥 복사 붙여넣기했다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>

<body>
	<div id="map" style="width:100%;height:350px;"></div>
</body>

<script>
	// id가 map인 것을 찾아 mapContainer로 받음
    let mapContainer = document.getElementById('map'),
	
    // 최초 짖도의 중심좌표, 레벨 등을 지정
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 3
    };
    
	// 카카오 맵을 띄움
    let map = new kakao.maps.Map(mapContainer, mapOption); 
</script>

*카카오 지도를 띄우기 위해서는 web용 app key를 발급 받아야한다. 또한 url을 열어주어야한다.

2. 위도 경도 받기

내가 활용하고싶은 정보가 적절히 잘 넘어오는지 확인해본다.

ajax로 통신할수도있지만 나는 서버단에서 axios로 통신하여 정보를 받아와 출력 할 예정이다.

let url = `http://openapi.seoul.go.kr:8088/${process.env.SECRET_KEY}/json/tbElecWheelChrCharge/1/1000`;
const data = await axios.get(url, {headers: {"Content-type": "application/x-www-form-urlencoded; charset=UTF-8", Accept: "*/*"}});

* 공공 api 도 마찬가지로 secret key를 받아 요청시마다 이 키를 함께 보내주어야한다.

3. 지도에 마커찍기 + 마커에 클릭 이벤트 달기

카카오에 마커생성하기 부분을 참고하여 서버에서 넘어온 n개의 위도와 경도정보를 통해 for를 돌면서 마커를 찍어준다.

카카오에 마커에 클릭 이벤트 등록하기를 참고하여 클릭이벤트도 함께 달아준다.

let positions = [
    <% for(let i=0; i<list.length; i++){ %>
    {
      title: '<%= list[i].FCLTYNM %>',
      latlng: new kakao.maps.LatLng(<%= list[i].LATITUDE %>, <%= list[i].LONGITUDE %>),
    }<% if(i<list.length-1){%>,<%}%>
    <% } %>
  ];

  var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";

  for (let i = 0; i < positions.length; i ++) {
    let imageSize = new kakao.maps.Size(24, 35);
    let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
    let marker = new kakao.maps.Marker({
      map: map,
      position: positions[i].latlng,
      title : positions[i].title,
      image : markerImage,
      // clickable를 true로 하면 클릭이벤트를 달 수 있다. 
      clickable:true
    });

    kakao.maps.event.addListener(marker, 'click', function() {
      document.getElementById("title").innerText = positions[i].title;
    });
  }

ejs 문법이랑 섞여있어서 조금 헷갈리긴 하지만, 서버에서 가져온 이름, 위도, 경도 정보를 for문을 돌면서 마커를 찍어준 것이고

클릭이벤트도 생성해주는 것이다.

인강 듣다가 공부하기싫어서 적은 뻘글 끝

저작자표시

'node.js' 카테고리의 다른 글

nestjs + serverless + lambda + apiGateway 사용하기 (0)	2022.08.23
nestjs swagger 보안설정하기 (0)	2022.04.06
nestjs passport base64 옵션 사용하기 (0)	2022.02.22
DND 5기 8주차 - 최종발표 (0)	2021.08.29
DND 5기 7주차 - 넥스트 플랜 및 회고 (0)	2021.08.16

현재글공공 API 사용하여 웹페이지 만들기 -2

'왜'라는 질문에 대한 답이 굳건하고 단단해질때 지속성은 늘어난다.

2022개발회고, 사이드프로젝트, 톰캣, docker mysql 시드데이터, jsp, 디앤디, docker초기생성, NestJS, Connection Pool, lambda, rds connection, MySQL, 인프런퇴근길밋업, lambda rds, dnd프로젝트, DND, java, nodejs밋업, 인프랩, 디앤디사이드프로젝트,

Today :
Yesterday :

🐾