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

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

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

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

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

- npm 빌드는 npm build 또는 npm react-script build 를 실행할 수 있다. 이번 시간에는 yarn 빌드로 build/index.html을 만들어 보자(아래)

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

- 참고로, yarn 실행 시 아래와 같은 버전 에러가 나올 수 있다. 그래서 먼저 노드 버전을 업드레이드하는 것을 추천한다.

   에러구문: fs-extra@10.1.0: The engine "node" is incompatible with this module. Expected version ">=12". Got "10.16.3"

- 위 에러는 yarn create react-app 으로 함수형 앱을 초기 생성할 때 나오는 에러이기  때문에 우리 작업인 구름React스택으로 클래스형 앱을 초기에 생성한 경우 나타나지 않는다. 만약 함수형 앱을 yarn create 명령어로 생성한다면 반드시 노드 버전이 12 이상이어야 한다.(아래)

  터미널에서 현재 노드 버전 확인 : node -v

  노드버전 업그레이드용 nvm 설치: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

- 위 nvm(node version manager) 설치를 마친 후 터미널을 새로고침 한다.(아래)

- 노드js Long Time Support 버전을 설치(아래): nvm install --lts

- 실행중인 노드js 서버가 있다면 종료 후,node -v 명령으로 노드js버전을 확인해 본다.(아래)

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

- yarn 설치 순서(구름IDE 터미널에서 아래 순서대로 진행한다.)

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn

- yarn build 실행 후 결과 확인

  프로젝트 루트 폴더에서 yarn build 로 build폴더와 index.html 파일이 생성되었는지 확인 한다.

- 마지막으로 결과 확인 전 노드js에서 build폴더와 index.html을 사용할 수 있도록 함수를 지정한다.(아래)

- api-server.js 파일 제일 하단에 아래 내용을 입력한다.

 //빌드한 이후 노드js의 build폴더에서 리액트 css에 접근할 때 정적폴더로 지정해야 접근 가능하다.

 var path = require('path');
 app.use(express.static(path.join(__dirname, 'build')));
 app.get('*', function (req, res) { // / 루트 또는 /kakaomap 처럼 계속 추가 하기는 무리, 그래서 * 사용
   res.sendFile(path.join(__dirname, '/build/index.html'));
 });

- nodejs 가 변경 되었으므로 실행을 종료하고, 재 실행 한다.

  https://server-basic-fekuw.run.goorm.io/ 리액트JS가 아닌 노드js 서버로 실행 결과를 확인 할 수 있다.(아래)

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