이어서 지난번, DECK.GL 시각화 Google Map 타임라인을 사용해 보세요!의 2탄 보도.
마지막으로 PC에서 React 및 DECK총 계정 환경 구축이 완료되었습니다.
이번 실제 인코딩 시작!

카탈로그

본 보도는 5차례에 걸쳐 설명될 것이다.

React 및 DECK총 계정 환경 구축

브라우저에서 기본 React 코드 확인 ← 이번에는 이거.

DECK.총계정을 사용하여 단순 데이터 보기

매핑 어셈블리 보기

GoogleMap 타임라인 데이터 표시

필요 없는 파일 삭제!

지난번에 create-react-app 명령을 사용하여 React 환경을 만들었지만 먼저 간단하게 만들고 싶어서 필요하지 않은 파일을 삭제하려고 합니다.
이것은 기본 상태입니다.
서류가 많네요.
src 디렉터리에서 남기고index.js 그 외에 삭제하세요.
이런 느낌

index.js 파일

나는 초기index.js가 바로 이런 느낌이라고 생각한다.
index.js(기본값)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

여기도 필요 없는 기술들이 많으니 삭제하세요.
삭제 후 index.js 는 다음과 같습니다.
index.js(수정 후)

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";

ReactDOM.render(<App />, document.getElementById("root"));

지금부터 App.jsx 코드를 작성합니다.
※ 확장자.js도 가능하지만.jsx vscode에 React 아이콘이 뜨면 기분이 좋아지기 때문에 저는 항상 여기에 씁니다.
이런 느낌

App.jsx에 기본 코드를 적어주세요!

그럼 드디어 인코딩에 들어갔어요!
우선index.js과 같은 차원에서 App.jsx를 만듭니다.

가능하다면 아래 코드를 App.jsx 에 쓰세요.(DECK.GL은 전혀 관련이 없음
일단 기본적인 React 코드를 적어서 동작을 확인해 보겠습니다!
App.jsx

import React from "react";

export default class App extends React.Component {
  render() {
    return <div>Hello, DECK.GL!!</div>;
  }
}

동작 확인은 yarn start 명령만 실행하면 됩니다!create-react-app에서 만든 프로젝트는 babel, 웹팩, ESLint를 설정하여 이 명령을 실행하기만 하면 서버http://localhost:3000를 시작하여 접근할 수 있습니다.
터미널

브라우저

움직여!

총결산

이번에도 DECK.GL을 접하지는 못했지만 다음 본론으로 들어가면 좋겠다!