2022 스터디 - ChoDragon9/posts GitHub Wiki

기타

• literals - undefined가 global object에 정의된 이유
• HTTP Cache
• 하드웨어 가속
• TypeScript Template Literal
• 이모지 지원 체크
  • OS 별 지원 유니코드 버전이 다르고, 유니코드에 이모지가 포함됨(https://www.unicode.org/reports/tr51/#Versioning)
  • 이모지 버전은 이모지 버전별로 이모지 1개를 렌더링해서 현재 OS에서 지원하는 이모지 버전 체크(버전 체크 로직)
  • 버전 체크 후 버전에 맞는 이모지 데이터셋 사용
    • iOS : https://blog.emojipedia.org/ios-15-4-emoji-changelog/
    • Samsung : https://blog.emojipedia.org/samsung-one-ui-5-0-emoji-changelog/
  • 다른 폰트와 이모지 유니코드 겹칠 때 해결 방법
    • https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

리엑트 라이프사이클 자료 -https://julesblom.com/writing/react-hook-component-timeline

성능 최적화

자료 추가

• https://www.nan.fyi/magic-motion
• https://aerotwist.com/blog/pixels-are-expensive/

• Safari 15.2에서 transform 사용 시 깜빡거림.
• iOS에서 레이아웃 계산이 빈번하면 애니메이션 성능 저하됨
  • 재현 상황: 포스트의 컨텐츠 더보기 클릭 시 하단으로 펼쳐지는 애니메이션
  • 해결: 부모 노드의 높이값 변경 후 자식 노드에 높이 변경 애니메이션 처리

React

• React 부분 렌더링
  • return 없고 useEffect만 사용하는 Custom Hook은 Headless Component를 사용하면 불필요한 리렌더링을 방지할 수 있음
• React 부분 렌더링2
• 커스텀 훅
  • 커스텀 훅을 재실행해도 useState는 유지됨
  • 커스텀 훅에 선언되는 함수들을 useCallback로 선언하면 리렌더링을 방지할 수 있음

Long Task

• https://web.dev/optimize-long-tasks/

Scheduler

• Prioritized Task Scheduling API
• https://github.com/WICG/scheduling-apis/blob/main/explainers/prioritized-post-task.md

setImmediate 스펙도 setTimeout으로 처리하는 것보다 더 빠른 성능 내도록 설계되었지만 해당 스펙은 2011에 MS 직원 2명의 발의했고 Edge에서만 잠깐 지원되었음. core-js에 polyfill로 구현됨

• MVP API인 postTask API는 inter-frame의 사용자가 지정할 수 있는 task queue인 scheduler task queue가 생긴 것에 의미가 있음
• MVP API 다음 스펙인 비동기 요청의 우선순위, 써드파티 라이브러리 컨트롤, DOM 조작 우선순위 등과 같은 스펙이 도입되면 좀 더 유용할듯

Service Worker

• https://developer.chrome.com/docs/workbox/

Privacy Sandbox

• Privacy Sandbox 란

완료

• Synthetic & Real User Monitoring
• RAIL
• Web Vitals
• 네트워크 성능 측정