AI Briefing#frontend
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
뷰티 컬리가 Redux에서 React Query로 전환해 필터 적용 시 상품 선택 위치를 평균 32위에서 19위로 개선했다.
SOLID 원칙을 리액트 컴포넌트 설계와 BFF 아키텍처에 적용해 유지보수성과 확장성을 높인 실무 경험을 공유했다.
카카오 신입 FE 개발자는 6주간 인스타그램·넷플릭스 클로닝 등 미션 기반 실습과 현업자의 코드 리뷰를 통해 기술 역량을 강화했다.
Next.js와 Tailwind CSS 기반 웹툰 서비스 프로토타입을 ChatGPT(gpt-3.5)로 개발한 결과, 약 5시간이 소요됐으나 최신 라이브러리 호환성 문제와 환각 현상으로 인해 설계와 검증은 여전히 개발자의 역할로 남았다.
라이브러리 없이 TouchEvent API를 활용해 손가락 간 거리 변화로 확대 축소 로직을 작성한다.
무료 오픈소스 BackstopJS를 활용해 스토리북과 연동한 시각적 회귀 테스트를 구축하고 Docker와 GitHub Actions로 자동화한 실무 경험을 소개한다.
Jest Custom Matchers를 설정해 반복적인 검증 로직을 줄이는 방법과 TypeScript 타입 정의 과정을 소개한다.
Sorry-Cypress 병렬 테스트 적용으로 E2E 실행 시간을 2분 이상에서 30초대로 단축했다.
Scroll-Snap API의 원리를 이해하고, scroll-snap-type과 scroll-snap-align 속성을 활용해 자바스크립트 없이 이미지 캐러셀을 구현하는 방법을 소개한다.
카카오 FE가 Promise 취소 기능 표준화 난항 원인을 분석하고, 광고 SDK에서 롤백 지연 방식으로 렌더링 취소 문제를 해결한 사례를 소개했다.
서비스 워커와 MessageChannel을 활용해 실제 네트워크 요청을 가로채고 가짜 응답을 반환하는 코드를 소개한다.
react-router-dom 없이 Fragment 해시와 정규식을 활용해 SPA 라우팅 시스템을 구축하는 과정을 소개한다.
구조적 타이핑, 유니온/인터섹션 타입, 템플릿 리터럴 타입 및 객체 리터럴의 엄격한 검사 규칙을 예제와 함께 정리했다.
Render Props, Compound Component, Controlled Props, Props Getter, State Reducer 패턴의 장단점과 적용 시나리오를 비교했다.
React 18 미적용으로 Suspense 대신 자체 Fetcher 컴포넌트를 개발해 적용했다.
Emotion CSS의 가독성 저하와 네이밍 부재 문제를 해결하고 접근성 향상을 위해 커스텀 단위와 플러그인을 적용했다.
브랜치 생성 없이 터미널에서 region과 env를 선택해 GitHub Actions를 실행하는 방식이다.
XState의 컨텍스트, 가드, 서비스 등 핵심 기능으로 복잡한 UI 상태 흐름을 선언적으로 관리하는 방법을 정리했다.