지난 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..

아폴로 클라이언트를 사용하면서 가장 많이 사용하는 훅은 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..

리액트의 모달 컴포넌트는 다양한 방식으로 사용된다. 모달 렌더링에 대한 책임을 버튼 컴포넌트에 넘기는 방식. 모달의 열림/닫힘 상태를 버튼에서 관리하여 보일러 플레이트 코드를 줄이기 좋다. Props에 대한 타입 전달이 자연스러럽게 되는 장점도 있다.Share! 모달의 열림/닫힘 상태를 제어하면서 모달 컴포넌트를 렌더링하는 방식. 가장 일반적인 방식이고 러닝커브가 없다.const modal = useModal();//...Share! 모달을 함수 호출 시점에 렌더링하는 방식. 호출부와 렌더링 코드가 붙어있어 응집도가 높은 편이다.const { openModal } = useModal();const handleClick = () => openModal(ShareModal, { url });//...Shar..