Google Map 만들기 1

1. create-react-app을 통해 기본적은 react 프로젝트를 생성합니다.

D:\workspace_vscode> npx create-react-app react_google_map

 

2. 생성 된 프로젝트가 정상적으로 실행되는지 확인합니다.

D:\workspace_vscode> npm run start

 

3. 불필요한 코드를 정리합니다.

// index.js

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

// App.js

import React from "react";

function App() {
  return <div>app.js</div>;
}

export default App;

 

4. /src/component/Map 패키지 구조를 생성하고 Map.js, index.js를 생성합니다.

// /src/component/Map/index.jsp

export { default } from "./Map";

// /src/component/Map/Map.js

import React from "react";

const Map = () => {
  return <div>Map</div>;
};

export default Map;

 

5. App.js에서 Map.js를 import합니다.

// App.js

import React from "react";
import Map from "./component/Map";

function App() {
  return (
    <div>
      <Map />
    </div>
  );
}

export default App;

 

6. 이제 프로젝트를 진행함에 있어 필요한 항목들을 설치합니다.

D:\workspace_vscode\react_google_map> npm install @mui/material @mui/icons-material axios google-map-react

@mui/material, @mui/icons-material : 자주 사용되는 기능, 디자인을 component/API 형태로 제공하여, React 개발시에 유용한 라이브러리 입니다.

axios : 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 입니다.

google-map-react : 구글 지도 검색창 구현을 위한 라이브러리 입니다.

 

7. package.json에서 확인해야 할 사항

현재 npx를 통해 설치 된 react 버전이 v18버전인데, 추후 해당 버전과 google-map-react와의 이슈로 인해 다운그레이드를 할 예정입니다.(v17) 이에따라 React v17용으로 index.js의 변경이 있을 예정입니다.