Velopers
모든 블로그
카카오엔터테인먼트FE

카카오엔터테인먼트FE

도메인fe-developers.kakaoent.com
주요 카테고리 프론트엔드 · DevOps · 아키텍처

활동 요약

대표 인기 포스트TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution316 조회
최근 30일
0개
평균 조회
18
누적 조회
2,997
전체 글
163개
마지막 발행
2025. 9. 19.
블로그 방문

카카오엔터테인먼트FE 기술 블로그 글 (117)

프론트엔드

웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)

CSS transition·animation, SVG, Animation API로 메뉴 전환 애니메이션을 구현했습니다. 복잡한 상호작용에는 Promise와 그룹 관리를 지원하는 Animation API를 제시합니다.

#CSS#SVG#Web Animations API
400

프론트엔드

웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)

햄버거 메뉴를 X 버튼으로 전환하는 예제로 웹 애니메이션 구현 방식 4가지를 비교했습니다. 단순 전환부터 복잡한 인터랙션까지 CSS, SVG, Animation API의 특성을 설명합니다.

#CSS#SVG#JavaScript
5400

프론트엔드

Webpack Module Federation 도입 전에 알아야 할 것들

Webpack Module Federation의 원격 모듈 통합 원리와 핵심 용어를 설명했습니다. 독립 배포의 장점과 타입·환경별 경로 관리의 제약을 함께 짚었습니다.

#Webpack#Module Federation#마이크로 프런트엔드
200

프론트엔드

Webpack Module Federation 도입 전에 알아야 할 것들

Webpack Module Federation의 원격 모듈 로딩 구조와 컨테이너 구성 요소를 설명했습니다. 독립 배포의 장점과 타입·환경별 경로 관리의 제약을 함께 짚었습니다.

#Webpack#Module Federation#마이크로 프런트엔드
2600

프론트엔드

스토리북 작성을 통해 얻게 되는 리팩토링 효과

스토리북의 독립 렌더링 과정에서 컴포넌트의 책임 과다와 환경 의존성을 발견했습니다. 표현·데이터·레이아웃을 분리해 재사용성과 검증 가능성을 높였습니다.

#Storybook#React#refactoring
100

프론트엔드

스토리북 작성을 통해 얻게 되는 리팩토링 효과

스토리북의 독립 렌더링은 컴포넌트의 과도한 책임과 환경 의존성을 드러내 리팩토링을 유도합니다. 렌더링·데이터·레이아웃을 분리하고 입력 범위를 제한하는 방식을 소개합니다.

#storybook#React#refactoring
3500

프론트엔드

자바스크립트 v8 엔진의 가비지 컬렉션 동작 방식

V8 엔진의 세대별 힙 구조와 마이너·메이저 가비지 컬렉션 흐름을 설명했습니다. Orinoco 기술로 stop-the-world 시간을 줄이는 방식을 정리했습니다.

#JavaScript#V8#가비지 컬렉션
000

프론트엔드

자바스크립트 v8 엔진의 가비지 컬렉션 동작 방식

V8의 New·Old space 기반 세대별 가비지 컬렉션 구조를 설명했습니다. 마이너·메이저 GC와 Orinoco의 지연 완화 기법을 정리했습니다.

#JavaScript#V8#가비지 컬렉션
2500

프론트엔드

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

Next.js 빌드 타임 환경 변수의 환경별 빌드 문제를 분석했습니다. `window.__ENV` 스크립트로 런타임 주입하는 방식을 구현했습니다.

#Next.js#환경 변수#SSR
200

프론트엔드

아토믹 디자인을 활용한 디자인 시스템 도입기

카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다. 단위 구분의 주관성은 UI 모델링·코드 리뷰·compound 컴포넌트로 보완했습니다.

#React#디자인 시스템#아토믹 디자인
100

프론트엔드

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

Next.js의 빌드 타임 dotenv 주입으로 환경별 빌드가 필요한 문제를 분석했습니다. public 스크립트와 window 객체를 활용한 런타임 환경 변수 주입 방식을 구현했습니다.

#Next.js#dotenv#SSG
3500

프론트엔드

아토믹 디자인을 활용한 디자인 시스템 도입기

카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다. 컨텍스트 기반 분류, Storybook·Figma 연계, 외부 스타일 주입 원칙을 적용했습니다.

#React#디자인 시스템#atomic design
2800

프론트엔드

웹 워커를 통해 이미지 색상 수집기 성능 개선하기

Canvas ImageData의 색상 수집 작업을 다중 웹 워커로 분할해 처리 시간을 줄였습니다. 메인 스레드 블로킹을 완화해 UI 갱신과 다른 스크립트 지연을 줄였습니다.

#Canvas#Web Worker#ImageData
100

프론트엔드

웹 워커를 통해 이미지 색상 수집기 성능 개선하기

Canvas 이미지의 RGBA 배열에서 고유 색상을 추출하는 작업을 웹 워커로 분리했습니다. 다중 워커로 작업을 나눠 메인 스레드 블로킹과 UI 대기시간을 줄였습니다.

#Canvas#Web Worker#ImageData
2200

프론트엔드

MSW 모킹 코드 재사용하기 feat. Storybook, Jest

Storybook 스토리의 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 간 핸들러 초기화와 Node.js 절대 경로 문제 해결 방법도 소개합니다.

#MSW#Storybook#Jest
000

프론트엔드

MSW 모킹 코드 재사용하기 feat. Storybook, Jest

Storybook 스토리에 선언한 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 후 핸들러 초기화와 Node.js 절대 URL 처리 방법도 소개합니다.

#MSW#Storybook#Jest
2600

프론트엔드

Tailwind CSS 사용기

Tailwind 테마 확장으로 반복적인 arbitrary value를 줄이는 방법을 소개했습니다. Preflight와 클래스 우선순위, twin.macro·Headwind 활용 시 주의점을 정리했습니다.

#Tailwind CSS#React#CSS
300

프론트엔드

Tailwind CSS 사용기

Tailwind의 arbitrary value를 테마 확장으로 줄이고 Preflight 동작을 점검하는 방법을 소개했습니다. 클래스 우선순위 충돌은 twin.macro, 긴 클래스 정리는 Headwind로 보완했습니다.

#Tailwind CSS#React#CSS
4400