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

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

2. 이번 주 구현 내용

1. 지도에 표시된 마커 필터링 기능 구현
2. 주요 장소 검색 기능 구현
3. 주요 장소 북마크 등록 기능 구현
4. https 적용
5. 성능 개선을 위한 리팩토링

3. 주요 구현 내용

주요 장소 검색

이용자의 모든 입력에 검색 API를 호출해야 하는가?

• 사용자가 한 글자씩 입력할 때마다 검색 API를 호출하는 것은 서버에 부담를 줄 수 있음

• 처음에 debounce를 적용하려고 했으나 React 18에서 새로운 Hooks인 useTransition , useDeferredValue 가 추가되었다고 하여 이를 이용해서 구현 시도

  → useTransition 과 useDeferredValue 는 이용자 기기의 성능에 따라 빨리 처리시킬지 늦게 처리시킬지 정해주기 때문에 기기의 성능이 좋다면 hooks를 적용하기 전과 차이가 없음

• 클라이언트측 부담이 아니라 서버측 부담을 줄여주려고 debounce를 적용하려한 것이기 때문에 다시 setTimeout를 통해 직접 debounce 구현

• before debounce

• 한 글자씩 입력할 때마다 요청

• after debounce

• 요청 횟수가 눈에 띄게 줄음

UI

화면 크기에 따른 애니메이션 적용

• element 속성 중 실제 콘텐츠 길이를 의미하는 clientWidth를 이용해서 텍스트와 모달 간의 길이 차에 따라 애니메이션 여부를 결정하였음

• 모달 길이가 넓을 때는 텍스트가 움직이지 않음

• 좁아지면 가로로 흐르는 애니메이션 적용

화면 크기에 따라 연관검색창 너비 조절

• 화면이 좁아지면 검색창보다 길이가 길어짐

• 연관검색창의 길이가 검색창보다 길어지지 않도록 수정

상세 정보 2단계 모달 react-query 적용

왜 캐싱하려 하는가?

• 모달창을 펼 때마다 api 서버에 요청

• 따라서 모달창을 펼 때마다 1.2초~1.8초를 기다려야 함

• 그래서 jotai를 이용해 한 번 응답 받은 데이터는 전역 상태로 저장하고, 이후 같은 지역에 대한 데이터를 보여줘야 할 때에는 전역 상태에서 가져와야 함

왜 리액트 쿼리를 적용하려 하는가?

• otai를 이용해 전역 상태로 관리하면 캐싱 효과를 구현할 수 있었지만, 한 번 전역 상태로 저장된 데이터는 이후 변경되지 않음

  ex) 오후 2시에 처음 모달창을 열고 새로고침을 하지 않은 상태에서 오후 9시에 모달창을 열게 되면, 오후 2시를 기준으로 24시간 이내의 인구 밀도 정보 가 표시됨

• 좀 더 본격적으로 캐싱하기 위해 리액트 쿼리를 적용하기로 함

구현 방법

• 이전 코드

  ...
  
  const [cache, setCache] = useAtom(secondLevelInfoCacheAtom);
  
  ...
  
  // 전역에 areaName을 키로 갖고 있는 속성이 있으면 hit
  if (cache[areaName]) {
    setGraphInfo(cache[areaName]);
    return;
  }
  
  // 아니면 api 호출
  const { data } = await apis.getPastInformation(areaName);
  
  ...
  

  1. 해당 지역의 24시간 이내의 인구 밀도 정보 가 전역 상태에 저장되어 있으면 hit

  2. 없으면 api 서버에 요청하고 전역 상태에 저장

• 리액트 쿼리 적용 후

  // hooks/useGraphInfo.tsx
  
  ...
  
  const { data: graphInfoResponse } = useQuery(
  		// query key
      ['getGraphInfo', areaName],
  
  		// query function
      async () => {
        ...
        const result = await apis.getPastInformation(firstLevelInfo[0]);
  
        return result;
      },
  
  		// options
      {
        enabled,
        staleTime: QUERY_TIME.STALE_TIME, // 5분
        cacheTime: QUERY_TIME.CACHE_TIME, // 30분
        onSuccess: data => {
          success(data);
        },
        onError: e => {
          console.log('error', e);
        }
      }
    );
  
  ...
  

  1. query key

     • key-value로 저장

       ex) [’getGraphInfo’, ‘서울역’]

  2. query function

     • 비동기 처리 함수

  3. query options(중요)

     • enabled
     • staleTime
     • cacheTime

캐싱 후

• 서울역을 다시 열었을 때 그래프 그려지는 속도가 빨라짐

• 서울역을 다시 열었을 때 네트워크에 다시 찍히지 않는다.

https 적용

왜 https를 설정하려 하는가?

• 서비스에 처음 들어가면 사용자 초기 화면 설정을 위해 브라우저에서 사용자 위치 정보 허용 요청을 보냄

• 배포 후, https를 설정하지 않으면 위치 정보 제공 요청을 아예 하지 않음

Mixed Content 에러

• client는 https를 사용하고 server는 http를 사용하여 Mixed Content 에러 발생

  Mixed Content: The page at 'https://www.mildo.live/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.mildo.live:3001/api/auth'. This request has been blocked; the content must be served over HTTPS.
  

  • 혼합 콘텐츠(Mixed Content)는 https를 통해서 접속한 사이트에서 http 통신으로 스크립트, 동영상 등의 자원을 요청하는 것으로, 크롬 브라우저는 혼합 콘텐츠가 있을 경우 해당 콘텐츠를 차단함

• 배포 서버의 Nginx에서 리버스 프록시 설정을 하여 Mixed Content 에러 해결

  // etc/nginx/sites-enabled/default.conf
  server {
          ...
  
          location / {
                  root /usr/share/nginx/html/client/build;
                  index index.html index.htm index.nginx-debian.html;
          }
  
          location /api {
                  proxy_set_header Host $host;
                  proxy_set_header X-Real-IP $remote_addr;
                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                  proxy_set_header X-Forwarded-Proto https;
                  proxy_http_version 1.1;
                  proxy_pass http://www.mildo.live:3001;
          }
  }
  

• 리버스 프록시(Reverse Proxy)는 클라이언트의 요청을 대신 받아 내부 서버로 전달하여 응답을 받아오는 것

• 클라이언트에서 root location(/)으로 요청 시에는 html 파일을 보내줌

• 클라이언트에서 /api 로 시작하는 주소로 요청 시 nginx가 대신 요청을 보내고 응답을 받아와 클라이언트에 전달

4. 앞으로 할 일

• 기능 구현 마무리, 코드 검토 및 리팩토링
• 성능 테스트 후 개선
• 시나리오를 기반으로 시연 영상 찍기
• 프로젝트 소개서 검토 및 완성

5. 배포 주소

Mildo

https://www.mildo.live/