• 팀 소개
  • 안녕하세요 mbti의 i들만 모인 우아한 아이들입니다.
• 프로젝트 소개
  • 언제 어디서나 서울시 인구 밀도 정보를 쉽게 확인할 수 있는 서비스를 제공하고자 합니다.

• 인구 밀도에 대한 정보를 제공해주고 싶었다.
• 그러나 서울시에서 이미 도시 데이터 서비스를 통해 서울시 주요 50 장소에 대한 실시간 인구 밀도 정보를 제공하고 있었습니다…
• 다만, 기존의 서비스에는 몇 가지 단점이 있었습니다.

1. 모바일 환경에서 쾌적하게 이용하기 어려웠습니다.
2. 실시간 인구 밀도 이외에도 너무 많은 정보가 있습니다. 그래서 실시간 인구 밀도 정보만 빠르게 파악하기 어려웠습니다.

💡 그래서 저희는 기존 서비스의 단점을 보완하고 이용자 편의 기능을 추가하여 언제 어디서든 쉽게 **서울시의 실시간 인구 밀도를 확인할 수 있는 서비스**를 제작하였습니다!!!

• 문제점1
  • 서울시 50곳의 도시데이터를 한번에 가져오는 API가 존재하지 않는다. 따라서 각각의 지역을 따로 불러와야 되기 때문에 오랜 시간이 걸린다.
• 고민1
  • 어떻게 하면 효율적으로 데이터를 저장하고 불러올 수 있을까?
• 해결방법1
  • 크론 서버를 구축해서 인구 밀도를 미리 저장
• 문제점2
  • 데이터가 쌓일 수록 최근 장소 50곳에 대한 데이터를 찾기 위한 정렬 시간이 오래 걸린다.
• 고민2
  • 어떻게 하면 최근 장소 데이터를 빠르게 조회할 수 있을까?
• 해결방법2
  • 레디스 사용

• 문제점
  • 상세 모달 2단계를 펼칠 때마다 서버에 해당 장소에 대한 최근 24시간 인구밀도 데이터를 요청한다.
  • 모달창을 펼칠 때마다 사용자는 1.2~1.8초를 기다려야 했고, 한 번 불러온 데이터를 다시 서버측에 요청하는 것은 낭비라고 생각했다.
• 고민
  • 이용자가 처음 요청한 데이터를 이후 다시 요청한다면 이전에 요청한 데이터를 그대로 보여줘도 되지 않을까?
• 해결방법
  • 리액트 쿼리를 이용하여 캐싱

• 문제점
  • 삼항 연산자로 로딩 페이지를 렌더링했기 때문에 렌더링을 하는데 드는 비용이 비싼데다, 현재 코드가 굉장히 복잡하게 구성되어 있다.
• 고민
  • 리액트 suspense 기능을 이용하여 로딩을 렌더링할 수 있지 않을까?
• 해결방법
  • suspense 동작 원리를 이해하고 suspense를 지원하는 react-query의 useQuery와 jotai의 atomsWithQuery를 사용하여 렌더링

• 문제점
  • 모바일 화면에서는 모달창의 제목이 잘리는 현상이 발생한다.
  • 모달창의 제목 길이에 따라 애니메이션을 넣고 싶다.
• 고민
  • 애니메이션을 넣어야 하는 기준을 어떤 방식으로 정하면 좋을까?
  • 어떻게 하면 슬라이딩 애니메이션을 넣을 수 있을까?
• 해결방법
  • gap, transition, keyframes, 두 개의 컴포넌트

• 문제점
  • lighthouse 측정 결과 지나치게 큰 bundle.js 사이즈, 낮은 LCP 점수, 사용되지 않음에도 불러들이는 자바스크립트 등 성능 저하를 일으키는 요소들이 산재
• 고민
  • 어떻게 하면 이를 극복하고 웹의 성능을 향상시킬 수 있을까?
• 해결방법
  • React.lazy로 코드 스플리팅
  • webpack에서 vite로 번들러 마이그레이션
  • nginx에 gzip으로 컨텐츠 압축 설정
  • 네이버 지도의 줌 설정을 14에서 16으로 설정

• 해결방법에 대한 자세한 내용은 노션 페이지에 있어요! 궁금하면 방문해주세요 🙂
• 지금까지 우아한 아이들의 발표 영상이었습니다. 감사합니다!