개발자
류준열

web-optimize

모달 렌더링 속도 66% 향상 (150ms -> 50ms)

레이지 로딩이 안되는 문제를 처리하는 과정에서 display:none과 react-slick이 일으키는 레이아웃 쓰래싱을 발견하고 모달 전체 렌더링 속도를 66% 향상시켰다. (150ms -> 50ms)

랜딩페이지 최상단 섹션 렌더링 속도 개선

0부터 1을 만드는 작업은 AI를 통해서도 할 수 있겠지만, 80점에서 90점, 90점에서 100점으로 가는 여정에는 결국 개발자가 한땀한땀 뜯어보는 과정이 필요함을 느꼈다.

code spliting으로 성능 개선

게시글 페이지의 page.js에서 highlight 라이브러리를 분리하여 lighthouse 점수를 78 -> 85 로 증가시켰다.

SSR에서 고려해야 할 것들

next는 SSR을 할 수 있는 리액트 프레임워크이다. JSX문법으로 렌더링 할 코드를 작성하면, next 서버에서 html을 만들어주고 그 이후 hydration이 진행되면서 리액트(CSR)이 진행된다.