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

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

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 로 앱 실행하기.

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

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

- 참고로 노드버전 업그레이드 방법은 리액트기반으로 공공데이터와 지도API 연동07 포스트에 해당 내용이 있다.

- 구름IDE에서 컨테이너를 나가면, 터미널에서 사용중인 프로세스(실행중인 노드js 서버)가 종료되기 때문에 컨테이너가 띄워져 있을 때만 리액트 앱에 접속할 수 었는 상황이 발생된다.

컨테이너를 나가더라도 터미널에서 실행중인 노드js 서버가 종료되지 않도록 forever 라는 모듈을 설치한다.

-  npm install forever -g 로 모듈을 설치한다.

- forever 실행(아래 명령어 입력 후 한 칸 띄우고 ./ 가 추가된다.)

   forever start -c 'node api-server.js' ./

   forever start -c 'npm start' ./

  

- forever 는 백그라운드에서 앱을 실행해 주기 때문에 컨테이너 터미널을 나가게 되더라도 앱은 계속 작동된다.

- 또한 기계적인 오류로 중지 되더라도 앱을 자동으로 재 실행해 준다.

- forever list 로 현재 백그라운드로 작동중인 앱 프로세스 pid 를 구할 수 있다. 이 pid 번호로 앱을 종료 시킨다.(아래)

forever stop 0

- 참고로, 컨테이너 실행을 정지 하면, forever 로 실행한 백그라운드 앱도 종료 된다. 그래서, 항상 켜두기 기능을 사용해야 한다.(아래)

- 이번 시간에 작업한 소스는 없다. : https://github.com/kimilguk/react-basic/tree/basic08