상세 컨텐츠

본문 제목

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

노드js·자바스크립트

by 김일국 2022. 8. 13. 15:26

본문

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

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

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

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

- 리액트JS 코딩을 하기 전 대표적인 용어 부터 알아본다.------------------------------------

- SPA(Single Page Application) 란, 간단한 기능을 만들 때 주로 사용 한다.
- SPA는 1 페이지 앱 이라고도 하며, 페이지 이동 없이 1 화면에서 모든 기능이 처리되는 사이트를 구현하게 된다.     

   (index.html 하나 안에서 페이지 주소가 바뀌면서, 지정한 컴포넌트가 render 된다.)
- JSX(JavaScript Xml)문법: 자바스크립트를 확장한 문법으로 XML 태그와 비슷한 구조를 사용해 JS내에 프로그램 코딩과 HTML을 함께 내장하여 리턴함수로 출력한다.

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

- 카카오 맵 API 샘플코드중 아래 javascript + HTML 붉은 색 사각 부분을 참조한다.(아래)

https://apis.map.kakao.com/web/sample/multipleMarkerEvent/

- 우선 카카오 맵 모듈을 CDN으로 불러온다. 리액트는 SPA 앱으로서 1페이지로 화면전환을 하는 특징이 있다.

  public폴더의 index.html 이 1페이지가 되고, 이 페이지에서 카카오 맵 화면을 불러오게 된다.

  그래서, 카카오 맵 모듈을 CDN으로 불러올때는 public/index.html 파일에 <head> 태그 내에 추가한다.

  작업하는 김에 디자인 프레임웍인 부트스트랩(MIT라이센스) 모듈도 추가한다.

  부트스트랩 문서 참조(여기에 기본 사용법이 있다): https://getbootstrap.com/docs/5.2/getting-started/introduction/

public/index.html 파일 중략...
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=여기에 카카오 API키를 추가한다."></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>

- 참고로 리액트js 의 컴포넌트 기본 서식은 아래와 같다.

import React, {Component} from 'react';
class KakaoMap extends Component {
    constructor (props) {
        super(props); //부모클래스-Component의 props속성을 사용하겠다고 선언, 필수 이다.

    }

    componentDidMount () { // 생명주기 중 초기 화면 렌더링 후 실행함수

        //구현코드 이곳에 위 카카오 맵 샘플 js 코드를 그대로 입력한다.

   }

   render() {
        //props-상태 값이 바뀌면 html을 그리는 함수 즉, render 자동으로 재 실행됨

        //아래  div 내 에 위 카카오 맵 샘플 js 의 html 부분을 복사해서 사용 단, style은 JSX 전용으로 해야 하는것에 주의한다
        return (
            <div>
                <div id="map" style={{width:"100%",height:"350px"}}></div>
            </div>
        );//return 함수 끝
    }//reder 함수 끝
}//클래스 끝
export default KakaoMap;

- 리액트js의 특징은 다음 시간에 자세히 알아 보고 지금은 위 서식을 참조하여 아래 코드를 무조건 입려한다.

 

- src폴더내 components 폴더를 생성 후 ClassKakaoMap.js 파일을 생성하고, 위 소스를 참조하여 기초 코드를 만든다.

- 아래 코드에서 /* global kakao */ 로 글로벌 변수를 지정해 주면, 내부코드에서 kakao 객체를 무리없이 사용할 수 있다.

/*global kakao*/
import React, {Component} from 'react';

class KakaoMap extends Component {
	constructor (props) {
        super(props);
    }
    componentDidMount () { // 생명주기 중 초기 화면 렌더링 후 실행함수
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
        mapOption = { 
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 3 // 지도의 확대 레벨
        };

        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

        // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
        var positions = [
            {
                content: '<div>카카오</div>', 
                latlng: new kakao.maps.LatLng(33.450705, 126.570677)
            },
            {
                content: '<div>생태연못</div>', 
                latlng: new kakao.maps.LatLng(33.450936, 126.569477)
            },
            {
                content: '<div>텃밭</div>', 
                latlng: new kakao.maps.LatLng(33.450879, 126.569940)
            },
            {
                content: '<div>근린공원</div>',
                latlng: new kakao.maps.LatLng(33.451393, 126.570738)
            }
        ];

        for (var i = 0; i < positions.length; i ++) {
            // 마커를 생성합니다
            var marker = new kakao.maps.Marker({
                map: map, // 마커를 표시할 지도
                position: positions[i].latlng // 마커의 위치
            });

            // 마커에 표시할 인포윈도우를 생성합니다 
            var infowindow = new kakao.maps.InfoWindow({
                content: positions[i].content // 인포윈도우에 표시할 내용
            });

            // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
            // 이벤트 리스너로는 클로저를 만들어 등록합니다 
            // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
            kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
            kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
        }
        // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
        function makeOverListener(map, marker, infowindow) {
            return function() {
                infowindow.open(map, marker);
            };
        }

        // 인포윈도우를 닫는 클로저를 만드는 함수입니다 
        function makeOutListener(infowindow) {
            return function() {
                infowindow.close();
            };
        }
	}
        
    render() {
        //props-state의 값이 바뀌면 html을 그리는 함수 render 자동으로 재 실행됨
        return (
            <div>
                <div id="map" style={{width:"100%",height:"350px"}}></div>
            </div>
        );
    }
}

export default KakaoMap;

- 마지막으로 라우트 기능을 추가하여 메뉴 링크로 신규로 생성한 ClassKakaoMap.js 컴포넌트를 실행 할 수 있게 코딩한다.(터미널에서 npm install react-router-dom 으로 라우터 모듈을 설치한 후 아래코딩을 한다.)

- src/index.js 파일의 아래 코드에서 상단의 import 부분을 2개 추가한다. 그리고, 기존 render 부분을 주석처리 하고, 신규 코드를 입력한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter, Routes, Route } from "react-router-dom";//npm install react-router-dom
import ClassKakaoMap from './components/ClassKakaoMap';

//ReactDOM.render(<App />, document.getElementById('root'));기존코드를 주석처리 후 아래코드 추가

ReactDOM.render(
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/classkakaomap" element={<ClassKakaoMap />} />
        </Routes>
    </BrowserRouter>,
    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: http://bit.ly/CRA-PWA
serviceWorker.unregister();

- src/App.js 에서 버튼 링크를 추가한다.(상단 import 로 Link 모듈을 추가하면, 하단에 Link 태그를 사용할 수 있다. 아래)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Link } from "react-router-dom";

class App extends Component {//콤포넌트 생성자 : 콤포넌트 실행시 자동 실행(초기화)
    
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <Link to="/classkakaomap"><button id="btnHome">클래스형 카카오 맵</button></Link>
        </header>
      </div>
    );
  }
}

export default App;

- npm start 로 리액트 앱을 실행한 결과(아래 카카오 샘플과 같은 결고가 나오면 된다.)

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

저작자표시 비영리 변경금지

'노드js·자바스크립트' 카테고리의 다른 글

리액트기반으로 공공데이터와 지도API 연동06  (0) 2022.08.13
리액트기반으로 공공데이터와 지도API 연동05  (0) 2022.08.13
리액트기반으로 공공데이터와 지도API 연동03  (0) 2022.08.13
리액트기반으로 공공데이터와 지도API 연동02  (0) 2022.08.13
리액트기반으로 공공데이터와 지도API 연동01  (0) 2022.08.13

관련글 더보기

댓글 영역

티스토리툴바