AI BriefingKakao Entertainment Tech news
The latest AI and developer news from Kakao Entertainment Tech, with short summaries.
Visit website →ES2022 Key Features Overview: Top-level await, Array.at(), Class Private Fields, and More
This article summarizes the key features of ES2022, released in June 2022, and TC39 Stage 4 proposals likely to be added to the official specification in 2023.
KakaoPage Stage Reduces Image Size by 1/40 with Next/Image
Total home image size decreased from 25MB to 589KB, and page load time was reduced from 1.11s to 386ms.
Improving Webpack Build Speed: Applying Esbuild-Loader Reduces Production Build Time by Approximately 2.5x
Based on local environment benchmarks, Dev Server startup time decreased from an average of 3399ms to 2031ms, and production build time decreased from an average of 5617ms to 2238ms.
Four Methods for Implementing Web Animation: CSS, SVG, and Animation API
The article compares CSS transitions, CSS animations, SVG animations, and the JavaScript Animation API using a hamburger-to-X menu icon example.
Webpack Module Federation: Runtime Integration Principles and Micro-Frontend Application
Explains the principles and limitations of Webpack 5's Module Federation feature, which integrates separately built containers at runtime to reduce build time and impact scope.
The Refactoring Effect Enforced by Storybook Story Writing: Diagnosing Overwork, Seizures, and Peter Pan Syndrome
Introduced three patterns that resolve dependency issues arising during Storybook story writing and improve component design.
Automating Web Performance Measurement with Lighthouse CI and GitHub Actions
This guide introduces how to integrate Lighthouse CI with GitHub Actions to automatically measure performance on code pushes and display detailed metrics like FCP and LCP with color coding in PR comments.
Garbage Collection Principles in the V8 Engine: How Minor GC and Major GC Work
The V8 engine divides the heap into New and Old spaces, managing them with the Scavenger and Mark-Sweep-Compact algorithms, respectively.
Applying the 'Environment Variable URL' Approach to Overcome Next.js Build-Time Environment Variable Limitations
A case study on applying the Next.js Environment Variable URL approach to eliminate environment dependencies in build-time injection and enable multi-environment deployment from a single build.
Applying Atomic Design to KakaoPage Web: Resolving Component Fragmentation and Practical Tips
KakaoPage Web shared practical solutions for subjective criteria issues, Figma integration, and Storybook usage encountered during the adoption of Atomic Design.
AWS Improves Loading Speed by ~20% with HTTP/2 via CloudFront and ALB
Applying HTTP/2 through AWS CloudFront and ALB configuration alone can reduce loading times by approximately 20%, requiring a review of existing HTTP/1 optimization techniques.
Fixing Docker Build Cache Issues in GitHub Actions: How to Use build-push-action
Resolved the clean environment issue on GitHub Actions runners using the type=gha option in docker/build-push-action.
Resolving Main Thread Blocking with Web Workers: Image Color Extraction Time Reduced from 1s to 70ms
For 1500x1500 image color extraction, distributing the workload across 16 workers reduced the completion time per worker to 69.89ms, compared to 1016.70ms when processed solely on the main thread.
Resolving MSW Mocking Code Duplication: Reusing Storybook Stories in Jest Tests with Custom Render
A Custom Render wrapper automatically applies MSW mocks from Storybook stories to Jest, eliminating duplicate code.
KakaoPage Reveals Next.js BFF Architecture Adopting Urql to Overcome Apollo Client Cache Limitations
KakaoPage has revealed a Next.js-based BFF architecture that adopts Urql, which uses document-based caching, to resolve data overwriting issues caused by Apollo Client's ID-based caching, while integrating it with Redux.
Kakao Entertainment FE Team Shares Tips for Adopting Tailwind CSS
The team shared practical tips, including reducing arbitrary values, handling Preflight, and utilizing twin.macro.
Beyond Redux's Limits: Managing Server State with SWR and React Query
Analyzes the limitations of Redux for asynchronous handling and compares SWR and React Query for managing Server State, highlighting key feature differences.
KakaoPage Developer Shares Experience Adopting SWC to Improve Next.js Build Speed
Actual test results confirmed build speed improvements ranging from 20% to 74%, depending on project scale and environment.
Why Kakao Webtoon Switched from CSS-in-JS to CSS Modules and Tailwind
Performance tests showed scripting time was reduced by approximately 2x compared to CSS-in-JS, prompting a switch, with Tailwind CSS additionally adopted for collaboration efficiency.
React Web Game Sound Effects: Safari Compatibility Issues and Web Audio API Solutions
Resolved Safari compatibility issues and latency with HTMLAudioElement by using the BufferSource node of the Web Audio API.