DEVOCEAN

시작하는 글

안녕하세요. 오픈랩 2기 프론트엔드 성능 최적화 스터디 호스트를 맡고 있는 Felix입니다.

지난 회차의 스터디를 통해 웹 프론트엔드성능 최적화 가이드라는 책 스터디를 마쳤습니다.

스터디를 통해 실용적인 케이스를 다뤄보며, 웹 사이트를 성능 측정하고 개선하면서 웹 성능 최적화 실무 경험을 해볼 수 있었습니다.

6번째 시간은 스터디 내용을 바탕으로 각자 맡고 개발하고 있는 프로젝트에 대해 성능 최적화 개선 관점으로 사이트를 분석해보고 개선점을 찾는 시간을 가졌습니다.

이와 더불어 개발을 하면서 최적화 경험했던 내용에 대해 이야기를 나눠보는 시간을 가졌습니다.

본론

이번 스터디에서는 스터디 참여중이신 이유진님, 임수현님이 개발하고 운영하신 개발 사이트에 대해서 사례를 공유해주셨습니다.

스터디 참석 중이신 3분께서 성능 최적화 분석 및 개선 경험을 공유해주셨습니다.

수현님은 https://cecom.dev/ 라는 학교 커뮤니티 사이트를 프론트엔드 성능 분석을 하고 개선한 내용을 공유해주셨고, 현 상황에 대한 고민이 있는 부분을 공유해주셨습니다.

웹 페이지가 랜더링 되어지는 순서에 따라 유저가 어색함을 느낄 수 있는 케이스에 대해 설명해주셨고, 이 경우를 어떻게 대응했다고 공유해줬습니다.

유진님은 https://snackga.me/ 라는 개발한 게임소개 사이트에 대해서 프론트엔드 성능 분석을 하고 개선한 내용 및 개선 계획에 대해 경험해 주셨습니다.

관련 내용은 다가올 12/6 Tech day에 설명해주실 예정이라, 자세한 설명은 생략하도록 하겠습니다.

진범님은 예전에 리엑트 프레임워크에서 리스트 화면 개발을 할 때 많은 양의 불필요한 데이터를 랜더링하여 속도가 느려진 경험이 있었는데요.

react-window 를 사용하여 리스트의 성능을 개선한 사례도 공유해주셨습니다.

마지막으로는 기존에 제가 성능 개선했었던 프로젝트 사례에 대해 공유했었는데요.

작년 테크데이때도 발표했었던 내용이였습니다.

당시 웹 프론트엔드 성능 개선하면서 주요했던 포인트들에 대해 공유드렸고,

아래 내용에 대해 현업에서 적용하는 방법과 적용시 임펙트가 큰 부분에 대해서 공유드렸습니다.

이러한 성능 개선 작업을 통해 당시 개선했던 사이트의 성능 개선 수치들이 아래처럼 향상되었다는 것을 확인할 수 있었습니다.

결론

스터디는 단순 공부에만 끝나는 경우가 많은데요,

프론트엔드 성능 최적화에 대해 실무 적용을 위한 분석 방법과 개선 방법에 대해 생각해보고 실무에 적용하는 시간을 통해서

프론트엔드 성능 최적화 분석을 해보고 개선하는 시간을 갖게 되어서 의미 있던 시간이였던 것 같습니다.

리엑트는 커뮤니티 생태계가 큰 만큼 react.js나 next.js나 성능 관련 컴포넌트 library도 많이 개발되었는데요.

그만큼 상대적으로 쉽게 성능 최적화를 할수도 있지만, 리엑트라는 dependency때문에 그리 간단하지 않을 수도 있었던 것 같습니다.

프론트엔드 개발자로서, 실무에서 성능 최적화에 대해 스터디를 통해 알게된 툴로 분석하고 결과를 토대로 실질적인 개선을 할 수 있으셨으면 좋겠습니다.