요약
성능 최적화란 어떤 것인지, 어떻게 접근해야 하는지에 대한 생각을 담았습니다.
로딩 성능 최적화, 렌더링 성능 최적화에 대해 공부한 내용을 정리하고, 공유합니다.

목차

• 🤔 들어가며 : 성능 최적화, 너무 어렵게 생각하지 말자!
• ⛳️ 웹 성능 개선 요약본!
• Part 1. 로딩 성능 개선
• Part 2. 렌더링 성능 개선
• 성능 최적화에 대한 생각

🤔 들어가며 : 성능 최적화, 너무 어렵게 생각하지 말자!

성능 최적화 읽을 때의 마음가짐은, 모든 상황에 완벽히 대비하기 위해 공부한다는 부담은 가지지 않아도 된다.
비슷한 상황이 닥쳤을 때 “이게 뭐지? 어떻게 해결하지?” 하고 당황하기보다, “음, 이런 건 이런 걸 좀 살펴봐야 하나 보다.” 하고 방향을 잡을 수 있게 연습한다는 느낌이면 좋겠다.

짧게말해, 부담 가지지 말고 ‘이런 상황에선 이런 고민을 할 수 있구나!’ 정도로만 배워가면 좋을 것 같다.

⛳️ 웹 성능 개선 요약본!

프론트엔드 성능은 크게 로딩 성능과 렌더링 성능으로 나누어진다.
앞으로 다루게 될 성능 목표는 아래와 같다.

• 로딩 성능 : 페이지가 얼마나 빨리 보이느냐
• 렌더링 성능 : 사용자 인터렉션에 얼마나 빠르게 반응하느냐

Part 1. 로딩 성능 개선

1. 요청 크기 줄이기
2. 필요한 것만 필요한 때에 요청하기
3. 같은 건 매번 요청하지 않기

Part 2. 렌더링 성능 개선

1. 최소한의 변경만 일으키기

성능 최적화에 대한 생각

성능 최적화에 대한 나의 생각으로 글을 마무리하려고 한다.

‘성능 최적화를 했어요’라는 말을 들으면 사실 잘 와닿지 않았다.
‘성능 최적화’라는 말 자체가 매우 추상적이기도 하고, 왜 해야 하는지, 어떤 성능을 개선했다는 것인지, 그래서 어떤 결과를 가져왔는지 알 수 없기 때문이다.

사실 난 성능 최적화 자체를 어렵게 생각하지는 않는다.
컴포넌트의 계층을 나누어 리렌더링을 최소화하거나, 파생 상태와 원본 상태를 구분하는 것 또한 성능 최적화의 일부라고 생각하기 때문이다.

그래서 ‘어떤 성능’을 ‘왜’ 개선할 것인지가 중요하다고 생각한다.

처음에 성능 최적화에 대해 배우면서도 흥미를 느낄 수 없었던 것은 ‘당장에 성능을 개선해야 하는 이유’를 알지 못했기 때문이기도 하다.
‘당장 사용자가 쓰기엔 큰 문제가 없어 보이는데, 지금 이 개선을 왜 해야 하지? 어떤 결과를 확인할 수 있는데?’라는 생각이 들어 그 흐름을 받아들이기 어려웠던 것 같다.

지금 성능 최적화를 재밌어하게 된 이유는 성능을 어디서, 어떻게 관찰해야 하는지 알게 되었고, 몇가지 지표를 통해 ‘성능 최적화’의 필요성을 스스로 눈치챌 수 있게 되었기 때문이다.
그리고 사실 성능 최적화를 해야 하는 이유와, 어떻게 향상하겠다는 목표만 명확해진다면 해결책은 경험을 통해 쌓아나가면 된다.

따라서 ‘성능 최적화’는 정답이 정해진 문제가 아니라, 사용자와 서비스의 맥락에 맞게 최선의 답을 찾아가는 과정이라고 생각한다.