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)

프론트엔드

자바스크립트로 만든 유한 상태 기계 XState

XState로 FSM의 상태, 이벤트, 전이와 컨텍스트를 분리하는 방법을 장바구니 예제로 설명했습니다. React 훅, 가드, 액션, 비동기 서비스로 복잡한 UI 흐름을 선언적으로 관리합니다.

#JavaScript#XState#React
300

프론트엔드

자바스크립트로 만든 유한 상태 기계 XState

XState로 유한 상태 기계의 개념과 사용법을 장바구니 예제로 설명했습니다. React에서 상태, 컨텍스트, 액션, 가드를 어떻게 연결하는지 정리했습니다.

#XState#FSM#JavaScript
4400

프론트엔드

카카오 공채 입사 후 10개월 FE개발팀에서의 여정

카카오엔터테인먼트 신입 FE 개발자의 온보딩부터 페이지 파트 배정까지의 과정을 소개했습니다. 원격 협업 문화와 리뷰·협력자 중심 개발 방식을 공유합니다.

#JavaScript#HTML#CSS
200

프론트엔드

카카오 공채 입사 후 10개월 FE개발팀에서의 여정

카카오엔터테인먼트 FE개발팀 신입이 10개월간의 온보딩과 실전 프로젝트 경험을 소개했습니다. 재택근무 속 게더타운, 스몰토크, 데모데이, 협업 문화로 성장한 과정을 공유했습니다.

#JavaScript#HTML#CSS
3300

프론트엔드

React 이벤트와 브라우저 이벤트

Swiper와 React 이벤트 위임 방식의 차이로 버튼 클릭 전파가 막히지 않는 원인을 분석했습니다. 상위 React 래퍼에 클릭 핸들러를 두어 합성 이벤트 흐름으로 통일했습니다.

#React#Swiper#SyntheticEvent
000

프론트엔드

React 이벤트와 브라우저 이벤트

React 합성 이벤트와 브라우저 DOM 이벤트의 전파 차이로 Swiper 내부 버튼 클릭이 의도와 다르게 동작하는 사례를 다뤘습니다. 해결책으로 이벤트 부착 위치를 조정해 상위 래퍼에 클릭을 맡기는 방식을 제안했습니다.

#React#event#브라우저
1500

프론트엔드

바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)

React와 TypeScript로 캔버스 기반 바나나 먹기 게임을 구현했습니다. 이미지 로딩, 키보드 이동, 낙하·충돌 판정, 애니메이션 정리 과정을 설명합니다.

#React#TypeScript#canvas
200

프론트엔드

바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)

캔버스와 React, TypeScript로 바나나를 먹는 미니언 게임을 만드는 과정을 정리한 글입니다. 이미지 로드, 이동 제어, 충돌 판정, 바나나 생성과 삭제 로직을 단계별로 설명했습니다.

#React#TypeScript#Canvas
2800

프론트엔드

MSW를 활용하는 Front-End 통합테스트

MSW로 API 요청을 가로채는 React·Jest 기반 통합 테스트 구성을 소개했습니다. 정상·조건부·엣지·네트워크 오류 응답을 동적으로 검증할 수 있습니다.

#React#TypeScript#Jest
100

프론트엔드

MSW를 활용하는 Front-End 통합테스트

MSW를 통해 FE 통합테스트에서 API 모킹과 응답 제어를 쉽게 하는 방법을 소개했습니다. 검색 페이지 예시로 정상 응답, 엣지 케이스, 에러 처리까지 검증하는 흐름을 설명했습니다.

#MSW#통합테스트#Jest
3700

프론트엔드

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

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