🧐 백로그 점검

서울 실시간 도시 데이터 API 기능을 목록에 추가

• 서울 실시간 도시 데이터 API 연결(상)
• MongoDB 연결(상)
  • MongoDB cloud에 연결
  • mongoose odm 설정
• 데이터 가공 후 DB 저장(상)

문서 작업을 목록에 추가

• REST API 문서 작성(상)

✊ 이번 주 목표

프론트엔드

• 지도 출력 및 메인 화면 완성
• 서울 주요 지역 50곳 핀 UI 및 기능 완성
• 상세 정보 모달 창 UI 구현

백엔드

• DB 생성 및 연결
• 서울시 도시 데이터 저장
• 도시 데이터 가져오는 API 구현
  • 전체 지역, 특정 지역 나눠서

API

• 핀 및 상세 정보 관련 REST API 문서 작성

배포

• CI/CD 기능 구현 완료
• Docker 학습 및 적용 시도

🌻 세부 기능

지도 출력

• 네이버 지도 API 연결
• 지도 초기 화면을 서울 중심으로 출력

핀

• 지역에 대한 구체적인 위도/경도 설정
  • (선택) 해당 지역의 범위를 테두리로 표시 (추후 논의)
• 지도에 50곳의 위도/경도 대한 핀 출력
• 인구밀도를 기반으로 핀의 색상 출력
• 핀 클릭 시 상세 정보 모달 출력 (1단계)
• 핀 클릭 시 핀의 크기를 확대하고, 핀의 중앙에 현재 인구 밀도 상태 표시 (여유, 보통, 붐빔, 매우 붐빔)
• 핀 클릭 시 핀이 화면 중앙으로 포커싱 되도록 설정

상세 정보 모달

• 현재 장소 상태 메시지 UI 출력
• 실시간 예상 인구수 UI 출력
• 북마크 버튼 UI 출력
• ‘내일 갈 거야’ 버튼 UI 출력
• 로딩 중일 경우 스켈레톤 UI 출력

API 요청

• 서울 도시 데이터 비동기 처리로 속도 향상
• MongoDB 연결
• 데이터를 가공해서 DB에 저장하기(CRUD)

배포

• cors 에러 해결
• Github Actions를 이용한 CI/CD 배포 구현 완료
• Docker 학습 및 적용 시도

🤼 페어 프로그래밍

이번 주 페어

• 지난 주에 기능을 거의 구현하지 못해 그대로 유지
  • A팀 - 한빈/상준
  • B팀 - 윤우/현정

⛅ 데모 시나리오

지도 출력

1. Mildo 웹 어플리케이션에 접속한다.
2. 사용자가 서울 내에 위치해 있다면 사용자 위치 중심으로 지도를 보여준다.
   1. 필요한 값 : 사용자 위치의 위도/경도
3. 사용자가 서울이 아니거나 위치 제공을 하지 않으면 서울 중심을 보여준다.
   1. 필요한 값 : 서울 중심의 위도/경도
4. 지도는 이동할 수 있어야 한다.
   1. 필요한 조건 : 서울시 반경 내에서만 지도가 적용되어야 한다.
5. 지도는 확대/축소가 가능하다.
   1. 필요한 조건 : 서울시 반경 내에서만 지도가 적용되어야 한다.
   2. 필요한 값(50곳을 부분적으로 불러올 때) : 주요 50곳의 위치, 붐빔 정도

핀

1. 붐빔 정도가 색으로 표시된다.
   1. 필요한 값: 붐빔 정도(여유, 보통, 붐빔, 매우 붐빔)
2. 핀은 클릭할 수 있다.
   1. 필요한 값 : 붐빔 정도
3. 핀을 클릭하면 핀이 커지고, 화면 가운데로 위치한다. 1단계 상세 모달창이 출력된다.
   1. 필요한 값 : 핀의 위도/경도

상세 모달창

1. 현재 장소 상태 메시지, 실시간 예상 인구 수, 북마크 버튼, ‘내일 갈 거야’ 버튼이 출력된다.
   1. 필요한 값 : 관련 더미 데이터
2. 로딩 중일 때 스켈레톤 UI가 출력된다.

성능 비교

1. 50 곳을 모두 불러온 뒤, 이에 대한 네트워크 지연 시간을 측정한다.
2. 50 곳을 부분적으로 불러온 뒤, 이에 대한 네트워크 지연 시간을 측정한다.
3. 성능 개선이 되었는지 확인한다.
   1. 필요한 조건 : ‘빠른 3G, 느린 3G, 제한 없음’을 기준으로 두 개의 상황 비교
   2. 결과 : 데이터에 대한 도표를 생성한다.