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)

프론트엔드

View Transitions API

View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.

#React#CSS#JavaScript
3100

프론트엔드

ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)

ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.

#ChatGPT#Next.js#React
2100

프론트엔드

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

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

#TypeScript#webview#pinch zoom
200

프론트엔드

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

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

#TypeScript#web#mobile
7700

프론트엔드

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

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

#BackstopJS#Storybook#Docker
200

프론트엔드

나만의 Jest Matchers 만들기

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

#Jest#TypeScript#test
000

프론트엔드

나만의 Jest Matchers 만들기

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

#Jest#test#TypeScript
1400

프론트엔드

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

프론트엔드

적정기술 딜레마

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

#React#Next.js#SSR
3500

프론트엔드

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

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

#Cypress#E2E#test
100

프론트엔드

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

Cypress Studio를 활용해 E2E 테스트 코드를 자동 생성하는 로우코드 방법을 소개했습니다. 개발자와 QA의 반복 작업 부담을 줄이고 브랜치 기반으로 테스트를 관리하는 흐름을 정리했습니다.

#Cypress#E2E 테스트#자동화
4000

프론트엔드

마크다운에 컴포넌트 추가하기

unified 기반의 마크다운 AST 변환 과정을 설명했습니다. Gatsby에서 커스텀 태그를 React 컴포넌트로 치환하고 MDX 대안도 소개합니다.

#Markdown#Gatsby#React
000

프론트엔드

마크다운에 컴포넌트 추가하기

마크다운을 mdast, hast, HTML로 변환하는 흐름을 살펴보고, 커스텀 태그를 리액트 컴포넌트로 치환하는 방법을 소개했습니다. MDX와 Gatsby 연동 예시도 함께 정리했습니다.

#Markdown#HTML#unified
3100