AI Briefing카카오엔터테인먼트 테크 뉴스
카카오엔터테인먼트 테크에서 수집한 AI·개발 최신 뉴스와 한국어 요약입니다.
원문 사이트 방문 →ES2022 주요 기능 총정리: Top-level await, Array.at(), 클래스 Private 필드 등
2022년 6월 발표된 ES2022의 주요 기능과 2023년 정식 스펙 추가 가능성이 높은 TC39 Stage 4 제안 기능을 정리했다.
카카오페이지 스테이지, Next/Image 적용으로 이미지 용량 1/40 감소
홈 이미지 총용량이 25MB에서 589KB로 줄고, 페이지 로드 시간이 1.11초에서 386ms로 단축됨
Webpack 빌드 속도 개선: Esbuild-Loader 적용 시 프로덕션 빌드 시간 약 2.5배 단축
로컬 환경 기준 Dev Server 시작 시간 평균 3399ms에서 2031ms로, 프로덕션 빌드 시간 평균 5617ms에서 2238ms로 단축
CSS, SVG, Animation API로 구현하는 4가지 웹 애니메이션 방법 비교
햄버거 메뉴 아이콘 예제로 CSS, SVG, Animation API 등 4가지 웹 애니메이션 구현법을 비교했다.
Webpack Module Federation: 런타임 통합 원리와 마이크로 프런트엔드 적용
별도 빌드된 컨테이너를 런타임에 통합하여 빌드 시간과 영향 범위를 줄이는 Webpack 5의 Module Federation 기능의 원리와 한계를 설명한다.
스토리북 스토리 작성이 강제하는 리팩토링 효과: 과로·발작·피터팬 증후군 진단
스토리북 스토리 작성 시 발생하는 의존성 문제를 해결하며 컴포넌트 설계를 개선하는 3가지 패턴을 소개했다.
Lighthouse CI와 GitHub Actions 연동으로 웹 성능 측정 자동화하기
Lighthouse CI와 GitHub Actions를 연동해 코드 푸시 시 성능을 자동 측정하고, PR 댓글에 FCP·LCP 등 상세 지표를 색상과 함께 표시하는 방법을 소개한다.
V8 엔진의 가비지 컬렉션 원리: 마이너 GC와 메이저 GC의 동작 방식
V8 엔진은 힙을 New와 Old 영역으로 분리해 각각 Scavenger와 Mark-Sweep-Compact 알고리즘으로 관리한다.
Next.js, 빌드 타임 환경 변수 한계 극복하는 '환경 변수 URL' 방식 적용기
빌드 타임 주입의 환경 종속성을 제거하고 단일 빌드로 다중 환경 배포를 가능하게 하는 Next.js 환경 변수 URL 방식 적용 사례
카카오페이지 웹, 아토믹 디자인 적용기: 컴포넌트 파편화 해결과 실전 팁
카카오페이지 웹이 아토믹 디자인 도입 시 겪은 주관적 기준 문제와 피그마 연동, 스토리북 활용 등 실전 해결책을 공유했다.
AWS, CloudFront와 ALB로 HTTP/2 적용 시 로딩 속도 약 20% 개선
AWS CloudFront와 ALB 설정만으로 HTTP/2를 적용해 로딩 시간을 약 20% 단축할 수 있으며, 기존 HTTP/1 최적화 기법은 재검토가 필요함
GitHub Actions에서 Docker 빌드 캐시 미작동 문제 해결: build-push-action 활용법
docker/build-push-action의 type=gha 옵션으로 GitHub Actions 러너의 클린 환경 문제를 해결했다.
웹 워커로 메인 스레드 블로킹 해결… 1500x1500 이미지 색상 추출 시간 1초에서 70ms로 단축
1500x1500 이미지 색상 추출 시 메인 스레드 단독 처리(1016.70ms) 대비 16개 워커 분산 처리 시 한 워커당 완료 시간을 69.89ms로 단축했다.
MSW 모킹 코드 중복 해결: Storybook 스토리를 Jest 테스트에서 재사용하는 Custom Render 활용법
Custom Render 래퍼로 Storybook 스토리의 MSW 모킹을 Jest에서 자동 적용해 중복 코드를 제거했다.
카카오페이지, Apollo Client 캐시 한계로 Urql 채택한 Next.js BFF 구조 공개
카카오페이지는 Apollo Client의 ID 기반 캐싱으로 인한 데이터 덮어쓰기 문제를 해결하기 위해 document 기반 캐싱을 하는 Urql을 채택하고, Redux와 결합한 Next.js 기반 BFF 구조를 공개했습니다.
카카오엔터 FE팀, Tailwind CSS 도입 팁 공유
Arbitrary value 줄이기, Preflight 처리, twin.macro 활용 등 실무 팁을 소개했다.
Redux의 한계를 넘어서: SWR과 React Query로 Server State 관리하기
Redux의 비동기 처리 한계를 분석하고, SWR과 React Query를 활용한 Server State 관리법과 주요 기능 차이를 비교한다.
카카오페이지 개발자, Next.js 빌드 속도 개선 위해 SWC 도입기 공유
실제 테스트 결과 프로젝트 규모와 환경에 따라 빌드 속도가 20~74%까지 향상됨을 확인했다.
카카오웹툰, CSS-in-JS 대신 CSS Module과 Tailwind 적용한 이유
성능 테스트 결과 CSS-in-JS 대비 스크립팅 시간이 약 2배 단축되어 방식을 전환했으며, 협업 효율성을 위해 Tailwind CSS를 추가로 도입했다.
React 웹 게임 효과음, Safari 호환성 문제와 Web Audio API 해결법
HTMLAudioElement의 Safari 호환성 이슈와 레이턴시를 Web Audio API의 BufferSource 노드로 해결했다.