프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

수강자: 최지우, 정승원, 고석주

수강후기: 이전에 궁금했던 렌더링 최적화에 대해 확실히 알 수 있게 되었다. Lazy loading을 사용해 성능을 개선할 수 있다는 점에 대해 알게 되었고, 프로젝트에 next/image를 적용하여 성능을 개선할 수 있었다. 또한 placeholder 기능을 활용해 Cumulative Layout Shift 역시 방지할 수 있었다.

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

수강자: 최지우, 정승원, 고석주

수강후기: 강의를 통해 코드의 재활용성을 높일 수 있는 방안을 더 고려했다. 실제 코드 사용에 있어서 적용해서 컴포넌트 및 페이지마다 중복되는 코드를 줄였다.

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

프론트엔드 개발자로서 웹 성능 최적화는 사용자 경험을 향상시키는데 있어 매우 중요한 주제입니다. 이번 강의를 통해 로딩 성능과 렌더링 성능 개선을 위한 다양한 방법들을 배울 수 있었습니다.

특히 이미지 최적화, 병목 코드 개선, 번들 파일 최적화, 텍스트 압축 등 로딩 속도를 높이기 위한 기법들이 인상 깊었습니다. 또한 브라우저 렌더링 과정을 이해하고 Layout, Paint 트리거를 고려하여 렌더링 성능을 최적화하는 방안도 유익했습니다.

Lazy loading을 활용한 성능 개선과 placeholder 기능을 활용해 Cumulative Layout Shift 역시 방지할 수 있었습니다. 웹 성능이 사용자 경험에 직결되는 만큼, 앞으로도 꾸준히 공부하고 실무에 활용하며 더 나은 웹 서비스를 만들어 가겠습니다.

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

웹 서비스의 성능은 사용자 경험과 직결되는 중요한 요소입니다. 이번 강의를 통해 이미지, 동영상, 폰트, 캐시 등 다양한 측면에서 성능을 최적화하는 방법을 배울 수 있었습니다.

이미지와 동영상의 경우 WebP와 WebM 포맷을 활용하여 파일 크기를 줄이고, Intersection Observer API를 사용한 지연 로딩으로 불필요한 로딩을 최소화하는 기법이 인상 깊었습니다. 또한 폰트 최적화를 위해 적용 시점을 컨트롤하고 캐시를 효과적으로 활용하는 방안도 유익했습니다.

강의에서 배운 내용을 바탕으로 실제 프로젝트에서 컴포넌트와 페이지의 중복 코드를 줄이고 재사용성을 높일 수 있었습니다. 이는 코드의 유지보수성을 향상시키고 개발 효율성을 높이는 데 큰 도움이 되었습니다.