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

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

오늘작업내역(아래)

- 공적마스크 판매처 및 재고 현황 조회 판매처별 확대 지도 팝업레이어로 구현 OK.
- 지도 드래그시 동적으로 마스크 판매처 나타내기 구현 OK.
- 기술참조: https://codepen.io/bastianalbers/pen/PWBYvz

- 작업결과 미리보기(아래) - 결과확인링크: 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.

다음작업예정: 코로나19확진자 방문처 확인 웹 프로젝트

- 아직 공공마스크 판매처 처럼 공공데이터 API로 오픈되어 있지 않아서 아래 데이터를 참조하게 됩니다.

- 공공데이터로 [코로나19확진자 방문처] 가 오픈되면, 그 API 자료를 사용할 예정 입니다.

- 참고: 코로나19확진자 방문처 확인 https://coronamap.site/
-  데이터 참조: https://coronamap.site/javascripts/ndata.js
- 아래 데이터(2차원 배열json) 예: 방문날짜에 따른 색상구분 녹색:3~9일이하, 노랑:2~4일이하, 빨강:1일이하

```

var position = [
   {
     solo: true,
     profile: "-",
     tag: "#서울 확진자",
     month: 3,
     day: 3,
     name: "서울",
     full: "서울 확진자",
     address: "동안비전내과의원",
     address_name: "서울 동대문구 이문동 324-10",
     address_english: "a non-commercial physician",
     latlng: "37.594649185602954, 127.05940979866541"
   },
  {...}
]

```
- 파일구조(예정): 신규폴더명 app_covid19 로 create-react-app 앱 생성 후 작업

- 주_기술참조: https://medium.com/@imranhsayed/google-maps-in-react-autocomplete-location-search-draggable-marker-marker-infobox-565ab8e8cf22
- 부_기술참조: https://github.com/googlemap-react/googlemap-react