모든 블로그
크리에이트립

크리에이트립

도메인medium.com
주요 카테고리 프론트엔드 · AI · 백엔드

활동 요약

대표 인기 포스트대용량 트래픽을 견디는 서버 만들기 — Rust 기반 게이트웨이 구축260 조회
최근 30일
0개
평균 조회
78
누적 조회
1,566
전체 글
20개
마지막 발행
2026. 6. 15.
블로그 방문

크리에이트립 기술 블로그 글 (10)

프론트엔드

웹뷰 속 무한 CSS 애니메이션의 숨은 비용

Android 웹뷰에서 무한 CSS 애니메이션이 앱 CPU를 크게 올리는 현상을 조사했습니다. transform 최적화만으로는 해결되지 않았고, 지속 애니메이션 자체를 줄이는 방향이 필요했습니다.

#CSS#React Native#Android
9800

프론트엔드

styled-components에서 Tailwind CSS로 안전하게 대규모 마이그레이션하기

styled-components에서 Tailwind CSS로의 대규모 점진 마이그레이션 방법을 다뤘습니다. CSS Cascade Layers와 SSR/CSR 대응으로 스타일 충돌 없이 전환했습니다.

#Tailwind CSS#styled-components#CSS Cascade Layers
16200

프론트엔드

GraphQL 커스텀 디렉티브로 만드는 선언적 지연 로딩

SSR에서 개인화 필드 동기화와 중복 요청 문제를 GraphQL 커스텀 디렉티브로 해결한 사례를 소개했습니다. `@lazy`로 필요한 필드만 재조회해 네트워크 비용을 줄이고 개발자 경험을 개선했습니다.

#GraphQL#Apollo Client#Next.js
7800

프론트엔드

피그마 플러그인을 통한 개발 생산성 끌어올리기

피그마 플러그인으로 디자인 토큰과 Tailwind 클래스를 자동 추출해 개발 생산성을 높인 사례를 소개했습니다. 디자인 시스템의 일관성과 지속적인 도구 개선의 중요성도 함께 강조했습니다.

#Figma#Tailwind CSS#TypeScript
11300

프론트엔드

XState 도입기: 복잡한 여행 플랜 상태 관리를 단순화한 방법

여행 플랜처럼 단계가 많고 분기 있는 흐름을 XState 상태 머신으로 정리한 도입기였습니다. React 상태 관리보다 전이 로직을 한곳에 모아 유지 보수와 협업을 쉽게 만든 사례였습니다.

#XState#React#상태 머신
11200

프론트엔드

웹 접근성을 지켜라

웹 접근성의 기본 개념과 접근성 트리, ARIA 활용법을 정리했습니다. 또한 Radix UI Dialog 예시로 포커스 관리와 상태 전달 방식을 살펴보았습니다.

#웹 접근성#ARIA#React
3600

프론트엔드

어학당 홈 성능 최적화 — 1편

어학당 홈의 SEO 개선을 위해 성능 최적화 작업을 진행했습니다. 부분 CSR, 코드 스플리팅, 레이지 로드, 서드파티 스크립트 최적화로 지표를 개선했습니다.

#SEO#성능#Next.js
2800

프론트엔드

Custom Style System 구축하기

styled-components 기반 프로젝트에서 반복되는 레이아웃 스타일을 줄이기 위해 Custom Style System을 구축했습니다. props 매핑과 반응형 인터페이스로 VStack, HStack 같은 재사용 컴포넌트를 만들었습니다.

#styled-components#CSS-in-JS#React
2800

프론트엔드

코드 퍼스트로 스키마 변경이 일어났을 때 확인하는 과정을 자동화해보자

코드 퍼스트 GraphQL 스키마 변경으로 인한 프론트엔드 빌드 실패 확인 과정을 GitHub Actions로 자동화한 사례입니다. 서버 PR 반영 전에 코드젠과 타입 체크를 돌려 영향 범위를 빠르게 검증했습니다.

#GraphQL#GitHub Actions#codegen
2900

프론트엔드

styled-components가 런타임에 css를 주입하는 방법

styled-components의 런타임 CSS 주입 흐름과 내부 동작 원리를 단계별로 정리했습니다. 또한 동적 스타일링의 편의성과 런타임 성능 부담, 대안 도구까지 함께 살펴보았습니다.

#styled-components#CSS-in-JS#React
3100