1. 프로젝트 명 : Mildo(밀도)

• 모바일 웹 환경에서 서울시 실시간 인구 밀도 정보를 제공

2. 지난 주 진행 내용

1. 기술 스택 회의
2. 개발 환경 세팅
3. 실시간 도시 데이터 API 연결
4. 네이버 지도 API 연결
5. 배포
6. CI/CD 구현 1차 시도

3. 이번 주 목표

• 사용자 위치를 기반으로 지도 UI 보여주기
• 모달 UI 구현
  • 1단계 : 위치, 밀집도, 북마크, 밀집인구, 내일 갈꺼야 버튼
  • 2단계 : 최근 24시간 인구 동향, 내일 갈꺼야 순위
• 핀 UI 구현
  • 인구 밀도에 따라 색이 다른 핀 보여주기
• CI/CD 구현 완료
• Docker 학습

4. 이번 주 진행 내용

4.1. 페어 개발 (월~수)

지도 UI

• 네이버 지도 API를 이용해 메인 페이지에 서울 지도 출력

• 사용자의 위치를 기반으로 현재 위치가 서울시일 경우 사용자의 지도 중앙에 위치

  • 자바스크립트 API인 Geolocation을 이용하는 리액트 Hooks인 useGeolocation를 통해 현재 사용자의 위도/경도 정보 가져옴

  • 네이버 지도 API인 Reverse Geocoding을 이용해 사용자의 위도/경도를 통해 현재 거주 지역명을 확인하여 서울시인지 확인

  • 현재 위치가 서울시가 아닐 경우 시청역을 지도 중앙에 위치

• 로컬에서만 가능하고 배포 환경에서는 불가, HTTPS를 설정해야 하는 것으로 추측

로딩 화면

• 처음 앱에 접근할 경우 현재 사용자의 위치를 기반으로 초기 위치를 지정하는 과정이 발생한다.

• 결과적으로 시간이 좀 걸리기 때문에(특히 느린 3G의 경우에는 더더욱) 로딩 화면으로 대체하여 사용자 편의성을 높임

상세 모달 1단계 & 2단계 UI

인구 밀도에 따른 핀 기능

• 인구의 밀집도에 따라 다른 색깔의 핀을 보여주기

  • 여유(초록) / 보통(노랑) / 붐빔(주황) / 매우 붐빔(빨강)

• 핀끼리 부자연스럽게 겹치는 부분을 지역의 위도순으로 내림차순 정렬하여 핀들이 자연스럽게 겹치도록 함

4.2. Git 작업 (기술 공유)

• feature 브랜치끼리 서로 병합하는 실수를 발생시킴

  • Task를 서로 독립적으로 배분해서 작업했던 상황이어서 충돌이 적었다.

  • 결과 : env 파일이 github 저장소에 올라가는 사태가 발생

  • 해결 : env 내부의 환경변수를 모두 수정, 갱신

  • 관련 지식 링크

4.3. 배포 (목)

CI/CD 2차 시도

아직 해결하지 못한 문제

1. 배포 환경에서 nvm 명령어가 사용되지 않음

   • 실제 클라우드 서버에 접속했을 때는 nvm 명령어를 사용할 수 있었지만, github Actions를 이용하여 nvm 스크립트를 적용했을 때 다음과 같은 오류 발생
   • err: bash: nvm: command not found

2. MongoDB 환경변수 적용

   

   • runner 환경에서는 MONGODB_CONNECT_URI 환경변수가 잘 적용되었지만, 배포 환경에 MONGODB_CONNECT_URI 만 복사되지 않는 현상 발생

   • connect 주소를 통째로 복사해서 발생한 오류로 추측

     mongodb+srv://{username}:{password}@{host}/{collectionName}?retryWrites=true&w=majority

   • username, password, host, collectionName을 따로 분리하여 환경변수로 적용해볼 예정

5. 앞으로 할 일

5.1. 개발 일정(월~수)

• 서울시 인구 밀도 데이터를 주기적으로 저장하는 서버 구축
  • node-cron vs
• 최근 24시간 인구 밀도 데이터 캐싱
  • Redis
• 인구 밀도별 지도 핀을 필터링하는 기능

5.2. 개발 일정(목)

• https 적용하기