Velopers
모든 블로그
크리에이트립

크리에이트립

도메인medium.com
주요 카테고리 Frontend · AI · Backend

활동 요약

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

최신 게시글 (20)

프론트엔드

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

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

#CSS#React Native#Android
7000

AI

AI 리뷰를 신뢰할 수 있을까요?

AI 코드 리뷰의 신뢰성을 높이기 위해 자체 벤치마크와 반영률 지표를 만들고 개선 과정을 정리했습니다. 서브에이전트와 프롬프트 튜닝의 한계를 확인한 뒤 데이터 기반으로 모델과 워크플로를 바꿨습니다.

#LLM#Claude#GitHub
12100

프론트엔드

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

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

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

AI

Claude Code를 REST API로 감싸기: 세션, 스트리밍, MCP

Claude Code를 REST API로 감싸 세션 복원, 스트리밍 분리, MCP 도구 연동 구조를 정리했습니다. 기존 AI SDK 도구를 재사용하면서 웹 환경에서 에이전트를 운영하는 방법을 공유했습니다.

#Claude Code#REST API#MCP
13300

AI

Agent SDK로 만드는 자율적 AI Assistant

AI PR 리뷰 도구의 한계를 자율성과 확장성 관점에서 설명했습니다. Claude Agent SDK로 Multi-turn 에이전트를 구성해 이슈 생성과 PR 작업까지 확장한 사례를 공유했습니다.

#Agent SDK#LLM#MCP
7800

프론트엔드

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

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

#GraphQL#Apollo Client#Next.js
6700

프론트엔드

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

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

#Figma#Tailwind CSS#TypeScript
10100

기타

크트 엔지니어들과 AI

AI가 작성한 코드의 리뷰 책임과 이해 수준을 두고 개발팀이 PR 템플릿 개선을 논의했습니다. 작업자 책임과 자동 검증 강화가 함께 필요하다는 점을 짚었습니다.

#LLM#ChatGPT#Claude
7900

프론트엔드

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

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

#XState#React#상태 머신
10900

백엔드

대용량 트래픽을 견디는 서버 만들기 — Rust 기반 게이트웨이 구축

대용량 트래픽으로 반복 다운되던 GraphQL 게이트웨이를 Rust 기반 Apollo Router로 재구축했습니다. 배포 후 처리 성능과 자원 사용률이 크게 개선되어 장애 없이 운영 중입니다.

#Rust#GraphQL#Apollo Router
25100

AI

사내 AI 챗봇 서비스 구축하기

사내 AI 챗봇 서비스를 Next.js 템플릿 기반으로 구축하고, Azure OpenAI와 GraphQL 도구 연동을 확장한 과정을 공유했습니다. 배포와 필터링, 컨텍스트 초과 같은 문제를 해결하며 내부 구성원용 서비스로 운영한 사례입니다.

#LLM#ChatGPT#GraphQL
3600

프론트엔드

웹 접근성을 지켜라

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

#웹 접근성#ARIA#React
3100

AI

unified + rehype 를 사용하여 경제적인 LLM번역 프로세스 구축하기

HTML 번역 전에 unified와 rehype로 속성을 분리해 LLM 입력을 최소화했습니다. 그 결과 토큰을 약 40% 줄이고 번역 오류 위험도 낮췄습니다.

#LLM#unified#rehype
1200

백엔드

ElasticSearch 비용, 성능 최적화 — 2편

ElasticSearch 메이저 버전 업그레이드와 리전 이관, PrivateLink 구축으로 성능과 비용을 함께 최적화한 사례를 다뤘습니다. 무중단 배포 전략, snapshot 복원, 인덱스 정리와 같은 실무 팁도 함께 공유했습니다.

#Elasticsearch#AWS#privateLink
1600

프론트엔드

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

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

#SEO#성능#Next.js
2200

백엔드

ElasticSearch 비용, 성능 최적화 — 1편

ElasticSearch 운영 로그 인덱스가 방치되며 비용과 성능 문제가 커진 사례를 정리했습니다. ILM, SLM, 인덱스 분리로 연간 약 2,000만 원을 절감했습니다.

#Elasticsearch#AWS#S3
2000

프론트엔드

Custom Style System 구축하기

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

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

프론트엔드

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

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

#GraphQL#GitHub Actions#codegen
1900

프론트엔드

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

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

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

기타

너무 웃어서 광대가 아팠던 개발팀 워크샵을 돌아보며

개발팀 워크샵을 준비하고 다녀온 과정을 돌아보며 리프레시와 팀워크의 의미를 기록했습니다. 세미나, 게임, 식사, 러닝을 함께하며 서로를 더 잘 이해한 즐거운 시간이었습니다.

#워크샵#세미나#Elasticsearch
2000