리액트로 공적마스크 판매처 및 재고 현황 조회 웹앱 만들기_4

### 리액트로 공적마스크 판매처 및 재고 현황 조회 웹앱 만들기_4

오늘작업내역(아래)

- 공적마스크 판매처 및 재고 현황 조회 구글지도 링크연동에 대한 사용자 편의성 추가작업 OK.
- 구글맵 기술참조: https://gist.github.com/jwo/43b382fc60eb09d3a415c9953f4057f8 //사용함.
- npm install --save react-google-maps //사용함.

리액트로 공적마스크 판매처 및 재고 현황 조회 웹앱 만들기_3

#이전작업: 공적마스크 판매처 및 재고 현황 조회 구글지도링크연동 작업.

- 구글맵 기술참조: https://github.com/google-map-react/google-map-react

- npm install --save google-map-react //사용함.

------

- 작업결과 미리보기(아래) - 결과확인링크: https://miniplugin.github.io/ (주, IE 에서는 작동 않됩니다.)

- 개발언어: JSX(페이스북에서 만든 Javascript 문법 확장판) = react-scripts 버전 3.4.0
- 개발환경: VSCode IDE사용, create-react-app 앱사용.(npm run start 실행결과 크롬에서 정상 출력됨. 단, IE브라우저에서는 실행 않됨)
- 실행환경: React(서버:npm install -g serve앱 설치 후 serve -s build 사용. 또는,1회용 서버생성 npx serve -s build )
- 리액트버전: create-react-app --version 3.4.0 ( 설치방법: npm install -g create-react-app )
- 1-API URL(기본값:위도36.818754,경도127.153618): https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByGeo/json?lat=36.818754&lng=127.153618
- API URL(기본값:충청남도 천안시 신부동): https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByAddr/json?address=%EC%B6%A9%EC%B2%AD%EB%82%A8%EB%8F%84%20%EC%B2%9C%EC%95%88%EC%8B%9C%20%EB%8F%99%EB%82%A8%EA%B5%AC%20%EC%8B%A0%EB%B6%80%EB%8F%99
- 2-API정보: https://app.swaggerhub.com/apis/Promptech/public-mask-info/20200307-oas3#
- 3-마스크공공데이터 소스정보: https://www.data.go.kr/dataset/15043025/openapi.do
- 4-API입출력정보: https://app.swaggerhub.com/apis-docs/Promptech/public-mask-info/20200307-oas3#/
- 5-전국 마스크판매 약국,우체국,농협 정보(판매수량은없음): https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/stores/json?page=1
- 폴더구조: /app/리액트 one페이지 게시판 앱 소스.

- 폴더구조: /app_mask/리액트공적마스크 판매처 및 재고 현황 조회 앱 소스.
- 결과확인링크: https://miniplugin.github.io/

----

Ps. 작업예정

- 주소[클릭시 판매처별 확대지도가 나타납니다.] 부분 상단 출력에서 -> 팝업 레이어로 변경 예정,