AI Briefing#frontend
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
#frontend와 관련된 AI·개발 뉴스를 최신순으로 모았습니다. 원문 출처와 한국어 요약을 함께 확인할 수 있습니다.
카카오 FE플랫폼팀이 React와 Vue.js 중심의 기술 스택과 90%에 달하는 크루 협업 비율을 바탕으로 서비스와 개발자의 동반 성장을 추구하는 문화를 공개했다.
코드스쿼드와 함께한 6주간의 미션, 페어 프로그래밍, 코드 리뷰 등 실무 중심 교육 과정을 상세히 소개했다.
카카오페이지는 Apollo Client의 ID 기반 캐싱으로 인한 데이터 덮어쓰기 문제를 해결하기 위해 document 기반 캐싱을 하는 Urql을 채택하고, Redux와 결합한 Next.js 기반 BFF 구조를 공개했습니다.
Replit은 모바일 지원 부족과 성능 문제를 해결하기 위해 기존 Monaco 에디터를 CodeMirror 6로 교체했다.
Arbitrary value 줄이기, Preflight 처리, twin.macro 활용 등 실무 팁을 소개했다.
서버, 프론트엔드 등 4개 직무별로 현업 선배의 코드 리뷰와 페어 프로그래밍을 포함한 실습 중심 교육이 진행됐다.
Protractor의 한계를 극복하고 Cypress로 전환해 테스트 신뢰도와 실행 속도를 높인 Angular E2E 테스트 구축 사례를 공유한다.
Redux의 비동기 처리 한계를 분석하고, SWR과 React Query를 활용한 Server State 관리법과 주요 기능 차이를 비교한다.
실제 테스트 결과 프로젝트 규모와 환경에 따라 빌드 속도가 20~74%까지 향상됨을 확인했다.
카카오웹툰이 SSR 캐싱 적용으로 TPS와 응답 시간을 수십 배 개선하고, 로딩 시머와 패시브 이벤트 리스너 등을 통해 사용자 경험을 향상한 프론트엔드 최적화 사례를 공개했다.
GraphQL Mutation 설계 시 명시적 작명, 단일 입력 객체 사용, 그리고 중첩 구조를 통해 확장성과 유지보수성을 높이는 방법을 제시한다.
카카오웹툰 개발자가 GitHub Actions를 활용해 테스트 자동화, 슬랙 알림, 멀티 리전 배포 및 스케줄링 배포를 구현한 사례를 공유했다.
카카오엔터테인먼트 개발자가 React Suspense를 활용해 비동기 데이터 fetching 시 발생하는 경쟁 상태와 Waterfall 문제를 해결하는 방법을 소개했다.
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 적용해 렌더링 성능을 개선하고, CPU 6배 지연 테스트에서 스크롤 이벤트 대비 프레임 안정성을 입증했다.
카카오엔터테인먼트 FE 개발팀이 Next.js 서비스에 12-Factor App 원칙을 적용하여 배포 시간을 15분에서 1분으로 단축하고, async_hooks를 활용해 요청 단위 로그 추적을 구현했다.
카카오 비즈인프라FE파트는 밋업을 통해 약 20개 서비스의 기술 스택과 입사 직후부터 전원이 코드 리뷰어 역할을 하는 개발 문화를 공개했습니다.
카카오페이지는 body 태그 클래스 제어와 CSS 변수로 다크모드를 구현하고, 렌더링 차단 스크립트로 플리커를 해결했다.
카카오웹툰 검색창에서 커서를 항상 끝으로 이동시키기 위해 setSelectionRange와 setTimeout 0ms를 활용해 타이밍 이슈를 해결한 사례
카카오맵, 카카오페이 등 내부 서비스의 프론트엔드 및 모바일 개발 경험과 기술 적용 사례를 공유한다.
React.Children.toArray()가 Fragment 내부 요소를 평탄화하지 못해 react-keyed-flatten-children이 유일한 해결책으로 제시됐다.
enum 대신 union type, index signature 대신 mapped type 등 타입 안정성과 생산성을 높이는 4가지 팁을 소개했다.