[SSR] 필터링된 데이터를 가져올 때 SSR을 활용하여 체감 로드 속도 개선
SSR을 활용하여 필터링된 데이터를 더 빠르게 가져와 UX를 개선한 경험을 소개한다.
발생한 문제 상황과 해결 방법 공유
[반응형] grid-template-areas로 반응형 UI 유연하게 대응하기
PC와 모바일 UI가 달라도 하나의 컴포넌트로 관리하며, grid-template-areas를 활용해 레이아웃을 유연하게 대응한 경험을 소개한다.
[리액트 렌더링] 저사양 환경에서 입력 지연이 발생하여 useTransition으로 상태 업데이트 우선순위를 조정하여 INP 17% 개선
useTransition을 활용하여 입력 지연을 개선한 경험을 소개한다.
[리액트 렌더링] 불필요한 formState 참조로 인해 페이지 전체가 리렌더링되어 리액트 렌더링 최적화를 통해 스크립트 실행 시간 58% 개선
react-hook-form과 렌더링 최적화를 적용하며 스크립트 실행 시간을 개선한 경험을 소개한다.
[비동기] return vs return await
비동기 함수를 그냥 return하는 것과 return await하는 것의 차이에 대해 이해한다.
[Next.js] Next 14 App Router에서 msw로 API mocking 하기
Nextjs에서 msw가 동작하는 원리를 이해하며, API를 모킹할 수 있다.
[Worker] Web Worker를 활용하여 탭 전환 시 발생하는 타이머 오차 개선하기
문제 상황을 이해하며, Web Worker의 필요성을 이해할 수 있다.
Suspense와 ErrorBoundary로 관심사를 분리하여 컴포넌트 복잡도 개선하기
Suspense와 ErrorBoundary를 활용해 관심사를 분리하여 컴포넌트 복잡도를 낮추고, Suspense 동작 원리를 직접 만들면서 이해한다.
[에러 핸들링] 에러 처리 공통 로직 분리
tanstack-query 를 활용하여 에러 처리 공통 로직을 분리하고, 이때 생긴 문제 상황과 해결 방법을 공유한다.
[모바일] IOS 가상 키보드 버그 개선
땅콩 서비스를 개발하면서 IOS 환경에서만 가상 키보드 위로 버튼이 올라오지 않는 문제를 해결하였다.
[브라우저 렌더링] 애니메이션 최적화를 통해 브라우저 렌더링 시간 94% 개선
구형 모바일 환경에서 frame drop이 발생하여 애니메이션이 끊기는 현상을 애니메이션 최적화를 통해 브라우저 렌더링 시간 94%를 개선하였다.
[브라우저 렌더링] 모바일 환경에서 발생하는 비정상적인 애니메이션 동작 해결
모바일 환경에서 발생하는 비정상적인 애니메이션 동작에 대한 문제 상황과 해결 방법에 대해 소개한다.
[AWS] Access Key 없이 CodeBuild + CodePipeline + Lambda Function 활용하여 배포 자동화하기
Access Key 없이 배포 자동화하는 방법을 소개한다.