React 환경에서 중복 API 요청 개선
React에서 전역 Context와 비동기 흐름이 얽히며 중복 API 요청과 레이스 컨디션이 발생했습니다. AbortController, runId, Promise.all로 요청 취소와 최신 응답 보장을 개선했습니다.
#React#비동기
8700
프론트엔드 기술 블로그 최신 글
필터 0
FE News 26년 7월 소식을 전해드립니다.
FE News 26년 7월 소식을 전해드립니다.
네이버 FE News에서 TypeScript 7.0 RC, 정책 전달 방식, AI 에이전트 루프 설계와 React 코드 점검 도구를 소개했습니다. 대규모 코드베이스 성능 개선과 규칙 일관성, 자동 검증 관점의 실무 아이디어를 정리했습니다.
#TypeScript#React
57900
Refine 실제 적용 사례(feat. 투표 플랫폼) — (2)
Refine 실제 적용 사례(feat. 투표 플랫폼) — (2)
TVING이 Refine과 AI Agent로 투표 플랫폼 운영 백오피스를 빠르게 구축한 사례를 소개했습니다. 명세와 GraphQL을 함께 활용해 정확도를 높이고 화면 제작 속도를 크게 개선했습니다.
#Refine#AI Agent
14100
Playwright E2E 테스트로 자가개선 루프 구축하기
Playwright E2E 테스트로 자가개선 루프 구축하기
AI가 코드를 더 빨리 만들수록 검증이 병목이 된다고 설명했습니다. Playwright E2E와 에이전트를 조합해 결정론적인 자가개선 테스트 루프를 구축하는 방법을 소개했습니다.
#Playwright#E2E 테스트
29800
ESLint와 Prettier로 코드 스타일 통일하기
ESLint와 Prettier로 코드 스타일 통일하기
ESLint와 Prettier로 Vue 3·TypeScript 프로젝트의 코드 스타일과 품질 규칙을 통일하는 방법을 다루었습니다. IDE와 SFC 파싱 문제까지 함께 정리해 협업 시 불필요한 diff를 줄이는 과정을 소개했습니다.
#ESLint#Prettier
6200
10년 된 에디터 코어를 Froala에서 Lexical로 교체하기
10년 된 에디터 코어를 Froala에서 Lexical로 교체하기
10년 된 에디터 코어를 Froala에서 Lexical로 교체한 마이그레이션 사례를 소개했습니다. AI를 활용해 구현 부담을 줄이고, 기존 결과와의 대조 검증으로 6주 만에 전환을 마쳤습니다.
#Lexical#마이그레이션
4800
React Query 캐시 전략에 대한 고찰
React Query 캐시 전략에 대한 고찰
React Query의 staleTime, gcTime, 키 팩토리, 무효화 전략을 중심으로 캐시 운영법을 정리했습니다. 전역 기본값과 직접 갱신을 통해 불필요한 재요청과 화면 깜빡임을 줄이는 방법을 제안했습니다.
#React#cache
4300
Keycloakify의 page_hint 상태 관리 개선
Keycloakify의 page_hint 상태 관리 개선
Keycloakify의 라운드트립 구조 때문에 `page_hint`를 단순히 React 상태처럼 다루면 새로고침 시 화면이 바뀌는 문제가 있었습니다. 마운트 시 무조건 삭제하던 로직을 진입 흐름에 맞게 조정해 직원 계정 최초 설정 화면을 유지했습니다.
#Keycloak#React
1400
혼자 시작해 전국 오픈까지, 당근 레슨/과외 빌딩 로그
혼자 시작해 전국 오픈까지, 당근 레슨/과외 빌딩 로그
당근 레슨/과외가 숨은 수요를 발견하고 PMF를 찾기까지의 과정을 공유했습니다. 수요자 중심 실험과 진입점 개선으로 전국 오픈 단계까지 확장한 사례입니다.
#마켓플레이스#PMF
20500
모바일 UI 로 첫 나들이
모바일 UI 로 첫 나들이
웹과 모바일 UI의 차이를 타이포그래피, Safe Area, 내비게이션, 버튼 배치 중심으로 정리했습니다. 모바일에서는 공간 배치보다 우선순위와 엄지 조작성을 더 중요하게 봐야 한다는 점을 설명했습니다.
#mobile#UI/UX
14200
선언적 폼 바인딩
선언적 폼 바인딩
다이얼로그 수정 폼에서 useEffect 기반 수동 바인딩으로 발생한 상태 꼬임 문제를 정리했습니다. React Hook Form의 values로 선언적 동기화를 적용해 잔상과 레이스 컨디션을 줄였습니다.
#React#React Hook Form
1800
React Query Key Factory 패턴 사용기
React Query Key Factory 패턴 사용기
React Query 쿼리 키를 도메인별 factory로 관리해 캐시 구조와 무효화 범위를 명확히 정리하는 방법을 소개했습니다. queryOptions와 useQueries까지 함께 묶어 재사용성과 유지보수성을 높이는 흐름을 설명했습니다.
#React Query#cache
3100
사람도 AI도 놓친 번역 누락, ESLint 플러그인을 만들어 해결하기
사람도 AI도 놓친 번역 누락, ESLint 플러그인을 만들어 해결하기
커스텀 ESLint 플러그인으로 다국어 번역 누락과 오역을 탐지해 해결했습니다. 사람과 AI 검수의 한계를 보완하기 위해 린트와 AI를 나눠 적용했습니다.
#ESLint#i18next
4700
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
미리캔버스 프론트엔드 모노레포의 CI/CD와 배포 구조를 설명했습니다. 빌드 아티팩트 분리와 Module Federation, manifest 기반 독립 배포, 관측 지표를 함께 다뤘습니다.
#모노레포#CI/CD
10500