---
# System prepended metadata

title: Week5 Day2
tags: [project08, ' 스크럼']

---

---
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
       - ![performance](https://i.imgur.com/1ngksNt.png)
       - ![lighthouse](https://i.imgur.com/nkAzgMr.png)
        
    - develop
        - lighthouse
            - ![lighthouse](https://i.imgur.com/sUuYIww.png)

        - performance
            - ![전체](https://i.imgur.com/88L8osa.png)
            - ![네트워크](https://i.imgur.com/fzfEAeH.png) 
                - 이미지, 폰트 관련 이슈
            - ![세부1](https://i.imgur.com/j3KvoMv.png)
                - useMap, useMarkerFeature, initializingMap
            - ![세부2](https://i.imgur.com/7Jpo1ua.png)
                - 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 사용시
        - 현재 위치 기능이 작동되지 않음
    
    
## 발표자 선정
- 정훈님!!!!!!
