Week5_day02 스크럼
-
박은식
- useMemo useCallback등 hook에 관련해서 공부하였다.
- Performance탭 이용해서 여러 부분을 테스트를 하였다.
-
이연정
- react profile tab 관련 테스트
- history reset 관련 bug fix
-
이은솔
- 웹페이지 최적화 관련해서 공부
- Performance 탭 확대해서 뭐가 문제가 있는지 찾고 이리 저리 테스트 해봤음
-
위정훈
- 퍼포먼스 테스트 관련 툴 찾아보고 구글/네이버 지도, 옵션 넣고 테스트 해봤습니다
-
이준희
-
SSL 적용하려고 노력중적용 완료 했습니다. 포트 문제! - Redux에서 deepcopy까지 해야할 필요는 없다는 얘기를 본 거 같아서 혼란스러워 하는 중입니다
- 근데 정훈님이 올린 거 보니깐 해야하는 거 같기도...하고.. @_@;
-
- 발표
- 성능 개선 전후 이야기
-
flag 처리 이야기(상태 업데이트 시점에 관련한 이야기) X- callback 함수 형태로 시점을 다뤄볼까했지만 결국 전달되는 인자들은 업데이트가 되지 않은 인자들
- redux 상태 중 하나로 flag 두기. 처리가 가능은 할 것 같지만 좋은 방법이라는 생각은 들지 않음 + 만약 dispatch가 비동기적으로 처리되는 경우라면?
- 차이 전체 (비교하기 / undo / redo)
- 체크박스의 역할에 대한 처리방식
- 있고 없고.. 이렇게 차이가 크다고?!
-
새로고침
- 테마 하나 적용된 상태
- 전후 차이가 있는가?
- 전
- 41
- 후
- 39/37/47 왔다갔다함..
- 테마 하나 적용된 상태
-
비교하기
-
undo/redo
-
마커의 유무
- 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 형식이면 마커추가 불가하게 수정 필요
- init 시 같은 marker들이 중복해서 추가됨
- 이미지 (Serve images in next-gen formats)
- 사이즈 축소
- 느린 gitcontents 보다는 스토리지나 별도의 호스팅
- 구글 폰트 => git에 저장?
- 로컬스토리지 업데이트 시점 변경
- 좀 더 데이터저장을 보장하기 위해 setInterval 고려. 하지만 적절한지는 모르겠다.
- 맵박스 비교하기 객체 생성 (Early Loading/?..?)
- Custom Hook 사용 점검
- 맵박스 API 실행 횟수 최대한 줄이기
- 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
- 평가 항목들
- 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:
-
- https:
-
- 개선할 부분(붉은색으로 표시된 부분 / Google StyleMap 과 특별히 차이 많이나는 부분)
-
Long Tasks / Total Blocking Time
- first contentful paint (처음 콘텐츠 로딩 된?) 이후 50ms 초과하는 작업 총 시간
-
Max Potential First Input Delay(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
-
-
-
폰트, 이미지
- 포멧은 호환성 고려해서..! / 사이즈는 줄이되, 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
-
build 시
GENERATE_SOURCEMAP=false옵션을 추가해서 sourcemap을 못보게하면 chunk 파일 사이즈가 좀 줄어들것 같아요 -
로컬스토리지 업데이트 시점 변경 (2) 정훈, 은식
-
맵박스 API 실행 횟수 최대한 줄이기 (3) 연정, 준희, 은솔
- color, lightness, saturation 하나로 상태 처리!
- 이전 history 상태랑 비교해서 동일하면 실행하지 않도록 하는 거 어떨까요?
-
맵박스 비교하기 객체 상태로 생성 (Early Loading/?..?)
-
Custom Hook 사용 점검
- 사이드 이펙트의 중복 실행? (useSelctor 등..)
- useMarkerFeature
- useWholeStyle
- useHistoryFeature
- custom hook에서 다른 customHook을 호출할 때 useEffect의 배열 안에는 전역으로 관리되는 애가 들어가면 안된다.
- 사이드 이펙트의 중복 실행? (useSelctor 등..)
-
useMemo, useCallback
-
이미지로 지도 미리 대체하기(일종의 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 사용시
- 현재 위치 기능이 작동되지 않음
- 정훈님!!!!!!