Co-Study/FE 성능 최적화 스터디 2023 ✔️4 [FE 성능 최적화 스터디] - 네 번째 미팅 (마지막) 2023년 8월 1일 화요일 4장 이미지 갤러리 최적화 - 레이아웃 이동 피하기 - 이미지 지연 로딩 - 리덕스 렌더링 최적화 - 병목 코드 최적화 위 개념에 대해 살펴봤습니다. 레이아웃 shift에는 다양한 원인이 있는데 보통 요소의 사이즈 사전에 정의하기, 이미지 지연 로딩에서는 이번에는 IntersectionObserver 객체를 사용하는 것이 아닌 react-lazyload 라이브러리를 활용하는 방식, 리덕스 렌더링 최적화에서는 useSelector와 관련해서 성능을 최적화할 수 있는 방법, 병목 코드 최적화에서는 메모이제이션을 활용한 캐싱 기법이 있었습니다. 이렇게 해서 한 달 동안 FE 성능 최적화 스터디는 끝이 났습니다. 실무에서 바로 활용할 수 있는 유용한 지식들이 많아서 좋았고 책도 너무.. 2023. 8. 2. [FE 성능 최적화 스터디] - 세 번째 미팅 2023년 7월 25일 화요일 3장 홈페이지 최적화 - 이미지 지연 로딩 - 이미지 사이즈 최적화 - 동영상 최적화 - 폰트 최적화 위 개념에 대해 살펴봤습니다. 이미지 지연 로딩 파트에서는 JS의 IntersectionObserver 객체를 사용해서 처리하는 방식, 이미지 사이즈 최적화 파트에서는 정적 파일에 대한 이미지 해상도 줄이기, 압축률 높은 webp 포맷으로 변환, 호환성 고려, 동영상 최적화에서는 호환성을 고려한 Video 태그와 webm 포맷, 폰트 최적화에서는 font-display, 압축률 높은 woff 포맷, 서브셋 폰트, base64 data URI 등에 대해 다뤘습니다. 이제 3장의 나머지 부분과 4장을 마지막으로 앞두면서 다음 주 책을 다 끝내고 잘 마무리 해보겠습니다~! 2023. 7. 26. [FE 성능 최적화 스터디] - 두 번째 미팅 2023년 7월 18일 화요일 2장 올림픽 통계 서비스 최적화 - 애니메이션 최적화 - 컴포넌트 지연 로딩 - 컴포넌트 사전 로딩 - 이미지 사전 로딩 위 개념들에 대해 살펴봤습니다. 그리고 사전에 같이 의논해보면 좋을 포인트, Q&A, 키워드 등을 준비해서 이야기를 나눴습니다. 상당히 많은 키워드와 이야기들이 주고 갔고 저도 개인적으로 그와 관련된 경험들을 공유했습니다. 또 최근에는 이번 장에서 학습한 컴포넌트 지연 로딩과 이미지 사전 로딩을 활용하여 회사 코드 최적화도 했습니다. 생각보다 책이 무겁지 않고 실무에서 유용한 부분들이 많아서 도움이 많이 됩니다. 재밌습니다. 2023. 7. 18. [FE 성능 최적화 스터디] - 첫 번째 미팅 2023년 7월 11일 화요일 1장 블로그 서비스 최적화 - Lighthouse 툴을 이용한 페이지 검사 - 이미지 사이즈 최적화 - 병목 코드 최적화 - 코드 분할 & 지연 로딩 - 텍스트 압축 위 개념에 대해 살펴봤습니다. 책을 읽으면서 중간 중간 짚어보면 좋을 포인트와 키워드들을 가지고 이야기를 나눴습니다. 이미지 사이즈 최적화에서는 intrinsic (실제 사이즈)하게 그대로 렌더링하면 안되고 레티나 디스플레이를 고려하여 render size의 2배 정도로 하면 적당합니다. 그리고 병목 코드 최적화에서는 무분별한 반복문 사용을 자제하고 정규 표현식 이용, 코드 분할 & 지연 로딩에서는 React의 lazy와 Suspense를 이용한 dynamic import, 텍스트 압축에서는 API 서버로부터 .. 2023. 7. 13. 이전 1 다음 반응형