Performance Lecture 1 - Lighthouse로 시작하는 웹 최적화

웹 성능 최적화의 핵심 기법들을 다루는 강의입니다. 이미지 사이즈 최적화, 코드 분할, 텍스트 압축, 병목 코드 최적화 등 다양한 최적화 전략을 학습합니다. Chrome DevTools의 Network, Performance, Lighthouse 패널과 webpack-bundle-analyzer를 활용해 실제 성능 문제를 분석하고 개선하는 방법을 배웁니다. Web Vitals 지표(FCP, LCP, CLS 등)를 이해하고 구체적인 최적화 사례를 통해 실무 능력을 키울 수 있습니다.

Performance Lecture 2 - 애니메이션부터 이미지 로딩까지

웹페이지의 성능을 좌우하는 Jank 현상을 해결하는 방법부터 컴포넌트 지연 로딩, 이미지 사전 로딩까지. 실제 코드 예제와 함께 배우는 React 애플리케이션 최적화 기법을 소개합니다.

Performance Lecture 3 - 이미지, 폰트, CSS 최적화 완벽 가이드

Performance Lecture 4 - 레이아웃 이동 방지와 리덕스 렌더링 최적화

CLS(누적 레이아웃 시프트) 문제를 해결하고 리덕스의 불필요한 리렌더링을 최적화하는 방법을 소개합니다. React Developer Tools의 Profiler로 성능 문제를 시각화하고, react-lazy-load-image-component를 활용한 이미지 최적화까지 배웁니다.

Single Responsibility Principle (단일 책임 원칙)

클래스를 변경하는 이유는 하나여야 한다는 단일 책임 원칙(SRP)의 개념과 위반 사례, 책임 분리를 통한 개선 방법을 설명합니다.

font-face

웹 페이지 폰트 로딩으로 인한 FOUT/FOIT 문제를 근본적으로 해결하는 방법을 소개합니다. <link rel='preload'>와 @font-face의 최적 조합부터 canonical, dns-prefetch, preconnect의 차이점까지. 실제 프로젝트에 바로 적용할 수 있는 완벽한 가이드입니다.

Vercel에 배포하면서 알게된 Vercel Functions

Vercel의 Serverless Functions와 Fluid Compute 모델에 대한 이해. 기존 서버리스의 한계를 극복하고 비용 효율성과 성능을 최적화하는 방법을 알아봅니다.

Antigravity 체험기

Antigravity는 AI 기반 개발 자동화 도구로, 코드 작성부터 브라우저 테스트까지 전체 개발 프로세스를 자동화합니다. Editor/Manager 뷰로 다중 에이전트를 효율적으로 관리하고, 모든 작업을 추적할 수 있습니다.