ukss

1부에 이어, 2부에서는 Map Component를 그리고, 지도가 표출되도록 하겠습니다.

이에 앞서 1부에서 CRA를 통해 설치 된 리액트 버전이 v18인데 v17로 다운그레이드 하겠습니다.

* 참고 자료

https://homubee.tistory.com/36

1부에서 설치되지 않았던 @mui/styles를 설치하겠습니다.

D:\workspace_vscode\react_google_map> npm install @mui/styles

/src/component/Map 하위에 styles.js 파일을 추가하고 여기에 Map.js의 css를 구성하겠습니다.

// styles.js

import { makeStyles } from "@mui/styles";

export default makeStyles(() => ({
  paper: {
    padding: "10px",
    display: "flex",
    flexDirection: "columns",
    justifyContent: "center",
    width: "100px",
  },
  mapContainer: {
    height: "85vh",
    width: "100%",
  },
}));

// Map.js

import React from "react";
import GoogleMapReact from "google-map-react";

import useStyle from "./styles";

const Map = () => {
  const classes = useStyle();
  const cordinates = { lat: 0, lng: 0 };
  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={cordinates}
        center={cordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={""}
        onChange={""}
        onChildClick={""}
      ></GoogleMapReact>
    </div>
  );
};

export default Map;

google-map-react 라이브러리를 import 하고, 위와 같이 작성해줍니다.

bootstrapURLKeys 부분의 key 값에 대해서는 google project를 만들어 key값을 받아와야 합니다.

(발급방법은 자세히 설명 된 타글을 링크해놓겠습니다.)

* 참고자료

https://velog.io/@sukqbe/API-%EA%B5%AC%EA%B8%80-%EC%A7%80%EB%8F%84Google-Map-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-API-Key-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0-qumur49u

위와같이 작성 후 프로젝트를 실행하면 아래와 같이 화면이 뜹니다.

해당 알림창은 우리가 아직 key값을 부여하지 않았기에 뜨는 내용이며, 지도를 최소로 축소하면 다음과 같이 지도가 정상적으로 뜨고있음을 알 수 있습니다.

* 참고 자료

https://www.npmjs.com/package/google-map-react

https://velog.io/@jhs000123/%EB%A6%AC%EC%95%A1%ED%8A%B8-googlemap%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8

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의 변경이 있을 예정입니다.

2. MySQL

    InnoDB 스토리지 엔진

    Repeatable read 이상 방식을 사용 -> 부정합 발생하지 않습니다.

리핏테이블 리드 방식에서는 트랜젝션이 종료되지 않은 순간까지는 동일한 조회 결과가 나옵니다.

보통 스프링에서 CRUD에서 CUD에서만 트랜잭셔널 어노테이션을 붙이게 되는데, R에서도 트랜잭셔널 어노테이션을 붙이는게 좋습니다.

강의 주소 : https://youtu.be/n1lvzeffDMk

- 일어날 수 있는 문제의 경우

위와같이 정산 서비스에 대해서 조회시 만원의 결과를 보여주다가 어느순간 커밋이후 2만원으로 결과가 보여진다면, 데이터의 정합성이 깨지는 것입니다.

이러한 현상을 PHANTOM READ(팬텀 리드)라 합니다.

이러한 팬텀 리드 현상을 해결하기 위해서는REPEATABLE READ 방식을 써야 합니다.

강의 주소 : https://youtu.be/4iDNmluK6DE

- 트랜잭션 : 일이 처리되기 위한 가장 작은 단위

- DB 격리 수준

  1. 오라클

      READ COMMIT

오라클의 경우는 변경하려고하는 데이터가 커밋이 되기 전까지는 undo영역의 데이터를 읽어옵니다.

좌측의 A트랜잭션이 업데이트 후 커밋 직전에 B트랜잭션에서 empno=11을 조회하게 되면, 장보고가 아닌 임꺽정이 조회됩니다.

강의 주소 : https://youtu.be/FbeU3ZHgOhs