AI Briefing#frontend
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
수학과 물리학 원리를 활용해 라이브러리 없이 인터랙티브 웹 애니메이션을 구현하는 방법을 소개한다.
카카오가 4월 11일 제5회 Tech Meet를 개최해 웹 프론트엔드 기술을 공유하며, 오프라인 행사와 함께 온라인 라이브 스트리밍을 진행한다.
Replit이 Figma 디자인을 React 코드로 즉시 변환해 Replit 환경으로 내보낼 수 있는 실험적 플러그인을 출시했다.
올리브영 프론트엔드 팀이 Next.js 마이그레이션 중 겪은 Mocking 이슈와 MSW 도입 배경을 설명한다.
만능 지양, 네이티브 요소 숨기기, ARIA 적용 등 공통 컴포넌트 완성도 높이는 3대 원칙 제시
카카오페이 FE 리더들이 모여 기술적 확장성과 매니징, 웹 접근성 등 실무적 고민을 나눴다.
올리브영 W CARE 서비스 개발 중 복잡한 월경 이벤트 판별 알고리즘을 TDD 방법론을 통해 구현한 경험을 공유한다.
Openv0는 AI를 활용해 Tailwind 기반의 UI 컴포넌트를 자동으로 생성하고 빠르게 프로토타이핑할 수 있는 오픈 소스 프레임워크다.
올리브영의 직무 전환 프로그램인 '잡 챌린지'를 통해 프론트엔드 개발자로 성장한 신입 개발자의 여정을 공유한다.
카카오페이지 웹 팀은 Node.js HTTP Agent의 keepAlive 기본값(false)으로 인해 발생한 BFF 서버의 CPU 과부하 및 TPS 저하 문제를 true 설정으로 해결했습니다.
React 환경에서 복잡한 배송지 입력 폼을 안정적이고 효율적으로 구현하기 위한 기술적 실험과 React Hook Form 도입 과정을 공유한다.
스토리북 7버전 파일시스템 지원 중단에 따라 Docker 내 HTTP 서버 방식으로 테스트 구조를 변경했다.
올리브영 프론트엔드 팀이 Infinite Scroll을 직접 구현하여 브라우저 렌더링 성능을 개선한 사례를 소개한다.
QueryClient, QueryCache, QueryObserver의 상호작용과 useSyncExternalStore를 활용한 서버 상태 변경 시 컴포넌트 리렌더링 메커니즘을 분석한다.
Amplify CLI와 UI 컴포넌트를 활용해 인증, DB, API를 코드 몇 줄로 구현하는 방법 소개
인프랩 프런트엔드 개발자가 API 타입 관리의 비효율성을 해결하기 위해 Code generator를 개발하게 된 배경을 다룬다.
카카오 FE 플랫폼 팀이 이미지 지연 로드와 Windowing 기법을 적용해 주문하기 서비스의 성능 점수를 20점에서 90점으로 개선했다.
FCP 0.4초, LCP 0.6초 단축 및 CLS 0.097 달성으로 사용자 경험 개선
Next/image 컴포넌트의 동작 원리와 캐싱 메커니즘, 그리고 Sharp 라이브러리 권장 이유를 분석한다.
크롬과 사파리의 캐시 정책으로 인해 GET Fetch 요청 시 CORS 헤더 누락으로 에러가 발생하며, 전역 임포트나 crossorigin 속성 추가로 해결할 수 있다.
Next.js Dynamic Import가 Swiper 컴포넌트의 displayName을 제거해 발생하는 렌더링 오류를 직접 설정 또는 transpilePackages 옵션으로 해결할 수 있다.
다중 환경 조건문을 Map 구조로 전환해 가독성을 높이고, node_modules 캐싱으로 실행 성능을 개선했다.