AI Briefing#frontend
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
게더타운 활용, 6개월 교육, 코디네이터-코퍼레이터 시스템 등 팀 운영 방식을 소개했다.
React의 이벤트 위임 구조로 인해 Swiper와 병용 시 stopPropagation이 실패하는 원인을 분석하고, 세 가지 해결 방안을 제시한다.
인프런은 기존 서비스와 신규 React 앱 간의 CSS 스타일 충돌을 해결하기 위해 shadow DOM을 도입했다.
React와 Canvas로 만든 Minion 게임 튜토리얼에서 바나나 생성 주기 500ms, 가속도 0.02, 점수 50점 규칙을 구현했다.
Prop 기반 구현의 확장성 한계를 합성 컴포넌트로 해결해 유지보수성과 직관성을 개선했다.
2022년 6월 발표된 ES2022의 주요 기능과 2023년 정식 스펙 추가 가능성이 높은 TC39 Stage 4 제안 기능을 정리했다.
인프랩이 랠릿 서비스의 폼 렌더링 이슈와 코드 복잡도를 해결하기 위해 react-hook-form을 도입한 과정과 성과를 공유한다.
홈 이미지 총용량이 25MB에서 589KB로 줄고, 페이지 로드 시간이 1.11초에서 386ms로 단축됨
Next.js 파일 시스템 방식 차용해 컴포넌트 지연 로딩 적용, 초기 파일 크기 약 100KB 감소
카카오페이 FE인프라TF가 React Query의 Suspense 옵션을 활용해 선언형 컴포넌트 아키텍처를 도입했다.
로컬 환경 기준 Dev Server 시작 시간 평균 3399ms에서 2031ms로, 프로덕션 빌드 시간 평균 5617ms에서 2238ms로 단축
서버 데이터 의존도가 높은 구독 서비스의 상태 관리 복잡도를 낮추기 위해 React Query v3.34.0을 적용한 경험을 공유했다.
Lighthouse CI와 GitHub Actions를 연동해 코드 푸시 시 성능을 자동 측정하고, PR 댓글에 FCP·LCP 등 상세 지표를 색상과 함께 표시하는 방법을 소개한다.
API 응답이 매우 빠른 경우 스켈레톤 화면을 의도적으로 지연 노출하여 사용자 경험을 개선할 수 있다.
개발자가 TailwindCSS의 복잡한 문법과 제한점을 개선하고 Figma AutoLayout 연동을 지원하기 위해 on-demand Atomic CSS 라이브러리 'AdorableCSS'를 공개했다.
React Server Components는 데이터 페칭 waterfall 문제를 해결하고 서버 리소스에 직접 접근할 수 있게 한다.
시맨틱 CSS의 한계를 지적하며, 컴포넌트 기반 개발 시대에 최적화된 Atomic CSS의 재조명과 자체 프레임워크 AdorableCSS를 소개한다.
카카오페이가 Sentry를 활용해 예측하기 어려운 프론트엔드 런타임 오류를 탐지하고 대응하는 방법을 소개한다.
카카오페이는 Redux의 장황한 Boilerplate 문제를 해결하고 비동기 데이터 관리를 효율화하기 위해 React Query를 도입했다.
빌드 타임 주입의 환경 종속성을 제거하고 단일 빌드로 다중 환경 배포를 가능하게 하는 Next.js 환경 변수 URL 방식 적용 사례
카카오페이지 웹이 아토믹 디자인 도입 시 겪은 주관적 기준 문제와 피그마 연동, 스토리북 활용 등 실전 해결책을 공유했다.
Replit의 첫 번째 해커톤인 MadeWithReplit의 우승 프로젝트와 주요 수상작들이 공개되었다.
docker/build-push-action의 type=gha 옵션으로 GitHub Actions 러너의 클린 환경 문제를 해결했다.
안드로이드와 iOS 개발자가 OS 구분 없이 협업하며 서비스 개선과 개인 성장을 동시에 추구하는 문화를 소개했다.