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

아래 내용에서 구름ide 무료정책이 변경되어서 코예브라는 클라우드로 배포위치를 변경하였다.(아래)

https://koyeb.com/

 

- 위 대시보드에서 [Create Web Service] 로 생성할 때 [Build command 와 Run command] 부분 그리고, Port 부분이 핵심이다. [npm run start] Run command에 입력하지 않아도 실행 된다. 즉, node api-server.js 로 4000번 포트에 앱을 실행하게 되고, 리액트앱은 npm run start 하지 않아도 자동실행 된다. (아래 결과 화면)

외부 테이터 가져오기 : https://bitter-mariel-kimilguk.koyeb.app/openapi/getdata

리액트 앱 실행결과(아래) : https://bitter-mariel-kimilguk.koyeb.app/classkakaomap

이번 실습의 목표는 아래와 같다. 단, 배포에서 구름ide 대신 위 코예브를 사용하고, 코딩 소스는 동일하다.

단, 소스에서 package.json 파일에서 개본으로 제공되는 최신 빌드 팩 대신 개발에 사용된 노드js 버전을 지정하는 코드를 추가한다.(아래 package.json 파일에서)

{
  "name": "react-basic",
  "version": "0.1.0",
  "private": true,
  아래 3줄 내용 추가
  "engines": {
    "node":  ">=16.14.0 <=16.14.0"
  },
  "dependencies": { 이하 동일 중략....

공공데이터 포털의 데이터를 사용하는 API 노드js 서버를 만들고, 받아온 데이터를 리액트JS에서 파싱하여, 카카오 맵에 표시하는 기능을 개발할 때, 구름 IDE의 React 스택을 이용하여 노드js 서버와 리액트JS 앱을 만들 수 있게 됩니다.

- 최종 결과 미리보기 URL(네이버계정): https://server-basic-fekuw.run.goorm.io/ (아래)

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

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

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

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

- 컨테이너 이름, 설명을 입력하고, 나머지는 기본값으로 둔다. 하단 소프트웨어 스택에서 React를 선택한다.

- 컨테이너를 생성 후 실행 버튼을 클릭하기 전 항상 켜두기 기능을 체크한다.(아래)

- 모든 컨테이너 아래 화면에서 항상 켜두기로 변경 후 실행버튼을 클릭한다.

- 최초 구름IDE에서 제공하는 React 컨테이너 실행 후 화면 하단 터미널에서 리액트를 실행하려고 하면 않된다.

   이유는 앱 실행에 필요한 의존성 모듈이 없기 때문이다. 실행에 필요한 모듈은 package.json 파일에 정의 되어 있다.

   그래서, 최초에 터미널에서 npm installl 로 아래 package.json 에 정의된 모듈을 설치하는 과정이 필요하다.(아래)

- 위 필수 모듈 설치 후 터미널에서 npm start 하고, 아래 그림 순서대로 실행하면 크롬브라우저에서 리액트 초기화면을 확인 할 수 있다.(아래)

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