지난 2편의 글에 이어서 웹 바이탈 개선을 위해 했던 세 번째 작업에 대해 이야기해보려고 한다. https://nookpi.tistory.com/209 지난 1년간의 웹 바이탈 개선기 1편 - 다국어 동적 로드올해 회고를 쓰기 앞서 지난 1년간, 정확히는 지난 약 8개월간의 웹 바이탈 개선을 위한 작업들을 기록해보려고 한다.  먼저 결과부터 보자면 많은 개선이 있었다.  5월 초, 5%까지 내려갔던 Goodnookpi.tistory.comhttps://nookpi.tistory.com/210 지난 1년간의 웹 바이탈 개선기 2편 - SSG 제거, SSR 전환지난 1편에 이어 웹 바이탈 개선을 위해 했던 작업에 대해 이야기해보려고 한다. 2. SSG 제거, SSR 전환두 번째 작업은 Nextjs 환경에서의..

지난 1편에 이어 웹 바이탈 개선을 위해 했던 작업에 대해 이야기해보려고 한다. 2. SSG 제거, SSR 전환두 번째 작업은 Next.js 환경에서의 기존의 SSG(ISR)를 모두 제거하고 SSR로 전환한 것이다.언뜻 생각하면 SSG는 빌드 시점에 생성된 HTML이고, SSR은 유저의 요청이 있을 때 렌더링을 해서 제공하기 때문에 SSG가 SSR보다 더 빠를 수 없는데 무슨 소리지? 라는 생각이 든다. 이 작업의 배경에 대해 설명하자면 프로덕트의 배포 환경에 대한 부연 설명이 좀 필요한데, 간단하게 말해 프론트엔드 서버는 esc에 로드밸런싱이 되는 컨테이너들로 떠 있는 상황이었다. 이러한 환경에서의 SSG는 치명적인 문제가 있었으니... 유저의 매 요청이 ELB를 거쳐 각 인스턴스에 배분되다보니 우리가..

올해 회고를 쓰기 앞서 지난 1년간, 정확히는 지난 약 8개월간의 웹 바이탈 개선을 위한 작업들을 기록해보려고 한다. 먼저 결과부터 보자면 코어 웹 바이탈 기준으로도 많은 개선이 있었다.  5월 초, 5%까지 내려갔던 Good 비율은 11월인 현재 80~90%를 넘나들며 준수한 수준으로 유지되고 있다.위 지표는 모바일 기준인데, 모바일 서비스 사용자가 많은 우리 서비스의 특성과 모바일의 점수 기준이 더 짜다는 점을 고려하여 모바일 지표만 고려하여 대응하고 있다. 물론 당연히 데스크탑 지표는 더 잘 나온다. (Good 비중이 95% 수준) 그렇다면 이런 지표 향상을 위해 기울인 나름의 노력들은 무엇이 있을까? 1. i18n 데이터 동적 로드코어 웹 바이탈 개선을 위해 했던 작업 중에서도 TBT(INP)를 ..

우리 회사의 프론트엔드 레포는 모노레포 환경으로 동작하고 있다. 작년 9월쯤 터보레포 기반의 모노레포로 전환했고, 올해 3월에 pnpm을 적용했다. 모노레포를 적용하면서 패키지로 추출한 ui, animation 의 경우 해당 패키지의 진입점이 빌드 후 결과물로 명시되어 HMR 동작에 어려움을 겪게 되었다. 사실 일반적인 개발 환경에서는 문제가 없지만, ui 패키지 등을 수정하면서 작업해야 하는 Storybook과 같은 환경에서는 치명적이다. 예를 들어 다음과 같은 경우를 생각해보자. 1. Storybook - dev 실행2. ui 패키지의 Button 스타일 변경3. ui 패키지 re-build4. Storybook 에서 ui 패키지의 변경사항 감지5. Full Reload vite의 react plug..

https://leptos.dev/ Home - LeptosYour favorite language Leptos makes it easy to integrate Rust backend code with your user interface in a few lines of code. #[server] functions let you cross the client-server boundary without the boilerplate of setting up a new API endpoint, making it easleptos.dev 한동안 무심했던 rust 공부도 할 겸, Leptos를 사용해서 간단한 SPA를 만들어봤다. https://github.com/Jonghakseo/leptos-study Git..

아폴로 클라이언트를 사용하면서 가장 많이 사용하는 훅은 useQuery일 것이다.선언한 graphql 규격에 맞춰, ApolloClient는 어떻게 데이터를 요청할까? 소스코드 흐름을 보며 따라가보자.useQuery.tshttps://github.com/apollographql/apollo-client/blob/v3.11.8/src/react/hooks/useQuery.ts https://github.com/apollographql/apollo-client/blob/v3.11.8/src/react/hooks/useQuery.ts#L155function _useQuery( query: DocumentNode | TypedDocumentNode, options: QueryHookOptions, NoInf..