프론트엔드 최적화 12가지, React에서 꼭 확인할 것

프론트엔드 최적화 12가지, React에서 꼭 확인할 것

3,000원

10

프론트엔드 최적화 12가지, React에서 꼭 확인할 것

React 프로젝트에서 최적화를 위해 꼭 확인해야 할 12가지를 배우고, 실제로 사용하는 방법을 배워보세요!

heart icon

찜하기

share icon

공유하기

🚀 강의 목적과 학습 목표

이 강의는 React 애플리케이션의 성능을 최적화하기 위한 12가지 필수 전략을 학습하며, 효율적이고 빠른 웹 애플리케이션을 만드는 방법을 익힐 수 있도록 도와드립니다. React 최적화를 체계적으로 배워보세요! 😊

📍 React 성능 최적화의 중요성 이해: React 애플리케이션에서 성능 병목이 발생하는 원인을 이해하고, 이를 해결하는 기본 원칙을 학습합니다.
📍 최적화 전략 12가지: React.memo, useCallback, useMemo, 코드 스플리팅, 동적 import, Lazy loading, Suspense, 가상화(Virtualization), 불변성 유지, 렌더링 최소화, 브라우저 렌더링 최적화, Lighthouse 활용법 등을 학습합니다.
📍 실전 최적화 기법 적용: 다양한 실전 사례를 통해 애플리케이션의 성능을 분석하고, 최적화 전략을 적용하는 방법을 익힙니다.
📍 도구 활용법: React DevTools, Chrome DevTools, Lighthouse 등을 활용해 성능 문제를 진단하고 개선합니다.
📍 최적화 전후 비교 분석: 최적화 적용 전후의 성능을 비교하며, 실제 효과를 체감합니다.


👩🏻‍💻 이런 분을 위해 만들었어요

📍 React 애플리케이션의 성능 최적화에 대해 배우고 싶은 초급 및 중급 프론트엔드 개발자
📍 느리거나 비효율적인 React 애플리케이션의 성능을 개선하고 싶은 개발자
📍 최적화된 웹 애플리케이션을 설계하며 사용자 경험을 향상시키고 싶은 웹 개발자

🎁 강의는 이렇게 구성돼요

📍 React 최적화 전략 12가지를 단계별로 학습하고, 애플리케이션에 적용합니다!
📍 React DevToolsLighthouse를 활용해 성능 문제를 진단하고 개선합니다!
📍 실전 사례를 통해 최적화 전후의 변화를 비교하며 효과를 확인합니다!

💻 쉽게 이해되는 3분할 화면

위코드는 여러분이 최대한 쉽게 이해할 수 있도록 모든것을 준비했습니다. 강의 영상의 핵심 내용을 실시간으로 정리해 드리고, 직접 수정하고 실행해볼 수 있는 코드까지 실시간으로 제공하는 위코드만의 코딩 강의 플랫폼에서 재밌고 쉽게 학습하세요!


📍 모바일에서도 쉽게 볼 수 있는 세로 비율의 강의 영상
📍 강의 내용을 이해하기 쉽도록 실시간 핵심 내용 정리
📍 강의 내용 흐름에 맞추어 실시간 업데이트 되는 코드 에디터
📍 직접 수정해보고 실행도 할 수 있는 코드

🙋🏻 질문이 있으신가요?

링크를 통해 위코드 코딩 질문방으로 오세요!
위코드 스태프들이 직접 친절하게 알려드립니다! 🫡
👉 위코드 코딩 질문방으로 들어가기 (비밀번호: wecode)


커리큘럼

미리보기를 통해 콘텐츠를 확인해보세요.

  • Play Icon실전 예제: Lighthouse와 DevTools로 성능 개선 측정
  • Play Icon프로젝트: 12가지 프론트엔드 최적화 체크리스트 종합 적용
  • Play Icon추가 심화: Concurrent Mode와 Suspense에서의 최적화
  • Play IconWebpack/Babel 설정으로 트리쉐이킹 최적화
  • Play IconReact Profiler로 렌더링 흐름 구체적 분석
  • Play Icon최종 과제: 프론트엔드 최적화 종합 사례 실습