리액트기반으로 공공데이터와 지도API 연동03

----주요실습 순서(아래)------------------------------------------------------------------------

1 구름IDE에서 리액트 컨테이너 생성 후 npm install 로 기본 패키지 설치 후 리액트 홈 실행하기.

2 1).공공데이터 포털에서 API 활용신청하기 및 2).카카오 개발자센터에서 지도 API 애플리케이션 생성하기.

3 구름IDE에서 공공데이터 포털의 API 데이터를 노드js API의 서버기능 으로 데이터 가져오기.

4 리액트에서 카카오 맵 API 샘플코드를 사용하여 클래스형 컴포넌트 생성 후 라우터 기능으로 메뉴에 추가하기.

5 이전에 생성한 노드js API 데이터를 리액트 카카오 맵 클래스형 컴포넌트에 바인딩해서 지도에 표시하기.

6 클래스형 카카오 맵 컴포넌트를 참조하여 함수형 컴포넌트를 생성 후 노드js API 데이터를 바인딩해서 지도에 표시하기.

7 npm빌드 대신 yarn 빌드를 사용하기 위한 yarn 설치 및 빌드로 build 폴더의 index.html 생성하기.

8 컨테이너 나가기 후에도 노드js 서버 실행을 유지하기 위한 forever 설치(node 버전 업드레이드 필수) 및 forever 로 앱 실행하기.

------------------------------------------------------------------------------------------------------

3 구름IDE에서 공공데이터 포털의 API 데이터를 노드js API의 서버기능 으로 데이터 가져오기.

- 프로젝트 최상위 루트폴더에 api-server.js 파일을 생성한다.

- 생성한 파일에 사용할 공공데이터 포털에서 Nodejs 용 생플코드를 복사한다.(아래)

- 공공데이터 포털 사이트 오픈API 개발계정의 상세페이지 화면으로 이동한다.

- 위 상세페이지 하단 Nodejs 코딩 샘플을 복사한다.(아래)

- api-server.js 의 코드에 url 작동 확인용 /api 와 데이터를 가져올 /openapi/getdata 매핑함수를 추가한다.(아래)

- 노드js API 서버가 4000포트 사용하게 처리하고, 아래 코드에서 사용할 외부 모듈 3가지를 설치한다.(아래)

- install cors request xml-js (이렇게 3개를 한번에 설치할 수 있다. 해당 모듈에 대한 설명은 코드 내의 주석을 참조한다.

var express = require('express');
var app = express();

app.listen(4000, () => {
    console.log('노드js서버 시작: ', 4000);
});

app.use('/api', function(req, res) {
    //res.end("샘플출력");
    res.json({jsonData:'jsonData'});
});
var cors = require('cors');//리액트와 노드js간 데이터 통신에 보안 처리모듈 사용 npm install cors
app.use(cors( //도메인 대신에 * 로 하면 모든 도메인에서 허용된다. 보안상 도메인을 지정하는것이 안전하다.
    {
	  origin: ["https://react-basic-fekuw.run.goorm.io","https://server-basic-fekuw.run.goorm.io/"], 
	  methods: ["GET", "POST"]
	}
));
/*
CORS란?
HTTP header에 추가적인 정보를 추가하여 현재 웹페이지가 웹페이지를 받은 서버(자기 자신)뿐만 아니라
다른 서버에서 요청한 정보도 허용할 수 있도록 해주는 것이다
*/
/* GET API page. */
app.use('/openapi/getdata', function(req, res) {
    console.log('/openapi/getdata 호출됨.');
	keyword = req.query.keyword || '천안시';//리액트js 에서 보낸 검색어를 지정한다.
    pageNo = req.query.pageNo || '1';//리액트js 에서 보낸 페이지번호를 지정한다.
	console.log(keyword);
	var request = require('request');//npm install request
	var convert = require('xml-js');//npm install xml-js
	var url = 'http://openapi.kepco.co.kr/service/EvInfoServiceV2/getEvSearchList';
	var queryParams = '?' + encodeURIComponent('serviceKey') + '공공데이터포털에서 발급받은 서비스키입력'; /* Service Key*/
	queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent(pageNo); /* */
	queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /* */
	queryParams += '&' + encodeURIComponent('addr') + '=' + encodeURIComponent(keyword); /* 천안시 고정값 대신 keyword */
    console.log(queryParams);
	request({
		url: url + queryParams,
		method: 'GET'
	}, function (error, response, body) {
		console.log('Status', response.statusCode);
		console.log('Headers', JSON.stringify(response.headers));
		console.log('Reponse received', body);
		/*
		convert에서 xml2json이라는 함수를 이용해 xml -> json으로 데이터를 파싱했고, 
		그에 따른 파라미터로 현재 xml 데이터 형식인 body변수를, compact(데이터 간소화 여부), spaces(들여쓰기 포인트)를 이용하여 파싱
		*/
		var xmlToJson = convert.xml2json(body, {compact: true, spaces: 4});
        res.end(xmlToJson);
	});
});

- 구름IDE 터미널에서 위 api-server.js 를 실행한다.(아래)

- 구름IDE 컨테이너 프로젝트 속성에서 노드js 4000 포트에 대한 도메인을 추가한다.

- https://server-basic-fekuw.run.goorm.io  (아래 붉은색 사각형 부분을 순서대로 채워 넣는다)

- 위 화면에서 하단의 노란색 부분을 클릭하면 노드 js 앱으로 이동한다.

- api-server.js 에서 코딩한 url 만 접근이 가능하다.(아래2 가지 확인)

- 노드js테스트:  https://server-basic-fekuw.run.goorm.io/api

- 공공데이터포털 xml값을 json형태로 받기: https://server-basic-fekuw.run.goorm.io/openapi/getdata

- 지난 번 공공데이터 포털에서 미리보기 한 xml 결과 화면과 비교하면 위 json 데이터가 처리하기 더 편리하다는 것을 알 수 있다.

- 이번 시간에 작업한 소스 위치: https://github.com/kimilguk/react-basic/tree/basic03