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)

프론트엔드

Tailwind CSS 사용기

Tailwind 테마 확장으로 반복적인 arbitrary value를 줄이는 방법을 소개했습니다. Preflight와 클래스 우선순위, twin.macro·Headwind 활용 시 주의점을 정리했습니다.

#Tailwind CSS#React#CSS
300

프론트엔드

Tailwind CSS 사용기

Tailwind의 arbitrary value를 테마 확장으로 줄이고 Preflight 동작을 점검하는 방법을 소개했습니다. 클래스 우선순위 충돌은 twin.macro, 긴 클래스 정리는 Headwind로 보완했습니다.

#Tailwind CSS#React#CSS
4400

프론트엔드

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

백엔드

GraphQL Mutation 설계하기

GraphQL mutation을 사용자 행동 중심으로 명명하고 단일 input·전용 payload 구조를 권장했습니다. 중첩을 활용해 버전 없는 API의 확장성과 메타데이터 추가 여지를 확보합니다.

#GraphQL#API#mutation
200

백엔드

GraphQL Mutation 설계하기

GraphQL mutation을 사용자 행동 중심으로 명확하게 설계하는 원칙을 설명했습니다. 단일 input, 고유 payload, 중첩 구조로 버전 없는 확장성을 확보합니다.

#GraphQL#mutation#API
2800

데브옵스

카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까?

GitHub Actions로 push 테스트, 캐시, Slack 알림을 자동화한 사례를 소개했습니다. 브랜치명·Secrets·스케줄을 활용한 지역별 AWS 배포 흐름도 설명합니다.

#GitHub Actions#CI/CD#cache
100

데브옵스

카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까?

GitHub Actions로 React 프로젝트의 검사와 빌드를 자동화하고 의존성 캐시를 적용했습니다. Composite Action과 Secrets로 Slack 알림 및 배포 브랜치 규칙을 구성했습니다.

#GitHub Actions#CI/CD#React
4300

프론트엔드

Suspense와 선언적으로 Data fetching처리

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

#React#react-query#Suspense
200

프론트엔드

Suspense와 선언적으로 Data fetching처리

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

#React#Suspense#react-query
3700