카
카카오페이
July 11, 20221회
React Query와 함께 Concurrent UI Pattern을 도입하는 방법
간단 소개
React Query와 Suspense, Error Boundary를 활용하여 Concurrent UI 패턴을 도입하고 선언형 컴포넌트를 구현하는 방법을 설명합니다.
AI Summary
- Concurrent UI Pattern 소개
- React의 Suspense와 Error Boundary를 활용하여 사용자 경험을 향상시키는 Concurrent UI 패턴을 소개합니다.
- React Query를 사용하여 선언형 컴포넌트를 구현하는 방법을 제시합니다.
- 선언형 컴포넌트와 React Query
- 명령형 컴포넌트는 UI를 '어떻게' 보여줄지에 집중하는 반면, 선언형 컴포넌트는 '무엇을' 보여줄지에 집중합니다.
- React Query의
suspense옵션을 통해 Suspense를 지원하는 특별한 객체로 동작시켜 비동기 데이터 처리를 선언적으로 구성합니다.
- 실제 적용 사례 및 이점
- 복잡한 UI에서 선언형 컴포넌트는 코드의 복잡성을 줄이고 유지보수성을 높입니다.
- ErrorBoundary를 사용하여 에러 발생 시 사용자에게 적절한 Fallback UI를 제공하고, 전체 화면 에러 처리 등의 고급 시나리오를 구현합니다.
Next Feeds
스크럼, 입고팀이 애자일하게 일하는 법 2부
스크럼 도입 후 개발자의 긍정적 경험 변화, 팀 협업 강화, 효율적인 업무 방식 학습 및 일정 관리의 합리성 확보.
스크럼애자일개발자협업회고
2022. 7. 11.
컬리
우당탕탕 주문서 개발기
키친보드 팀의 주문서 도메인 개발 과정과 주요 고민, 해결 방안, 그리고 발생했던 이슈와 해결 과정을 공유합니다.
주문서동시성낙관적 잠금JPAhashCode
2022. 7. 8.
스포카
개발자에서 기술 작가로 전직하기까지 2년 간의 이야기
소프트웨어 엔지니어에서 기술 작가로 전직한 경험을 공유하며, 기술 작가의 역할, 중요성, 그리고 앞으로의 계획을 설명합니다.
기술작가문서화소프트웨어 엔지니어정보전달콘텐츠
2022. 7. 8.
데브시스터즈
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Esbuild-Loader를 사용하여 Webpack 빌드 속도를 향상시키는 방법과 성능 비교 결과를 제시합니다.
WebpackEsbuild-LoaderBabel-Loader빌드 속도Transpilation
2022. 7. 7.
카카오엔터테인먼트FE
Webpack 빌드에 날개를 달아줄 Esbuild-Loader
Esbuild-Loader를 사용하여 Webpack 빌드 속도를 향상시키는 방법과 성능 비교 결과를 제시합니다.
WebpackEsbuild-LoaderBabel-Loader빌드 속도Transpilation
2022. 7. 7.
카카오엔터테인먼트FE
배포를 빠르게 - DIY(Deploy It Yourself)
버즈빌은 단일 헬름 차트, 스피네이커 템플릿, 슬랙 워크플로우를 통해 배포 속도를 높이고 팀 간 의존성을 줄였습니다.
배포DIY헬름스피네이커슬랙 워크플로우
2022. 7. 5.
버즈빌