코드 한 줄로 경험하는 React 동시성의 마법
React 18 동시성 렌더링과 Lane 모델로 입력 지연 문제를 줄이는 방법을 설명했습니다. useTransition과 useDeferredValue를 통해 무거운 렌더링을 분리한 실제 적용 사례도 소개했습니다.
#React#동시성
27100
프론트엔드 기술 블로그 최신 글
필터 0
Kotlin으로 iOS까지? 이게 되네… 되긴 해요!
Kotlin Multiplatform으로 Android와 iOS의 비즈니스 로직을 공유하는 구조를 소개했습니다. 플랫폼별 UI는 유지하면서 공통 모듈과 expect/actual, Ktor, SKIE로 연동하는 흐름을 설명했습니다.
#Kotlin#iOS
8300
11키티즈 게임에서 XState를 선택한 이유
11키티즈 게임에서 XState를 선택한 이유를 상태 관리와 자동 진행 관점에서 설명했습니다. 복잡한 게임 로직을 명확하게 분리하고 유지보수성을 높이는 점을 강조했습니다.
#XState#React
5100
SSE 기반 AI Agent 스트리밍 적용기 — Alpy에 자연스러운 대화를 불어넣다
SSE 기반 AI Agent 스트리밍 적용기 — Alpy에 자연스러운 대화를 불어넣다
AI Agent 응답 스트리밍에 SSE를 선택하고 POST를 지원하는 Custom EventSource를 구현했습니다. 청크 버퍼링과 연결 관리로 파싱 오류 및 연속 요청 충돌을 해결했습니다.
#SSE#EventSource
000
의존성 그래프를 활용한 프로젝트 시각화 — 사이드 이펙트 한눈에 파악하기
의존성 그래프로 프로젝트를 시각화해 코드 파악 시간을 줄인 사례를 소개했습니다. 파일 영향 범위와 사이드 이펙트를 빠르게 확인하는 실무 활용법을 정리했습니다.
#검색#JavaScript
26600
Playwright로 로그인을, Lighthouse로 성능을: 인증 페이지 성능측정 자동화
Playwright로 로그인 세션을 자동 구성한 뒤 Lighthouse를 실행해 인증 페이지 성능 측정을 자동화했습니다. 수집한 지표는 CloudWatch와 Grafana로 연동해 지속적으로 모니터링할 수 있게 했습니다.
#Playwright#Lighthouse
12600
선제적 장애 대응을 위한 Sentry 최적화 적용기
선제적 장애 대응을 위한 Sentry 최적화 적용기
Sentry의 에러 수집 한도와 노이즈 문제를 줄이기 위해 로그를 고도화하고 필터링했습니다. Alert와 대응 프로세스까지 정비해 선제적 장애 탐지를 목표로 했습니다.
#Sentry#모니터링
6600
NPM Library 를 직접 배포하여 오픈소스 개발자가 되어보는 경험
오픈소스에 기여하는 방법으로 직접 NPM 라이브러리를 만들어 배포하는 과정을 소개했습니다. React 컴포넌트 예시와 함께 npm publish, 버전 관리, 재배포 절차를 설명했습니다.
#NPM#React
14600
왜 왓챠 웹은 Remix로 마이그레이션했을까?
왓챠 웹이 기존 react + express 구조에서 Remix로 마이그레이션한 이유와 과정을 정리했습니다. 점진적 전환, 라우팅 분기, 컴포넌트 분리와 같은 운영 전략도 함께 공유했습니다.
#Remix#React
33800
인도 유저들이 이해하는 금융 용어 (2)
인도 유저들이 이해하는 금융 용어 (2)
인도 대출앱에서 금융·영어 문구가 유저에게 오해를 유발하는 사례를 정리했습니다. 쉬운 표현으로 바꾸고 A/B 테스트로 점진 개선하는 방향을 제안했습니다.
#UI/UX#금융
600
Playwright로 효율적인 FrontEnd 개발 시나리오 테스트하기
Playwright를 활용해 프론트엔드 개발 시나리오 테스트를 적용하는 내용을 다뤘습니다. 지난 글의 통합 테스트 개념을 실제 사례에 연결해 소개했습니다.
#Playwright#test
5900
iOS 개발자를 위한 DocC 실무 튜토리얼
DocC를 활용한 iOS 문서화 실무 흐름과 배포 방법을 정리했습니다. 코드와 문서를 동기화해 협업 비용을 줄이는 효과도 소개했습니다.
#iOS#DocC
11800
![[Vue] motion 라이브러리로 더 나은 UX 제공하기](https://devocean.sk.com/thumnail/2025/3/26/161965bcf2c0b07df46454d50714fad4eb4e06189069272bebd9fabacb97b9b4.png)
[Vue] motion 라이브러리로 더 나은 UX 제공하기
Vue에서 motion-v를 사용해 다양한 UI 애니메이션을 선언적으로 구현하는 방법을 소개했습니다. Transition, IntersectionObserver, GSAP보다 간결하게 작성할 수 있는 사례를 함께 살펴보았습니다.
#Vue.js#UI/UX
28000
React Native에서 타입 안전한 파일 기반 라우팅 구현하기
Bedrock에서 파일 기반 라우팅의 타입 안전성을 높이는 방법을 소개했습니다. 선언 병합과 자동 타입 생성으로 파라미터 검증과 네비게이션 추론을 개선했습니다.
#React Native#TypeScript
21300