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

• 반응형 웹 환경에서 서울시 실시간 인구 밀도 정보를 제공을 목표

2. 지난 주 진행 내용

1. 네이버 지도 UI 부분적으로 구현 및 지도 반경 서울 내로 제한하기
2. 로딩 화면 구현
3. 상세 모달 1단계와 2단계 UI
4. 인구 밀도에 따른 핀(마커) 출력

3. 이번 주 목표

1. 서울시 인구 밀도 데이터를 주기적으로 저장하는 cron 서버 구축

   a. 현재 인구밀도 핀이 실시간이 아닌 테스트용 도시데이터가 들어가 있음

   b. 서울 인구 밀도 데이터를 주기적으로 저장하여 실시간 서울 인구 밀도 데이터가 적용되도록 함

2. 최근 24시간 인구 밀도 Redis를 통해 데이터 캐싱

   a. 각 지역에 대해 매번 같은 데이터를 mongoDB에 요청하기 때문에 캐싱하여 데이터에 가져올 수 있도록 함

3. 인구 밀도별 지도 핀을 필터링하는 기능

   a. 사용자가 원하는 인구 밀도를 빠르게 확인할 수 있는 기능

4. https 적용하기

   a. https를 적용하지 않으면, 브라우저에서 위치 허용 여부와 관련된 부분을 물어보지 않는다. 따라서 이를 물어보기 위해서는 https를 적용해야 됨

4. 이번 주 진행 내용

4주차 project burn up 차트

4.1. 페어 개발 (월~수)

환경변수를 개발용, 배포용으로 나누어 설정

• 지난 주 배포하면서 수동으로 바꾸어줘야 했어서 매우 불편했음
• 개발용, 배포용으로 나누고, 각각에 대한 실행스크립트를 설정함

// package.json
"scripts": {
    "start": "cross-env REACT_APP_CLIENT_ENV=development node scripts/start.js",
    "build": "cross-env REACT_APP_CLIENT_ENV=production node scripts/build.js",
    "test": "node scripts/test.js"
  },

• cross-env를 통해 실행시킬 때 NODE_ENV=development 또는 NODE_ENV=production으로 설정
• 개발용과 배포용인 경우를 따로 구분해서, 이에 맞는 값을 사용하게끔 설정

핀 클릭시 발생되는 이벤트 (핀 확대 & 상세 모달 1단계 출력)

• 네이버 지도 API의 이벤트 핸들러를 이용해 각각의 핀의 이벤트 걸어주기
  • 핀(마커)이 정확하게 클릭됨
  • click을 사용하여 이벤트를 걸어주더라도 pc, mobile 모두 터치와 클릭이 잘 동작함
• 이벤트 위임을 통해 핀의 이벤트 걸어주기
  • 핀(마커)이 정확하게 클릭이 되지 않는 문제
  • touchend를 사용하여 이벤트를 걸어주면 모바일이 아닌 pc에서는 클릭이 되지 않는 문제 발생
• 하지만 각각의 핀에 이벤트를 걸어줄 경우 메모리 누수와 관련된 문제가 있을 수 있음

사용자가 위치 정보 제공 여부에 따른 지도 중심 위치 설정

사용자가 위치 정보 제공을 허용할 경우 / 사용자가 위치 정보 제공을 차단할 경우

• 사용자의 현재 위치가 서울시인지 아닌 지에 따라 초기에 나타낼 지도의 중심 위치를 다르게 설정함
  • 서울 내에 있는 경우: 사용자의 현재 위치로 설정함
  • 서울 밖에 있는 경우: 서울 중심인 시청역으로 위치를 설정함

네이버 소셜 로그인

• 마이버튼 클릭시 로그인 모달창 출력
• 네이버로 로그인 버튼 클릭하면 네이버 소셜 로그인으로 이동 후 로그인
• 네이버 아이콘이 모달 뒷배경 어둡게 해주는 필터을 뚫고 나오는 문제
• naver 아이콘의 z-index가 100이기 때문에 100보다 더 큰 z-index를 각각 모달과 필터의 css 속성으로 넣어줌

• passport 관련된 미들웨어의 위치에 따라 로그인 했을 경우 출력되는 로그가 달라짐
• express의 미들웨어는 순서에 따라 결과가 달라지고 이로 인해서 오류가 날 수도 있음
• passport의 deserializeUser가 모든 api에서 실행되는 것이 처음에는 오류인 줄 알았지만 passport에 대한 이해가 부족하여 발생한 해프닝으로 끝남

사이드바 출력

• 메인 페이지가 처음 렌더링 될 때(Component가 처음 mount 된 경우), 클라이언트에서 서버로 사용자의 로그인 여부를 확인하는 api를 호출
• 서버는 로그인 여부에 대한 결과를 클라이언트로 보내주게 되고 결과에 따라 사용자의 로그인 상태를 업데이트하고 사용자의 상태에 맞게 로그인 모달창 또는 사이드바가 출력

화면 크기에 반응하여 UI의 크기와 위치 변경

pc

갤럭시 폴드

아이패드 미니

• CSS의 max-width를 통해 화면이 일정 크기 이상으로 커지더라도 상세 모달창과 검색창의 크기를 그대로 유지할 수 있게 됨.
• px을 사용하기보다는 vh, vw, rem, %을 사용함으로써 반응형 화면을 구축할 수 있도록 노력함.
  • 문제 : 실제 모바일 환경에서의 주소창 높이를 미처 계산하지 못해 상세 모달창 화면 밑이 잘리는 현상 발생 → vh 대신 %로 해결이 가능할듯 함

cron 서버에서 서울 도시 데이터 30분 간격으로 저장 및 캐싱

import cron from 'node-cron';

...

// ??시 0분, ??시 30분마다 동작
cron.schedule(`0,30 * * * *`, cronController.cronSeoulData);

• 24시간 이내의 데이터를 저장하기 위해 30분마다 서울 실시간 도시데이터 API에 요청
• 받아낸 주요 50장소의 데이터(xml)를 json으로 가공 후, mongoDB와 Redis에 저장

최근 24시간 인구 밀도를 상세 모달 2단계에서 출력

• 사용자가 상세모달 2단계를 열면, 클라이언트가 서버측에 최근 24시간동안의 인구 밀도 데이터를 요청

• 서버는 해당 지역의 최근 24시간 인구밀도 데이터를 redis에서 가져와 클라이언트로 보내줌

• 데이터를 시간별 막대 그래프로 출력

• 한 번 요청한 데이터들은 캐싱하여 이후 다시 서버로 데이터를 요청하지 않도록 함

  • 이미 눌렀던 서울역은 로딩 없이 바로 그래프가 출력됨

• 현재 캐싱은 전역변수로 관리하기 때문에 완벽한 실시간성이 보장되지 않음

  → React Query 같은 기술에 대한 고민이 필요할 것 같음

4.2. 배포 (목)

Mildo

5. 앞으로 할 일

• https 적용
• 필터링 기능 (북마크별, 인구밀도별)
• 북마크 기능
• 내일 갈 거야 기능
• 사이드바 렌더링(북마크, 내일 갈 거야) 및 로그아웃
• 장소 검색