미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
브라우저에서 이미지 보정을 구현할 때 SVG 필터를 활용하는 방법을 소개했습니다. 선언적 적용과 파이프라인 구성, React 연동의 장점을 중심으로 정리했습니다.
#SVG#React
2800
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
조합형 Form 컴포넌트 설계
React Hook Form과 MUI 기반 폼 컴포넌트의 확장 한계를 설명했습니다. 역할 분리와 Composition Pattern으로 복합 입력 UI와 유지보수성을 개선한 사례입니다.
#React#React Hook Form
29400
프레임워크에 구애받지 않는 통합 백오피스 구축하기
React, Vue, JSP가 섞인 백오피스에서 공통 화면을 웹 컴포넌트로 통합한 사례를 소개했습니다. 부모 시스템의 인증과 자원을 공유하면서도 CDN 독립 배포와 스타일 격리를 구현했습니다.
#Vue.js#React
29000
React 환경에서 중복 API 요청 개선
React에서 전역 Context와 비동기 흐름이 얽히며 중복 API 요청과 레이스 컨디션이 발생했습니다. AbortController, runId, Promise.all로 요청 취소와 최신 응답 보장을 개선했습니다.
#React#비동기
8400
Loopin 메신저 개발기
오래된 메신저를 WebSocket과 STOMP 기반으로 재구축한 사례를 소개했습니다. Presence를 RDB로 관리해 단순한 구조와 운영 효율을 확보한 점이 핵심입니다.
#WebSocket#STOMP
5300
FE News 26년 7월 소식을 전해드립니다.
FE News 26년 7월 소식을 전해드립니다.
네이버 FE News에서 TypeScript 7.0 RC, 정책 전달 방식, AI 에이전트 루프 설계와 React 코드 점검 도구를 소개했습니다. 대규모 코드베이스 성능 개선과 규칙 일관성, 자동 검증 관점의 실무 아이디어를 정리했습니다.
#TypeScript#React
57900
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
TVING의 새로운 백오피스 Refine 구축기 — (1)
TVING의 새로운 백오피스 Refine 구축기 — (1)
TVING이 Refine과 AI Agent를 활용해 백오피스 개발 속도를 높인 과정을 소개했습니다. 모노레포와 GraphQL, 자동화 규칙으로 컨벤션 기반 생산성을 강화했습니다.
#Refine#React
18300
AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기
AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기
LIFF와 LINE Planet을 활용해 LINE 앱 안에서 그룹 영상 통화 서비스를 만드는 구현 흐름을 정리했습니다. 미리보기, 통화 입장, 초대, 가상 배경, CORS와 모바일 카메라 이슈까지 함께 다뤘습니다.
#LIFF#LINE
8750
10년 된 에디터 코어를 Froala에서 Lexical로 교체하기
10년 된 에디터 코어를 Froala에서 Lexical로 교체하기
10년 된 에디터 코어를 Froala에서 Lexical로 교체한 마이그레이션 사례를 소개했습니다. AI를 활용해 구현 부담을 줄이고, 기존 결과와의 대조 검증으로 6주 만에 전환을 마쳤습니다.
#Lexical#마이그레이션
4600
React Query 캐시 전략에 대한 고찰
React Query 캐시 전략에 대한 고찰
React Query의 staleTime, gcTime, 키 팩토리, 무효화 전략을 중심으로 캐시 운영법을 정리했습니다. 전역 기본값과 직접 갱신을 통해 불필요한 재요청과 화면 깜빡임을 줄이는 방법을 제안했습니다.
#React#cache
4100
Keycloakify의 page_hint 상태 관리 개선
Keycloakify의 page_hint 상태 관리 개선
Keycloakify의 라운드트립 구조 때문에 `page_hint`를 단순히 React 상태처럼 다루면 새로고침 시 화면이 바뀌는 문제가 있었습니다. 마운트 시 무조건 삭제하던 로직을 진입 흐름에 맞게 조정해 직원 계정 최초 설정 화면을 유지했습니다.
#Keycloak#React
1400
선언적 폼 바인딩
선언적 폼 바인딩
다이얼로그 수정 폼에서 useEffect 기반 수동 바인딩으로 발생한 상태 꼬임 문제를 정리했습니다. React Hook Form의 values로 선언적 동기화를 적용해 잔상과 레이스 컨디션을 줄였습니다.
#React#React Hook Form
1700
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나
왓챠 웹에 Document PiP를 적용한 과정과 원리를 설명했습니다. React 상태 유지, 재생 정체 복구, 종료 제어 같은 실서비스 이슈를 함께 다뤘습니다.
#React#CSS
6600
DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다
DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다
캔버스 에디터 드래그 성능 저하의 원인을 React가 아닌 Layout Thrashing으로 분석했습니다. Read와 Write를 분리한 4-Phase 배칭으로 reflow를 줄여 60fps를 회복했습니다.
#React#DOM
9200