AI Briefing카카오엔터테인먼트 테크 뉴스
카카오엔터테인먼트 테크에서 수집한 AI·개발 최신 뉴스와 한국어 요약입니다.
원문 사이트 방문 →카카오 스토리FE, TurboRepo에 JIT Packages 적용기: 빌드 생략과 Next.js 13.5 업그레이드
카카오 스토리FE개발팀이 TurboRepo 모노레포에 Just-in-Time Packages를 적용해 컴파일 없이 소스를 직접 참조하며 개발 경험을 개선했다.
카카오 스토리FE, Redux 의존성 줄이는 '파일 변수' 활용법 공개
서버 환경의 데이터 유출 위험을 AsyncLocalStorage로 해결하고 클라이언트와 동일한 로직을 구현했다.
멜론 커머스, Next.js Full Route Cache로 TPS 6배 향상
상품 목록 및 상세 페이지에 ISR 기반 Full Route Cache를 적용해 평균 TPS를 34에서 220으로 높였다.
React 공통 컴포넌트 가치 높이는 3대 전략: 확장성 설계·네이티브 활용·접근성 강화
만능 지양, 네이티브 요소 숨기기, ARIA 적용 등 공통 컴포넌트 완성도 높이는 3대 원칙 제시
카카오페이지, Node.js keepAlive 기본값 오류로 인한 BFF 장애 해결기
카카오페이지 웹 팀은 Node.js HTTP Agent의 keepAlive 기본값(false)으로 인해 발생한 BFF 서버의 CPU 과부하 및 TPS 저하 문제를 true 설정으로 해결했습니다.
카카오엔터테인먼트, BackstopJS로 스토리북 기반 시각적 회귀 테스트 자동화 사례 공개
스토리북 7버전 파일시스템 지원 중단에 따라 Docker 내 HTTP 서버 방식으로 테스트 구조를 변경했다.
사파리 및 모바일 환경의 크로스 브라우징 이슈와 해결책
스크롤 위치, Z축 렌더링, 터치 이벤트 등 4가지 주요 버그의 원인과 코드 기반 해결법을 제시했다.
React Query 내부 구조 분석: useQuery 훅과 컴포넌트 리렌더링 원리
QueryClient, QueryCache, QueryObserver의 상호작용과 useSyncExternalStore를 활용한 서버 상태 변경 시 컴포넌트 리렌더링 메커니즘을 분석한다.
AWS Amplify로 서버리스 풀스택 애플리케이션 구축하기
Amplify CLI와 UI 컴포넌트를 활용해 인증, DB, API를 코드 몇 줄로 구현하는 방법 소개
Next.js 컴포넌트 내부 CSS 임포트 시 발생하는 CORS 에러의 근본 원인과 해결
크롬과 사파리의 캐시 정책으로 인해 GET Fetch 요청 시 CORS 헤더 누락으로 에러가 발생하며, 전역 임포트나 crossorigin 속성 추가로 해결할 수 있다.
Next.js Dynamic Import로 Swiper 컴포넌트 displayName 손실 문제 해결
Next.js Dynamic Import가 Swiper 컴포넌트의 displayName을 제거해 발생하는 렌더링 오류를 직접 설정 또는 transpilePackages 옵션으로 해결할 수 있다.
카카오웹툰, 복잡한 GitHub Actions 셸 스크립트를 JavaScript 액션으로 리팩터링
다중 환경 조건문을 Map 구조로 전환해 가독성을 높이고, node_modules 캐싱으로 실행 성능을 개선했다.
카카오페이지, SOLID 원칙 기반 프론트엔드 아키텍처 설계 사례 공개
SOLID 원칙을 리액트 컴포넌트 설계와 BFF 아키텍처에 적용해 유지보수성과 확장성을 높인 실무 경험을 공유했다.
ChatGPT로 웹툰 서비스 개발해 보니... 5시간 소요, 설계·검증은 개발자 몫
Next.js와 Tailwind CSS 기반 웹툰 서비스 프로토타입을 ChatGPT(gpt-3.5)로 개발한 결과, 약 5시간이 소요됐으나 최신 라이브러리 호환성 문제와 환각 현상으로 인해 설계와 검증은 여전히 개발자의 역할로 남았다.
자바스크립트로 모바일 웹 핀치 줌 직접 구현하기
라이브러리 없이 TouchEvent API를 활용해 손가락 간 거리 변화로 확대 축소 로직을 작성한다.
BackstopJS로 시각적 회귀 테스트 구축 및 자동화 경험 공유
무료 오픈소스 BackstopJS를 활용해 스토리북과 연동한 시각적 회귀 테스트를 구축하고 Docker와 GitHub Actions로 자동화한 실무 경험을 소개한다.
Jest Custom Matchers로 반복 테스트 코드 줄이는 설정 및 활용법
Jest Custom Matchers를 설정해 반복적인 검증 로직을 줄이는 방법과 TypeScript 타입 정의 과정을 소개한다.
FE 그룹, E2E 테스트 도입 성공기: Sorry-Cypress로 속도 30초대로 단축
Sorry-Cypress 병렬 테스트 적용으로 E2E 실행 시간을 2분 이상에서 30초대로 단축했다.