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 기술 블로그 글 (163)

프론트엔드

합성 컴포넌트로 재사용성 극대화하기

Dialog의 prop 증가와 고정된 요소 배치 문제를 합성 컴포넌트로 개선했습니다. 서브 컴포넌트를 조합해 복잡한 Dialog 요구사항에 유연하게 대응했습니다.

#React#TypeScript#합성 컴포넌트
100

프론트엔드

합성 컴포넌트로 재사용성 극대화하기

확장되는 Dialog 요구사항에서 prop 증가와 고정된 배치의 한계를 분석했습니다. React 합성 컴포넌트로 유연한 조합과 재사용성을 확보하는 방법을 소개합니다.

#React#Atomic Design#합성 컴포넌트
3700

프론트엔드

자바스크립트의 새로운 기능들

ES2022의 모듈, 배열, 객체, 에러, 정규표현식, 클래스 관련 기능을 예제로 정리했습니다. Top-level await와 private 필드, findLast 계열의 활용 방식과 주의점을 소개합니다.

#JavaScript#ECMAScript#비동기
200

프론트엔드

자바스크립트의 새로운 기능들

ES2022의 비동기 모듈 처리, 배열·객체 API, 에러 원인, 정규식, 클래스 필드 기능을 정리했습니다. 추가 제안된 findLast 계열과 브라우저 지원 시 유의점을 함께 소개합니다.

#JavaScript#ECMAScript#top-level await
2800

프론트엔드

Next/Image를 활용한 이미지 최적화

Next/Image로 지연 로딩·WebP 변환·반응형 이미지를 적용해 이미지 전송량과 로딩 시간을 줄였습니다. `sizes`와 srcSet 설정을 조정해 과도한 고해상도 요청 및 최초 생성 지연을 해결했습니다.

#Next.js#Next/Image#lazy loading
200

프론트엔드

Next/Image를 활용한 이미지 최적화

Next/Image로 lazy loading, WebP 변환, placeholder를 적용해 이미지 전송량과 로딩 시간을 줄였습니다. layouts와 sizes 설정을 조정해 과도한 고해상도 요청 및 이미지 생성 비용을 해결했습니다.

#Next.js#Next/Image#lazy loading
3700

프론트엔드

Webpack 빌드에 날개를 달아줄 Esbuild-Loader

Webpack의 Babel-Loader와 Terser를 Esbuild 기반 구성으로 교체해 빌드 시간을 비교했습니다. 개발·프로덕션·CI 환경에서 Esbuild 적용 시 상대적인 빌드 시간 단축을 확인했습니다.

#Webpack#esbuild#Babel
400

프론트엔드

Webpack 빌드에 날개를 달아줄 Esbuild-Loader

Webpack의 Babel-Loader와 Terser를 Esbuild-Loader·Minify로 교체해 빌드 시간을 비교했습니다. 개발 서버와 CI 프로덕션 빌드에서 Esbuild 조합의 유의미한 단축 효과를 확인했습니다.

#webpack#esbuild#Babel
2100

프론트엔드

웹 애니메이션을 구현하는 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

데브옵스

Lighthouse CI를 알아보고 Github Actions에 적용하기

Lighthouse CI를 GitHub Actions에 연동해 웹 성능 측정과 보고서 생성을 자동화했습니다. 임계값 검증과 PR 댓글 지표 공유로 성능 저하를 병합 전에 확인합니다.

#Lighthouse CI#GitHub Actions#CI/CD
200

데브옵스

Lighthouse CI를 알아보고 Github Actions에 적용하기

Lighthouse CI를 GitHub Actions에 연동해 웹 성능 측정과 보고서 생성을 자동화했습니다. 점수 기준으로 CI를 실패시키고 PR 댓글에 FCP·LCP 등 상세 지표를 표시했습니다.

#Lighthouse#GitHub Actions#CI/CD
3100

프론트엔드

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

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

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

프론트엔드

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

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

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