마스크 아이즈 - 공적 마스크 재고 확인 웹 서비스 개발 일지

React로 미니 프로젝트를 며칠째 진행중이다. (앞으로 더 할지 말지는..)

정부가 공적 마스크 재고 확인 API를 공개한다는 소식을 뒤늦게 접하면서, 갑작스레 시작하게 되었다.

아래 이미지는 현재 진행 상태이다.

 

짧은 시간 정말 많이 삽질을 했다.

React의 개념도 제대로 잡혀있지 않은 상태로 무작정 시작 했으니 말이다..

보일러플레이트도 몇번 갈아치운지 모르겠다.

맨처름 React-stater-kit 으로 진행했는데 url로 진입시 지도 로딩되는 시간과의 동기 문제인지 계속 에러가 나서 해결하려고 했지만 실패했다. (navigation을 통해 link로 들어가면 잘됐지만 원하지 않았다.)

그래서 react-naver-maps의 예제소스를 기초로 개발을 다시 시작했다.

여기서부턴 거의 정석 React 개발 방식으로 해야해서 학습하면서 개발하니 시간이 오래 걸렸다.

그러다 back-end 기능이 필요해 express-react-fullstack 으로 갈아탔다.

 

지도는 react-naver-maps 라이브러리를 사용하여 진행했는데, naver map의 모든 기능이 라이브러리화 되어 있지 않고 설명도 없어서,,

infowinodw나 검색등 각종 기능은 따로 라이브러리화 시켜서 개발을 해야했다. (문의를 해보니 3월 말 지나야 업데이트가 된다고 한다.)

React에 대해서도 잘 모르는데 그런 것까지 하려니 여간 쉬운게 아니었지만, 

그래도 짬밥 무시 못한다고, 하면 된다.

 

평소 back-end나 인프라 관련 업무를 맡아서 했기에 front 단은 익숙치 않았지만 뚝딱뚝딱 하나씩 작품이 완성되는 느낌이들어 집중하게 되고 며칠 시간 가는 줄 모르고 지냈다.

 

React의 경우 하나의 component에서 state를 관리하는 (기초적인) 방법으로 하니

Navigation component에서 버튼 클릭 시, 지도를 컨트롤 할 수가 없었다.

그래서 알아보니 store를 활용하면 해결이 된다.

store를 사용하려니 redux를 알아야하고, 따라서 reducer, saga 등 몇가지 중요한 개념을 잡고 넘어가야했다.

 - reducer는 action을 받아 store에 저장된 state를 수정 반환 한다.

 - saga는 비동기 작업(fetch, db 등)을 처리할때 사용하며, action을 받아 작업을 처리하고 원한다면 action을 보내 reducer에게 작업(state 변경 관련)을 넘길 수 있다.

그렇게 해서 어느정도 쓸만한 페이지를 구성하게 되었다.

 

앞으로 검색 기능을 추가하면 이 프로젝트의 목표가 어느정도 이루워지게 된다.