7주차의 내용은 프론트엔드 최적화 과제였다. 메인 페이지에서는 LCP를 줄이는게 목표였고, 상품목록 페이지에서는 화면의 상태에 따라 사용성 확대를 위한 ui 처리와 CLS를 줄이는게 목표였다.
사실 제대로 된 최적화를 진행을 해 본적은 없어서 이번주차 과제는 매우 소중한? 과제였다. LCP를 잡기 위해 Lighthouse를 측정을 하고, Network har 파일을 분석하였으며, Performance(성능)을 측정을 하였다.
이번 과제에서는 직접 ui 적으로 확인이 필요한 부분, 예를들어 상품목록페이지에서 다음 6가지 상태
(데이터 없는 최초 진입, 이전 데이터가 있는 갱신, 성공 + 0건, 최초 실패, 갱신 실패, 취소)
의 확인은 직접 영상을 찍으며 확인을 하였고
LightHouse, Network, Performance trace 해석은 다음과 같이 파일을 뽑은 다음
https://github.com/ChromeDevTools/chrome-devtools-mcp 크롬 devTool Mcp를 셋팅을 하여 claude와 분석을 하며 진행을 하였다.
자세한 내용은 프론트엔드 성능 최적화 이쪽을 참고해보면 될 거 같다.
이론적으로만 알고 있던 내용을 직접 실전으로 하나씩 파헤쳐보니 헷갈리던 개념이 머릿속에 직접적으로 남았고 LCP를 잡으려면 어떤 정보들을 확인을 해야하는지, CLS를 잡으려면 화면의 상태에 따라 어떻게 처리를 해줘야 하는지 자세히 알아볼수 있었다.
이번주 발제에서 제일 기억에 남는 멘토님의 말씀은 이 부분이였다.
"사실 우리가 프론트엔드 최적화를 진행한다고 하면 점수로만 표현을 하는 경우가 많은데 점수의 개선보다 중요한건 사용자 경험의 최적화이다"
우리가 항상 생각해야 하는 부분은 '사용자' 라는걸 다시 한번 상기시키며 이번주도 아주 알 찬 발제와 과제였다고 생각한다.
