프론트 성능 최적화 강의추천

Question

프론트 개발자 준비하면서 개인 프로젝트를 준비해보려고 하는데요
이전에 했던 프로젝트들은 구현기능에만 집중했지 성능개선이나 의사결정 과정이 없어서 성능개선에 포커스를 맞춰서 진행하고 싶은데 아직 지식이 많이부족하고 개발자도구 성능탭도 보면 아직 이해도 잘 안되구요….
이 수준에 들으면 괜찮을 강의 추천부탁드립니다!

김하늘 · Answer

이런 내용의 강의는 따로 들어본 적이 없어서 추천드리기 어렵지만 어떤 식으로 공부하면 좋은지는 말씀드릴 수 있습니다.

lighthouse라는 크롬 익스텐션이 있습니다. 설치하시고 개발자 도구를 보시면 lighthouse 탭이 생겼을 거예요. Generate report 버튼을 누르면 해당 페이지에 대한 항목별 성능 및 점수 그리고 개선 사항들에 대해 알려줍니다. 각 측정 항목 등을 키워드로 구글링 해보시면서 각 개념들에 대해 공부도 하시고 실제로 개선도 해보시면 좋습니다.

강의는 아무래도 어떤 작위적인 상황을 만들어 놓고 그걸 해결해나가는 식으로 진행될 수밖에 없는데 그보단 직접 만든 거로 하시면 훨씬 와닿으실 겁니다. 내 포트폴리오가 더 풍부해지는 효과도 있구요. 나중에 면접에서도 어떤 강의를 들었다는 건 전혀 어필 포인트가 되지 않지만 내 프로젝트를 이런 식으로 개선했다는 건 분명한 포인트가 됩니다.

김헨리 · Answer

인프런의 유동균님의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화 강의 추천드려요!
저는 2021년에 이 강의를 들고 많이 배웠습니다.
Next.js를 사용하면 next/image로 이미지 최적화, next/link로 prefetch, auto code splitting을 통해 쉽게 최적화할 수 있어서 최적화 관련 코드를 작성할 필요가 크게 없지만, 이 강의는 React 기반으로 최적화를 도입하기 위해 어떻게 분석하고(Light house, bundle-analyzer) 어떻게 개선하는지 알려줘서 유용했습니다. 실제로 이 강의를 듣고 팀 프로젝트에 최적화를 적용하여 포트폴리오로 잘 활용 했었습니다.

저는 강의 Part 1과 Part 2를 들었지만, Part 1만 들어도 도움 되실 거에요.

강의: https://inf.run/Rs1r
책:    https://product.kyobobook.co.kr/detail/S000200178292