카카오웹툰은 CSS를 어떻게 작성하고 있을까?
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
카카오웹툰 같은 복잡한 서비스에서 CSS-in-JS와 CSS Module의 특성을 비교했습니다. 개발 협업 방식과 런타임 파싱 비용을 고려한 성능 측정 방법을 소개합니다.
#CSS#CSS-in-JS
4200
프론트엔드 기술 블로그 최신 글
필터 0
누구나 확인 할 수 있는 안드로이드 Log
Android 앱 내부에서 logcat을 오버레이 창으로 보여주는 디버그 도구를 구현했습니다. 데이터팀 등이 개발환경 없이 이벤트 로그를 실시간 확인하도록 지원했습니다.
#Android#Logcat
000
리액트로 만든 게임에 사운드 추가하기
Safari에서 반복 재생되지 않고 지연되던 React 게임 효과음 문제를 다뤘습니다. Web Audio API로 사전 디코딩·재생해 호환성과 반응성을 개선했습니다.
#React#Web Audio API
200
리액트로 만든 게임에 사운드 추가하기
리액트로 만든 게임에 사운드 추가하기
Safari의 `<audio>` 중복 재생 문제와 효과음 지연을 Web Audio API로 해결했습니다. 사전 디코딩한 오디오 버퍼로 빠르고 안정적인 게임 사운드를 구현했습니다.
#React#Web Audio API
3600
버즈빌 안드로이드 개발자는 이렇게 일합니다
버즈빌 안드로이드 개발자는 모바일 광고 지면을 제공하는 SDK 개발을 담당합니다. UI/UX와 디바이스 효율성, SDK 사용성을 함께 개선합니다.
#Android#iOS
2700
사용자 경험과 성능 개선 방법 in 카카오웹툰
카카오웹툰의 SSR 캐싱, CDN, 지연 로딩 기반 성능 개선 사례를 소개했습니다. 로딩 쉬머와 이벤트·애니메이션 최적화, 라이트 모드로 UX를 보완했습니다.
#Next.js#SSR
200
사용자 경험과 성능 개선 방법 in 카카오웹툰
사용자 경험과 성능 개선 방법 in 카카오웹툰
카카오웹툰의 SSR 캐싱, 리소스 최적화, 지연 로딩 기반 성능 개선 사례를 소개했습니다. 로딩 체감, 인터랙션, 저사양 환경까지 고려한 UX 트레이드오프를 설명합니다.
#Next.js#SSR
3100
FrontEnd 성능 측정 도구 및 구성 방안
FrontEnd 성능 측정 항목과 Lighthouse 등 분석 도구를 비교했습니다. Docker 기반 sitespeed.io·Grafana 대시보드 구성 절차를 안내합니다.
#Lighthouse#sitespeed.io
3400
React 18 에서 추가된 기능
React 18의 동시 렌더링, automatic batching, startTransition 등 주요 추가 기능을 소개했습니다. Suspense로 데이터 로딩 상태와 UI 표시 순서를 분리하는 방식을 설명합니다.
#React#Suspense
1900
Pytest-bdd와 Selenium을 이용한 웹 UI 테스트 자동화
광고 관리 보드의 광고주 대상 기능을 웹 UI 테스트 자동화 대상으로 소개했습니다. Pytest-bdd와 Selenium을 활용한 자동화 사례와 초기 고려 사항을 다룹니다.
#pytest-bdd#Selenium
3200
댓글 모듈 레거시 걷어내기 with TDD
댓글 모듈 레거시 걷어내기 with TDD
JavaScript와 jQuery 기반의 댓글 모듈을 Vue와 TypeScript로 재구성했습니다. TDD와 컴포넌트 분리를 통해 SPA에 맞는 사내 라이브러리로 배포했습니다.
#JavaScript#Vue.js
800
우리는 왜 공통 라이브러리를 만들기 시작했나
반복 구현을 줄이고 기술 표준을 만들기 위해 공통 라이브러리 도입 배경과 기준을 정리했습니다. Lerna 모노레포와 npm으로 add-separator를 배포하고 문서화·리뷰·테스트 원칙을 세웠습니다.
#React#Lerna
100
우리는 왜 공통 라이브러리를 만들기 시작했나
반복 개발을 줄이기 위해 외부 라이브러리와 내부 공통 라이브러리의 선택 기준을 정리했습니다. Lerna 모노레포와 TDD로 숫자 구분자 패키지를 구현하고 신뢰 원칙을 세웠습니다.
#React#Lerna
2700
React Query와 함께하는 API 에러 처리 설계하기
React Query의 onError와 useApiError Hook으로 API 에러 처리 흐름을 중앙화했습니다. HTTP 상태·서비스 코드별 우선순위로 전역 규칙과 컴포넌트 예외를 함께 관리합니다.
#React#React Query
100