Velopers
모든 태그
태그

React 기술 블로그 글

React 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.

전체 238개최신 20개 표시
홈에서 필터

관련 태그

#LLM995#성능142#TypeScript112#AWS635#refactoring122#web80#UI/UX395#RAG228#Spring Boot179#Next.js112#Firebase33#Hexagonal Architecture11

최신 게시글

20개 표시

AI

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

LIFF와 LINE Planet을 활용해 LINE 앱 안에서 그룹 영상 통화 서비스를 만드는 구현 흐름을 정리했습니다. 미리보기, 통화 입장, 초대, 가상 배경, CORS와 모바일 카메라 이슈까지 함께 다뤘습니다.

#LIFF#LINE#React
5450

프론트엔드

10년 된 에디터 코어를 Froala에서 Lexical로 교체하기

10년 된 에디터 코어를 Froala에서 Lexical로 교체한 마이그레이션 사례를 소개했습니다. AI를 활용해 구현 부담을 줄이고, 기존 결과와의 대조 검증으로 6주 만에 전환을 마쳤습니다.

#Lexical#마이그레이션#React
2600

프론트엔드

React Query 캐시 전략에 대한 고찰

React Query의 staleTime, gcTime, 키 팩토리, 무효화 전략을 중심으로 캐시 운영법을 정리했습니다. 전역 기본값과 직접 갱신을 통해 불필요한 재요청과 화면 깜빡임을 줄이는 방법을 제안했습니다.

#React#cache#refactoring
800

프론트엔드

Keycloakify의 page_hint 상태 관리 개선

Keycloakify의 라운드트립 구조 때문에 `page_hint`를 단순히 React 상태처럼 다루면 새로고침 시 화면이 바뀌는 문제가 있었습니다. 마운트 시 무조건 삭제하던 로직을 진입 흐름에 맞게 조정해 직원 계정 최초 설정 화면을 유지했습니다.

#Keycloak#React#sessionStorage
500

프론트엔드

선언적 폼 바인딩

다이얼로그 수정 폼에서 useEffect 기반 수동 바인딩으로 발생한 상태 꼬임 문제를 정리했습니다. React Hook Form의 values로 선언적 동기화를 적용해 잔상과 레이스 컨디션을 줄였습니다.

#React#React Hook Form#동시성
500

기타

Agent Development Kit 및 A2A 활용 방법 등 6월 넷째 주 Google for Developers 위클리 업데이트를 지금 확인하세요!

X

#LLM#Flutter#Firebase
200

프론트엔드

왓챠 웹 PiP 적용기 — Document PiP는 어떻게 동작하고, 무엇이 어려웠나

왓챠 웹에 Document PiP를 적용한 과정과 원리를 설명했습니다. React 상태 유지, 재생 정체 복구, 종료 제어 같은 실서비스 이슈를 함께 다뤘습니다.

#React#CSS#browser
4600

프론트엔드

DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다

캔버스 에디터 드래그 성능 저하의 원인을 React가 아닌 Layout Thrashing으로 분석했습니다. Read와 Write를 분리한 4-Phase 배칭으로 reflow를 줄여 60fps를 회복했습니다.

#React#DOM#모니터링
7800

아키텍처

[AI가 읽을 수 있는 코드베이스 3/5] Standalone App: 도메인 슬라이스 독립 실행

Issue 도메인을 독립 실행 가능한 standalone-app으로 조립해 핵심 로직만 빠르게 검증하는 구조를 소개했습니다. 프로덕션 Adapter만 교체하고 시드 데이터, Swagger, React 프론트엔드를 묶어 AI 협업 검증 환경을 만들었습니다.

#Hexagonal Architecture#Spring Boot#React
100

아키텍처

[AI가 읽을 수 있는 코드베이스 3/5] Standalone App: 도메인 슬라이스 독립 실행

Hexagonal Architecture로 Issue 도메인을 standalone-app으로 독립 실행해 핵심 비즈니스 로직만 검증하는 구조를 소개했습니다. AI 에이전트의 빠른 피드백 루프와 격리된 검증 환경을 만드는 방법을 설명했습니다.

#Hexagonal Architecture#Kotlin#Spring Boot
3200

AI

우아한공방의 새로운 동료, 시스템 맥락을 가진 챗봇서비스 개발기(feat. RAG)

우아한공방의 문서와 코드베이스 맥락을 활용하는 RAG 챗봇 서비스를 구축한 과정을 소개했습니다. 검색 정확도 개선과 Guardrail, 스트리밍 응답, Storybook 전역 UI 적용까지 다뤘습니다.

#RAG#AWS#DynamoDB
1400

AI

개발자 없이 5분 만에 버그를 고친 QA, 우리가 설계한 것과 설계하지 않은 것

AI 코딩 도구를 개인용에서 팀과 비개발자용으로 확장한 설계 과정을 다뤘습니다. Slack 기반 인터페이스와 품질 게이트로 QA와 기획자도 안전하게 작업하도록 만든 사례입니다.

#Claude Code#Slack#Jira
6600

AI

CJ올리브영의 AI 협업 개발 프로세스 구축, AI-DLC 실전 도입 사례

CJ올리브영이 AWS AI-DLC와 Kiro로 팀 단위 AI 협업 개발 프로세스를 구축했습니다. 3일 워크숍에서 5개 과제를 프로토타입으로 구현하며 반복 가능한 구조의 가능성을 확인했습니다.

#AWS#AI-DLC#Kiro
18200

AI

AI-DLC 를 팀 프로젝트에 적용하기: Subagent 와 Custom Skill 로 확장한 Armiq 사례

AI-DLC에 Subagent와 Custom Skill을 결합해 팀 프로젝트 운용 문제를 보완했습니다. 비정형 요구사항 정리, 병렬 개발 merge, 전용 코드 리뷰까지 함께 다뤘습니다.

#AWS#TypeScript#node.js
4700

프론트엔드

느려터진 에디터 좀 고쳐줘를 AI에게 시켜봤다

AI가 위지윅 에디터 성능 개선을 반복 실험하도록 Auto Research 루프를 구성했습니다. 실제 체감 성능을 반영하는 벤치마크와 점수표 설계가 핵심이라는 점을 확인했습니다.

#LLM#성능#React
000

프론트엔드

느려터진 에디터 좀 고쳐줘를 AI에게 시켜봤다

AI에게 에디터 성능 개선을 맡겨 Auto Research 루프를 실험했습니다.\n평가 지표 설계가 핵심이었고, 실제 체감 성능에 맞는 벤치마크가 중요하다고 정리했습니다.

#LLM#성능#React
6200

AI

테크블로그 글 템플릿 1

생성형 AI가 개발 생산성과 학습 속도를 크게 높이는 실무 도구로 소개되었습니다. 다만 할루시네이션과 보안 문제를 막기 위해 인간 검증과 가이드라인이 필요합니다.

#LLM#prompt#JavaScript
13700

프론트엔드

FE News 26년 5월 소식을 전해드립니다.

MDN 아키텍처 개편, React 접근성 점검, RSC 캐싱과 Cursor SDK 소식을 정리했습니다.\n웹 표준, 캐싱 경계, 코딩 에이전트의 제품 내 활용 흐름을 함께 살펴볼 수 있습니다.

#React#web#accessibility
14200

프론트엔드

AI를 활용한 Web 성능개선 실전 사례

AI와 Chrome DevTools flame chart를 함께 써서 Web 성능 병목을 빠르게 찾고 개선한 사례입니다. 배열 순회, Worker 통신, 소켓 이벤트를 줄여 하루 만에 체감 성능을 높였습니다.

#Web#성능#React
200

프론트엔드

AI를 활용한 Web 성능개선 실전 사례

Chrome DevTools flame chart와 AI를 결합해 Web 앱의 병목을 빠르게 찾고 개선한 사례를 소개했습니다. O(n²) 구조, Worker round-trip, 소켓 이벤트 폭탄을 줄여 성능을 개선했습니다.

#web#성능#React
3700