본문 바로가기

Programing/React

[React] 공적 마스크 프로그램 만들기

이제는 한풀 꺽인! 하지만 안심할 수 없는 마스크 대란!

정부에서 열어준 Rest Api Server 와 React 로 만들었던 "공적 마스크 프로그램" 을 소개해보겠습니다.

(너무 건방진것 같아서 앞으로 반말은 생략하기 위해서 수정 ㅠㅠ...)

 

소스 코드를 블로그 내에서 보여주지 않은 이유는 소스 코드가 복잡하거나 어려운 것은 없지만 제가 설명을 하면서 잘못된 정보를 전달할 수 있다는 생각에 깃허브 레파지토리 주소로 대체하였습니다.

 

또한 이번 개발은 정부에서 제공해주는 서버를 사용할 수 있었던 개발로 GitHub Pages 를 이용하여 실제로 프로그램을 확인할 수 있도록 하였습니다^^ 이점이 개발하면서 가장 좋았던 점이었습니다!

 

그리고 필터의 기능으로 거리 뿐만아니라 공적마스크 판매점 분류 및 재고에 따른 Visible 처리, List 에서 Order by 등의 기능도 추가 할 수 있었지만 서비스를 위한 개발이 아닌 리액트를 공부하는 상황에서 개발하는 것이었기에 급하게 마무리하게 되었습니다.

 

가벼운 마음으로 구경하고 갈 수 있는 블로그를 만들 수 있도록 오늘도 Fighting!!!

 

 

 

1. 소스 코드 확인

https://github.com/JinhoHan/kf-mask

 

 

2. 프로그램 확인(Github Pages, gh-pages)

https://jinhohan.github.io/kf-mask/

 

 

3. 화면 확인

Accept

 

Accept → List

 

Accept → List → Select

 

Accept → Map

 

Accept → Map → Select

 

Accept → Map → Filter(필터)

 

Accept → Address(내 위치)

 

Accept → Address → Map

 

Accept → Address → Map → My Location(GPS)