프론트엔드 성능 최적화 가이드

 

프론트엔드 성능 최적화 가이드

수강생 2천 명이 선택한 인프런 인기 강의 다년간의 컨설팅과 강의 노하우를 담았다! 4가지 실전 서비스로 배우는 웹 성능 최적화 기법 '웹 성능 최적화'는 프론트엔드 개발자라면 반드시 고민해야 하는 이슈다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르고, 기법도 매우 다양하기에 개발 중인 서비스 특성에 맞게 커스터마이징하는 능력이 중요하다. 저자는 수많은 기업의 웹 서비스 성능을 컨설팅하고, 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등 강의 플랫폼에서 최적화 및 개발 강의를 진행한 경험을 책에 고스란히 녹여 냈다. '성능 최적화' 주제를 효과적으로 배우는 데 이론보다는 실습이 중요함을 강조하며 현장감 있게 구성했다. 이 책은 실생활에서 흔히 개발하는 4가지 실습 사이트를 예제로, 직관적인 최적화 노하우를 전달한다. 콘텐츠 사이즈 최적화, 컴포넌트 지연 로딩과 사전 로딩, 병목 코드 최적화, 캐시 최적화 등 다각적인 포인트를 익혀 나만의 최적화 경험치를 쌓아 보자.

저자

유동균

출판

인사이트

출판일

2022.11.15

 

인터넷 서점에서 이 책 저 책 뒤적거리다가 우연히 발견한 책이다.

 

 

정식 제목은 "웹 개발 스킬을 한 단계 높여 주는 프론트엔드 성능 최적화 가이드"

 

1. 블로그 서비스 최적화

2. 올림픽 통계 서비스 최적화

3. 홈페이지 최적화

4. 이미지 갤러리 최적화

 

이렇게 4장으로 구성되어 있는데 이 책의 서비스들은 react로 만들어졌다고 한다.

솔직히 react가 뭔지는 잘 모르겠다.

 

1장부터 git로 소스를 다운받아 사용하게 되어있고 node.js 를 설치해서 가상서버를 돌리게 되어있다.

그런데 따라하다보니 npm으로 실행하는데부터 막힌다.

 

node.js 최신 버전을 설치하고 책에 나온대로 npm run start를 실행했는데 뭔 에러가 그렇게 뜨던지...

구글링하다보니 버전이 너무 높아서 그런거 같아서 v.16 으로 다운그레이드를 했더니 아무 이상없이 실행이 된다.

너무 요약을 해놔서 그런가 node.js를 한번도 안써본 나같은 사람에겐 이런 부분에 대한 설명이 조금 부족해서 아쉽긴 하다. (너무 시대에 뒤쳐졌나보다...react랑 node.js도 공부해야겠다...)

 

일단 크롬 브라우저의 분석툴을 이용해서 블로그 서비스 실행 시 어떤 부분에서 병목현상이 생기는지 등을 체크할 수 있게 도와주고 있는데, 사실 개발자 도구를 이용해서 웹페이지 구조분석이나 조금 할줄 알았지 크롬에 lighthouse라는 분석툴이  있다는 것도 이번에 첨 알았다.

 

그 분석툴을 가지고 어떻게 활용할 수 있는지, 개선할 수 있는지 등에 대한 부분을 설명해 주는데 간편하기도 하고 실 적용에도 큰 도움이 되는 것 같다.

 

말 그대로 웹 개발 스킬을 높일 수 있는 그런 내용들인거 같다.

요즘은 워낙 컴퓨터나 인터넷, 모바일 네트워크 성능이 좋아서 사실 이미지 엄청 쓰고 해도 사용자가 로딩속도가 느리다고 크게 느끼지 못할 수도 있다.

 

하지만 항상 최적화라는 부분은 제품을 만들고 난 뒤에 마무리로 다듬어줘야 하는 부분이다.'

마치 옷을 샀을 때 재봉이 조금 덜 되어있거나 실밥이 튀어나와 있거나 하는 것들을 깔끔하게 QC 해주는 그런 것과 같다고나 할까?

 

그러니 처음 개발할 때부터 이런 것들을 염두에 두고 개발을 해야 결국 완성도가 높아진다.

 

어쨌거나, react를 한번도 해본 적이 없으니 만들어진 소스를 봐도 사실 어떻게 작동하는지 잘 모르겠다.

하지만 중요한 것은 그런 소스가 아니라 뭘로 만들어졌던 간에 최적화할 수 있는 방법에 촛점이 맞춰져 있기 때문에 자바로 만들었던, PHP로 만들었던 소스는 중요하지 않고 저자도 그렇게 설명하고 있다.

 

끝까지 보면 개발 스킬이 한 단계 업그레이드되어 있을 것 같다.