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)

프론트엔드

React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)

SWR과 React Query로 서버 상태를 Redux의 전역 상태와 분리하는 방식을 설명했습니다. 조건부 요청, 캐시 갱신, 재검증 옵션과 두 라이브러리의 사용 차이를 비교했습니다.

#React#SWR#React Query
300

프론트엔드

React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)

SWR과 React Query로 서버 상태를 선언적으로 관리하는 방식을 비교했습니다. 조건부 요청, 캐시 갱신, 재검증 옵션의 차이를 정리했습니다.

#React#SWR#React Query
4100

프론트엔드

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

Babel·Terser의 트랜스파일링과 코드 경량화 역할, Rust 기반 SWC의 동작 원리를 설명했습니다. Next.js 실험으로 SWC의 빌드 시간 단축 효과와 플러그인 호환성 제약을 확인했습니다.

#JavaScript#Next.js#SWC
100

프론트엔드

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC

Babel과 Terser의 트랜스파일링·코드 경량화 역할을 초보자 관점에서 설명했습니다. Next.js의 SWC가 반복 빌드 시간을 줄일 수 있는 배경을 소개했습니다.

#JavaScript#Next.js#Babel
2500

프론트엔드

카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오웹툰은 CSS-in-JS와 CSS Module의 특성을 비교하고 라우팅 성능을 측정했습니다. CSS Module을 기반으로 Tailwind를 병행하되 동적 영역은 CSS Module로 보완했습니다.

#CSS#CSS-in-JS#CSS Module
200

프론트엔드

카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오웹툰 같은 복잡한 서비스에서 CSS-in-JS와 CSS Module의 특성을 비교했습니다. 개발 협업 방식과 런타임 파싱 비용을 고려한 성능 측정 방법을 소개합니다.

#CSS#CSS-in-JS#CSS Module
4200

프론트엔드

리액트로 만든 게임에 사운드 추가하기

Safari에서 반복 재생되지 않고 지연되던 React 게임 효과음 문제를 다뤘습니다. Web Audio API로 사전 디코딩·재생해 호환성과 반응성을 개선했습니다.

#React#Web Audio API#Safari
300

프론트엔드

리액트로 만든 게임에 사운드 추가하기

Safari의 `<audio>` 중복 재생 문제와 효과음 지연을 Web Audio API로 해결했습니다. 사전 디코딩한 오디오 버퍼로 빠르고 안정적인 게임 사운드를 구현했습니다.

#React#Web Audio API#Safari
3700

프론트엔드

사용자 경험과 성능 개선 방법 in 카카오웹툰

카카오웹툰의 SSR 캐싱, CDN, 지연 로딩 기반 성능 개선 사례를 소개했습니다. 로딩 쉬머와 이벤트·애니메이션 최적화, 라이트 모드로 UX를 보완했습니다.

#Next.js#SSR#cache
200

프론트엔드

사용자 경험과 성능 개선 방법 in 카카오웹툰

카카오웹툰의 SSR 캐싱, 리소스 최적화, 지연 로딩 기반 성능 개선 사례를 소개했습니다. 로딩 체감, 인터랙션, 저사양 환경까지 고려한 UX 트레이드오프를 설명합니다.

#Next.js#SSR#cache
3200

프론트엔드

Suspense와 선언적으로 Data fetching처리

사이트 개편에서 react-query를 도입한 경험을 다룹니다. Suspense 기반의 선언적 데이터 페칭 처리를 소개합니다.

#React#react-query#Suspense
200

프론트엔드

Suspense와 선언적으로 Data fetching처리

Suspense로 Promise 기반 비동기 작업과 fallback 렌더링을 선언적으로 연결했습니다. 경쟁 상태·워터폴·결합도를 줄이는 컴포넌트 구성을 설명합니다.

#React#Suspense#react-query
3700

프론트엔드

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

카카오웹툰은 GPU 가속과 lazy load로 복잡한 웹 인터랙션의 렌더링 비용을 줄였습니다. 스크롤 이벤트 대신 IntersectionObserver를 활용해 안정적인 프레임 성능을 확인했습니다.

#IntersectionObserver#lazy load#하드웨어 가속
000

프론트엔드

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

카카오웹툰 웹 개편에서 GPU 가속과 IntersectionObserver로 인터랙션·지연 로딩을 최적화했습니다. 스크롤 이벤트 대비 Observer의 안정적 프레임과 적용 시 주의점을 공유합니다.

#IntersectionObserver#lazy load#하드웨어 가속
3500

프론트엔드

웹에서 다크모드 지원하기

웹 다크모드는 body 클래스와 CSS variable로 제어하는 방식을 제안했습니다. SSR·CSR 환경의 깜빡임과 웹뷰·구버전 OS 호환성도 함께 고려했습니다.

#CSS#JavaScript#SSR
100

프론트엔드

웹에서 다크모드 지원하기

웹 다크모드는 body 클래스와 JavaScript로 제어해 다양한 정책을 지원할 수 있습니다. 렌더링 전 판별과 CSS 변수로 깜빡임 및 스타일 중복을 줄였습니다.

#CSS#JavaScript#SSR
1100

프론트엔드

setSelectionRange로 검색창 커서 옮기기

검색창 재포커스 시 커서를 텍스트 끝으로 옮기는 구현 문제를 다뤘습니다. `setSelectionRange`와 `setTimeout(0)`으로 브라우저 기본 동작 이후 처리했습니다.

#JavaScript#HTML#setSelectionRange
000

프론트엔드

setSelectionRange로 검색창 커서 옮기기

검색창 포커스 시 커서를 끝으로 옮기는 과정에서 발생한 이벤트 순서 문제를 분석했습니다. `setSelectionRange`와 0ms `setTimeout`으로 커서·스크롤 위치를 함께 제어했습니다.

#JavaScript#setSelectionRange#setTimeout
3700