---
tags: project08, 스크럼
---
Week5 Day2
===
## 스크럼

- 박은식
- useMemo useCallback등 hook에 관련해서 공부하였다.
- Performance탭 이용해서 여러 부분을 테스트를 하였다.
- 이연정
- react profile tab 관련 테스트
- history reset 관련 bug fix
- 이은솔
- 웹페이지 최적화 관련해서 공부
- Performance 탭 확대해서 뭐가 문제가 있는지 찾고 이리 저리 테스트 해봤음

- 위정훈
- 퍼포먼스 테스트 관련 툴 찾아보고 구글/네이버 지도, 옵션 넣고 테스트 해봤습니다
- 이준희
- ~~SSL 적용하려고 노력중~~ 적용 완료 했습니다. 포트 문제!
- Redux에서 deepcopy까지 해야할 필요는 없다는 얘기를 본 거 같아서 혼란스러워 하는 중입니다
- 근데 정훈님이 올린 거 보니깐 해야하는 거 같기도...하고.. @_@;

## 어제 논의되었던 부분
- 발표
- 성능 개선 전후 이야기
- ~~flag 처리 이야기(상태 업데이트 시점에 관련한 이야기) X~~
- callback 함수 형태로 시점을 다뤄볼까했지만 결국 전달되는 인자들은 업데이트가 되지 않은 인자들
- redux 상태 중 하나로 flag 두기. 처리가 가능은 할 것 같지만 좋은 방법이라는 생각은 들지 않음 + 만약 dispatch가 비동기적으로 처리되는 경우라면?
- 차이 전체 (비교하기 / undo / redo)
- 체크박스의 역할에 대한 처리방식
- 있고 없고.. 이렇게 차이가 크다고?!

### 성능 측정 시점
1. 새로고침
- 테마 하나 적용된 상태
- 전후 차이가 있는가?
- 전
- 41
- 후
- 39/37/47 왔다갔다함..

2. 비교하기
3. undo/redo
4. 마커의 유무

### 계획

- profiler를 써서 지금 성능이 어떠한지 파악
- useCallback, useMemo 최적화 가능한 상황들 ( 우리 프로젝트가 최적화되기 힘들다면 왜 그러한지 )
- 성능 측정 도구
- local storage 업데이트 타이밍 관련 수정(멘토님들 적절한 피드백이 있다면)
- Map filter expression 수정
- 큰 차이는 없었음
- ~~history reset 시 마지막으로 보고있던 버전은 남겨두기~~
- deepCopy
- marker export 시 같은 local storage 공유하는 문제
- init 시 같은 marker들이 중복해서 추가됨
- export한 url에서는 마커 표기만 되고 local storage에 추가하지는 x
- 현재 url 참고하면 해결가능할 것
- export한 url 환경에서도 마커추가 가능
- 지도 우클릭시 현재 url이 show 형식이면 마커추가 불가하게 수정 필요

## 개선 가능 사항
- [x] 이미지 (Serve images in next-gen formats)
- 사이즈 축소
- 느린 gitcontents 보다는 스토리지나 별도의 호스팅
- [x] 구글 폰트 => git에 저장?
- 구글에서도 구글 폰트 느리다고 권장하지 않는다고 하네요 [link](https://news.hada.io/topic?id=3385&utm_source=slack&utm_medium=bot&utm_campaign=TUMKA19Q8)
- 위글 댓글 보니까 [이런글](https://han41858.tistory.com/54)이 있는데 구글에서 로컬 스토리지 보다는 세션 스
- [x] 로컬스토리지 업데이트 시점 변경
- 좀 더 데이터저장을 보장하기 위해 setInterval 고려. 하지만 적절한지는 모르겠다.
- [x] 맵박스 비교하기 객체 생성 (Early Loading/?..?)
- [x] Custom Hook 사용 점검
- 맵박스 API 실행 횟수 최대한 줄이기
- [x] color, lightness, saturation 하나로 상태 처리!
- 이전 history 상태랑 비교해서 동일하면 실행하지 않도록 하는 거 어떨까요?
- 사이드바에서 메뉴 하나만 눌러도 전체 사이드바 컴포넌트가 리렌더링되는 문제 ..? (useMemo 사용하면 해결될까요??)
- 체크된 상태를 받아와야 해서 전체가 리렌더링되는 것이 맞지 않나요?(헤더나 푸터 제외하고) (그런 것 같네요..!)
- useMemo, useCallback

### 점수들
- lighthouse
- YJ(local) - 39, 42
- image resize, public 후
- 47, 49
- Largest Contentful Paint, Speed Index에서 큰 개선

- ES - 60
- treo
- YJ - 19
- ES - 11
<img src="https://i.imgur.com/vgWQAgU.png" width="50%" />

- 평가 항목들
- First Contentful Paint : 첫 번째 텍스트 또는 이미지가 페인트되는 시간
- Speed Index : 페이지의 내용이 얼마나 빨리 표시되는지
- Largest Contentful Paint : 가장 큰 텍스트 또는 이미지가 그려지는 시간
- Time to Interactive : 페이지가 완전히 상호작용하는데 걸리는 시간
- Total Blocking Time : 작업길이가 50ms를 초과한 경우 FCP와 TTI의 모든 기간의 합계

- sitespeed.io
- 평가환경 : MacbookPro 2015 mid, BigSur, Chrome v87
- http:
- <img src="https://i.imgur.com/mMwwVZ9.png" width="50%" />
- https:
- <img src="https://i.imgur.com/KxMKrmF.png" width="50%" />
- 개선할 부분(붉은색으로 표시된 부분 / Google StyleMap 과 특별히 차이 많이나는 부분)
- Long Tasks / [Total Blocking Time](https://web.dev/tbt/)
- first contentful paint (처음 콘텐츠 로딩 된?) 이후 50ms 초과하는 작업 총 시간
- [Max Potential First Input Delay(FID)](https://web.dev/lighthouse-max-potential-fid/)

| 평가항목 | Google | 프로젝트 |
| ---------------------------- | ------ | -------- |
| Total Blocking Time | 105ms | 6.626s |
| Total Duration of Long Tasks | 1.503s | 11.770s |
| Total Transfer Size | 1.1mb | 3.7mb |
| Max Potential FID | 98ms | 2.463s |

- performance
- deploy
- 
- 

- develop
- lighthouse
- 

- performance
- 
- 
- 이미지, 폰트 관련 이슈
- 
- useMap, useMarkerFeature, initializingMap
- 
- inializeMap, setFeatureStyle

## 최적화 시도
1. 폰트, 이미지
- 포멧은 호환성 고려해서..! / 사이즈는 줄이되, 2배로
- 이미지 스프라이트
- ~~캐싱~~
~~- NginX 캐시 설정
- 왜?...~~
- 웹폰트 경량화
- woff, woff2 (https://github.com/UYEONG/NotoSans-subset)
- subset > 사용자가 입력을 하는 부분이 마커뿐이라
- 큰 차이는 없었음
- 브라우저 콘솔 에러 메시지; 사이즈 문제????

        map:1 Failed to decode downloaded font: http://localhost:3000/fonts/NotoSans-Medium.woff2
        map:1 OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed size
        map:1 Failed to decode downloaded font: http://localhost:3000/fonts/NotoSans-Medium.woff
        map:1 OTS parsing error: incorrect file size in WOFF header

2. build 시 `GENERATE_SOURCEMAP=false` 옵션을 추가해서 sourcemap을 못보게하면 chunk 파일 사이즈가 좀 줄어들것 같아요
- https://stackoverflow.com/questions/51984146/how-to-disable-source-maps-for-react-js-application

3. 로컬스토리지 업데이트 시점 변경 (2) 정훈, 은식

4. 맵박스 API 실행 횟수 최대한 줄이기 (3) 연정, 준희, 은솔
- color, lightness, saturation 하나로 상태 처리!
- 이전 history 상태랑 비교해서 동일하면 실행하지 않도록 하는 거 어떨까요?

5. 맵박스 비교하기 객체 상태로 생성 (Early Loading/?..?)

6. Custom Hook 사용 점검
- 사이드 이펙트의 중복 실행? (useSelctor 등..)
- useMarkerFeature
- useWholeStyle
- useHistoryFeature
- custom hook에서 다른 customHook을 호출할 때 useEffect의 배열 안에는 전역으로 관리되는 애가 들어가면 안된다.

7. useMemo, useCallback

9. 이미지로 지도 미리 대체하기(일종의 Lazy Loading인가.....?)(아마 그냥 UX 향상일걸요?)
-https://docs.mapbox.com/help/tutorials/improve-perceived-performance-with-static/#align-image-to-map

- 기타 이슈
- 마커 export 시에는 local storage에 들어가지 않게 처리
- https
- 안전하지 않은 콘텐츠
제공받은 데이터를 받아오는 url이 http로 되어있는 관계로 fetch error 발생
- http 사용시
- 현재 위치 기능이 작동되지 않음

## 발표자 선정
- 정훈님!!!!!!