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)

프론트엔드

Webview에서 핀치 줌(pinch zoom) 구현하기

TouchEvent와 두 터치 간 거리 변화를 이용해 Webview 핀치 줌을 구현했습니다. 기본 확대 차단, 중심점 보정, 멀티터치 처리 시 주의점을 함께 설명합니다.

#TypeScript#webview#pinch zoom
200

프론트엔드

Webview에서 핀치 줌(pinch zoom) 구현하기

웹뷰에서 핀치 줌을 직접 구현하는 방법을 설명했습니다. TouchEvent와 좌표 보정을 활용해 확대 중심을 유지하는 로직을 소개했습니다.

#TypeScript#web#mobile
7700

아키텍처

라이브채팅 플랫폼 구현기 2탄 : 아키텍처 및 성능 테스트

비동기 메시지 처리와 Kafka 중심의 분산 라이브채팅 아키텍처를 설계했습니다. k6 기반 성능 테스트로 브로커와 로드밸런싱 이슈를 개선했습니다.

#WebSocket#Kafka#Redis
200

아키텍처

라이브채팅 플랫폼 구현기 1탄 : 개발 언어 및 기반기술 조사

20만 동시 접속 실시간 채팅 요구를 위해 Kotlin·Spring Boot·WebSocket 기반을 선택했습니다. Kafka 스트림과 아호-코라식으로 확장성과 실시간 금칙어 처리를 설계했습니다.

#Kotlin#Spring Boot#WebSocket
000

프론트엔드

시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)

BackstopJS와 Storybook으로 공통 컴포넌트의 시각적 회귀 테스트를 구축했습니다. Docker와 PR 프리뷰 리포트로 환경 차이와 UI 변경 검토를 관리했습니다.

#BackstopJS#Storybook#Docker
200

데브옵스

시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)

BackstopJS로 시각적 회귀 테스트를 구축한 경험을 정리했습니다. 스토리북과 Docker를 함께 사용해 UI 변경 검증과 운영 안정성을 높였습니다.

#BackstopJS#Docker#Puppeteer
5000

프론트엔드

나만의 Jest Matchers 만들기

Jest Custom Matcher로 여러 CSS class 포함 여부를 한 번에 검증하는 방법을 설명했습니다. 설정 파일 등록, 타입 검증, TypeScript 타입 확장 과정을 함께 다뤘습니다.

#Jest#TypeScript#test
000

프론트엔드

나만의 Jest Matchers 만들기

Jest Custom Matcher를 만들어 반복적인 class 검증 테스트를 줄이는 방법을 소개했습니다. setup 파일 등록과 TypeScript 타입 선언까지 함께 다뤘습니다.

#Jest#test#TypeScript
1400

기타

카카오엔터테인먼트의 첫 번째 사내 해커톤, ENTERTHON 2022! 열정과 재미가 가득했던 무박 2일

카카오엔터테인먼트가 첫 사내 해커톤 ENTER+THON 2022를 24시간 무박으로 진행했습니다. 21개 팀이 서비스·플랫폼 기능 프로토타입을 구현하고 실적용을 검토했습니다.

#해커톤#프로토타입#기술문화
200

프론트엔드

E2E 테스트 도입 경험기

기획서 기반 시나리오와 실제 API로 E2E 테스트를 도입하고 pre-push 검증에 연결했습니다. Sorry-Cypress 병렬화로 실행 시간을 줄이며 버그와 API 사이드이펙트를 조기 발견했습니다.

#Cypress#E2E 테스트#QA
000

프론트엔드

E2E 테스트 도입 경험기

E2E 테스트 도입의 장점과 운영상의 걸림돌을 함께 정리한 경험기였습니다. 기획서 기반 시나리오와 병렬 실행으로 관리성과 속도를 개선한 사례를 공유했습니다.

#E2E 테스트#Cypress#Playwright
6300

프론트엔드

홈 화면에 웹 바로가기를 추가하기(A2HS)

A2HS의 조건과 매니페스트·서비스 워커를 이용한 최소 설정 방식을 설명했습니다. React 커스텀 설치 UI와 iOS Safari의 지원 제약도 함께 다뤘습니다.

#A2HS#PWA#service worker
300

프론트엔드

홈 화면에 웹 바로가기를 추가하기(A2HS)

웹 앱을 홈 화면에 추가해 네이티브 앱처럼 실행하는 A2HS 적용 방법을 설명했습니다. 매니페스트와 서비스 워커, beforeinstallprompt 활용법과 iOS 제한도 함께 정리했습니다.

#PWA#Web App Manifest#service worker
3400

프론트엔드

Scroll Snap API를 통해 이미지 캐러셀 완성하기

Scroll Snap API로 이미지 캐러셀의 스크롤 종료 위치를 제어하는 방법을 설명했습니다. JavaScript 없이 축, 스냅 강도, 정렬 기준을 조합해 슬라이드 UX를 구현합니다.

#CSS#Scroll Snap API#SwiperJS
100

프론트엔드

Scroll Snap API를 통해 이미지 캐러셀 완성하기

Scroll Snap API로 이미지 캐러셀을 만드는 방법을 정리했습니다. 스크롤 컨테이너와 자식 요소에 필요한 속성을 설정해 자연스러운 스냅 동작을 구현했습니다.

#CSS#web#UI/UX
3000

아키텍처

적정기술 딜레마

기술 선택은 유행보다 서비스 요구사항, 조직 역량, 유지보수 가능성을 기준으로 판단해야 합니다. SPA·SSR 전환처럼 부작용과 운영 복잡도가 이득보다 큰지 검증할 필요가 있습니다.

#React#SPA#SSR
100

프론트엔드

적정기술 딜레마

적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.

#React#Next.js#SSR
3500

프론트엔드

테스트 코드 자동으로 만들기 feat. Cypress Studio

Cypress Studio로 사용자 액션과 단언을 기록해 E2E 테스트 코드를 자동 생성하는 방법을 소개했습니다. 비개발자도 Standalone 앱과 로우코드 방식으로 테스트를 만들고 Git 브랜치로 관리할 수 있습니다.

#Cypress#E2E#test
100