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)

프론트엔드

이제부터 이 컴포넌트는 제 겁니다

리액트에서 렌더링과 상태 제어를 외부로 넘기는 IoC 패턴들을 정리했습니다. Render Props, 합성 컴포넌트, Controlled Props의 특징과 장단점을 비교했습니다.

#React#IoC#Context
1900

프론트엔드

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기

React Error Boundary로 렌더링 에러와 API 에러를 선언적으로 처리하는 구조를 소개했습니다. 제한된 범위의 ApiErrorBoundary와 전역 GlobalErrorBoundary로 재시도 UX까지 구성했습니다.

#React#error boundary#Suspense
5000

프론트엔드

React 컴포넌트와 추상화

React 컴포넌트의 책임을 범용 UI와 도메인 로직으로 나누는 추상화 방법을 설명했습니다. 합성·커스텀 훅·상태 설계로 결합도를 낮추는 트레이드오프를 다뤘습니다.

#React#컴포넌트#추상화
100

프론트엔드

React 컴포넌트와 추상화

React 컴포넌트를 책임과 도메인 의존성 기준으로 어떻게 추상화할지 설명한 글입니다. 범용 컴포넌트 분리와 합성, 훅 활용을 통해 유연한 구조를 제안했습니다.

#React#컴포넌트#추상화
5000

프론트엔드

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

디자인 시스템 구축 과정에서 Emotion CSS의 테마 의존성과 가독성 문제를 분석했습니다. Tailwind CSS와 Twin.Macro로 유틸리티, 반응형·다크 모드, 접근성 단위를 구성했습니다.

#tailwind css#Twin.Macro#Emotion CSS
100

프론트엔드

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

카카오페이지 웹 개편에서 Emotion CSS의 한계를 줄이기 위해 Tailwind CSS와 Twin.Macro를 도입했습니다. 디자인 시스템 네이밍을 쉽게 반영하고, 커스텀 플러그인으로 부족한 유틸리티를 보완했습니다.

#Tailwind CSS#Emotion CSS#Twin.Macro
5800

데브옵스

GitHub Actions workflow를 수동으로 trigger하기(feat. inquirer.js)

workflow_dispatch와 GitHub CLI로 브랜치 푸시 없이 배포 워크플로를 수동 실행했습니다. inquirer.js로 브랜치·region·환경 입력을 받아 배포 명령을 단순화했습니다.

#GitHub Actions#GitHub#CI/CD
000

데브옵스

GitHub Actions workflow를 수동으로 trigger하기(feat. inquirer.js)

GitHub Actions의 `workflow_dispatch`와 GitHub CLI를 이용해 수동 배포를 실행하는 방법을 소개했습니다. 또한 inquirer.js로 브랜치, region, env를 입력받아 배포를 자동화하는 구성을 설명했습니다.

#GitHub Actions#GitHub CLI#inquirer.js
4100

프론트엔드

자바스크립트로 만든 유한 상태 기계 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