스터디85 [Real World 스터디] - Kick Off 2023년 8월 24일 목요일 Real World 스터디 킥오프 미팅을 가졌습니다. 오프라인으로 진행되는만큼 처음에 다들 조금 어색해서 아이스브레이킹 시간을 가지면서 함께 공통점을 찾으려고 노력했습니다. 이후 이번 스터디에 참여하게 된 목적이 개개인마다 모두 다 다를텐데 대표적으로 기술, 인맥, 동기부여, 명확한 목표 설정 등이 있을 겁니다. 이번 스터디를 통해 저희가 하고 싶은 일은 다음과 같이 6가지로 간추릴 수 있을 것 같습니다. 1. UI 개선 2. API 인터페이스 설계 3. 다른 프레임워크 사용하기 4. 새로운 기술 스택 사용하기 5. 새로운 패턴 사용하기 6. 하지 못했던 비즈니스 로직의 리팩토링 진행하기 저는 4번과 6번을 선택하였으며 앞으로 관심사와 하고 싶은 일에 따라 조 편성이 완료되.. 2023. 8. 25. [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. 이전 1 2 3 4 5 6 7 ··· 22 다음 반응형