Completed 🎯
- 신호 데이터를 주는 위도 경도 기준으로 8방위에 맞춰서 10m떨어진 곳에 신호 정보 표시
- 신호 상태에 맞게 초록불, 빨간불로 표시
- 신호 시간 정보 받아와서 나타내기
- 아이콘 위에 나타낼까 고민하다가 정보가 혼잡해져서 아래 정보 컴포넌트로 나타내기로 함.
( 처음 정보를 위치에 맞게 나타낸 사진, 정확한 위치는 아니지만 대략 어디인지는 알 수 있게 구현했다.)
Problems ⛔️
- 위치별 신호 정보 나타내기
- 처음 위치를 표시하려고 할때, 중심점을 기준으로 정적 px 옮겨서 나타내려고 했다.
- px로 움직여서 구현할 경우, 화면 축소시 부정확한 곳에 신호 정보가 찍힘.
- 화면 비율등을 고민하다가 결국 기준 위도 경도로 부터 10m 8방위별로 떨어진 위도 경도를 구해서 나타냄.
- http://www.movable-type.co.uk/scripts/latlong.html
- 레퍼런스 참조하여 위도 경도를 가지고 특정 거리의 위도 경도 구할 수 있었다.
- 아이콘 위에 정보 나타내기
- 남은 시간 정보를 아이콘 위에 나타냈었는데, 지저분하고 정보를 이해하는데 더 어렵다고 판단
- 아래 모달창같은 컴포넌트로 정보 나타내려고 함.
(현재 상태)
하루 회고 📔
생각보다 많이 구현했다.
정말 시간 가는 줄 모르고 재미있어서 계속 고민하고 개발했던 것 같다.
오늘은 우선 정보를 가져와서 나타내는 비교적 간단한 부분들이라 크게 고민이 있었던 부분은 위도 경도 계산하는 부분 말고는 크게 없었다.
내일은 아래 컴포넌트 완성하고, React Query를 이용해서 서버에서 꾸준히 API 정보를 업데이트하는 로직을 적절하게 설정하는 걸 구현해야될 것 같은데, 우선 친척집 방문하는 시간동안 React Query 공식문서 읽어보면서 고민해보자.
현재 stae도 메인에 다 모여있는데, 전역 상태로 관리할 부분도 함께 고민해보자.
오늘의 PR
내일 할일 🏋️♂️
- 신호 정보 컴포넌트 완성
- React Query로 서버 정보 가져오기, 캐싱 고민 구현
- 전역 상태 관리 분리, 리팩토링
Log