AI Briefing#react
#react와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
#react와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
인프런은 기존 서비스와 신규 React 앱 간의 CSS 스타일 충돌을 해결하기 위해 shadow DOM을 도입했다.
React와 Canvas로 만든 Minion 게임 튜토리얼에서 바나나 생성 주기 500ms, 가속도 0.02, 점수 50점 규칙을 구현했다.
Prop 기반 구현의 확장성 한계를 합성 컴포넌트로 해결해 유지보수성과 직관성을 개선했다.
데브시스터즈 엔지니어가 fp-ts를 활용해 복잡한 폼 검증 로직을 간결하게 관리하는 방법을 소개했다.
인프랩이 랠릿 서비스의 폼 렌더링 이슈와 코드 복잡도를 해결하기 위해 react-hook-form을 도입한 과정과 성과를 공유한다.
Next.js 파일 시스템 방식 차용해 컴포넌트 지연 로딩 적용, 초기 파일 크기 약 100KB 감소
카카오페이 FE인프라TF가 React Query의 Suspense 옵션을 활용해 선언형 컴포넌트 아키텍처를 도입했다.
올리브영이 기술 블로그의 운영 효율성과 SEO를 높이기 위해 Jekyll에서 Gatsby로 마이그레이션을 완료했다.
운영툴 개발 시 React와 Ant Design으로 프론트엔드를 구성하고, Spring for GraphQL을 도입해 유연한 API를 설계하며 UX 가이드를 수립한 경험 공유
서버 데이터 의존도가 높은 구독 서비스의 상태 관리 복잡도를 낮추기 위해 React Query v3.34.0을 적용한 경험을 공유했다.
스토리북 스토리 작성 시 발생하는 의존성 문제를 해결하며 컴포넌트 설계를 개선하는 3가지 패턴을 소개했다.
API 응답이 매우 빠른 경우 스켈레톤 화면을 의도적으로 지연 노출하여 사용자 경험을 개선할 수 있다.
React Server Components는 데이터 페칭 waterfall 문제를 해결하고 서버 리소스에 직접 접근할 수 있게 한다.
카카오페이가 Sentry를 활용해 예측하기 어려운 프론트엔드 런타임 오류를 탐지하고 대응하는 방법을 소개한다.
카카오페이지 웹이 아토믹 디자인 도입 시 겪은 주관적 기준 문제와 피그마 연동, 스토리북 활용 등 실전 해결책을 공유했다.
GatsbyJS와 fp-ts를 활용해 다국어 지원을 위한 l10n 기능을 구현하는 방법을 소개한다.
AssemblyAI API와 Next.js, Replit을 활용해 파일 업로드 기반의 Speech-to-Text 앱을 구축하는 방법을 다룬다.
api.video의 API와 SDK를 활용해 Node.js와 React 기반의 맞춤형 라이브 스트리밍 서비스를 구축하는 방법을 소개한다.
카카오 FE플랫폼팀이 React와 Vue.js 중심의 기술 스택과 90%에 달하는 크루 협업 비율을 바탕으로 서비스와 개발자의 동반 성장을 추구하는 문화를 공개했다.
코드스쿼드와 함께한 6주간의 미션, 페어 프로그래밍, 코드 리뷰 등 실무 중심 교육 과정을 상세히 소개했다.
HTMLAudioElement의 Safari 호환성 이슈와 레이턴시를 Web Audio API의 BufferSource 노드로 해결했다.
Replit이 모바일 환경의 개발 경험을 혁신하기 위해 기존 Redux 기반 아키텍처를 버리고 새로운 서비스 중심의 모바일 IDE를 출시했다.