Velopers
모든 블로그
넥스트리

넥스트리

도메인nextree.io
주요 카테고리 백엔드 · 프론트엔드 · AI

활동 요약

대표 인기 포스트DB 트랜잭션 중심 대량요청 처리 최적화651 조회
최근 30일
18개
평균 조회
66
누적 조회
11,766
전체 글
177개
마지막 발행
2026. 10. 30.
블로그 방문

넥스트리 기술 블로그 글 (41)

프론트엔드

프론트엔드 시점에서 정리한 SSE 도입과 메시지 유실 해결 과정

AI 챗봇 SSE에서 완료 메시지가 유실된 원인을 채널 생성·삭제 시점의 경쟁 조건으로 분석했습니다. 채널 선등록과 replay 기반 구독으로 연결 순서와 무관하게 결과를 수신하도록 개선했습니다.

#SSE#React#Spring WebFlux
6500

프론트엔드

React 비제어 입력으로 타이핑 지연 해결하기

최상위 제어 입력과 고비용 라벨 함수가 결합한 댓글 타이핑 지연을 측정해 원인을 분석했습니다. ref 기반 비제어 입력으로 전환해 리렌더와 라벨 호출을 제거하고 입력 성능을 개선했습니다.

#React#localStorage#JSON
1700

프론트엔드

React와 Day.js를 활용한 공수 캘린더 직접 구현하기

React와 Day.js로 공수·메모 등 날짜별 정보를 담는 재사용 가능한 캘린더를 구현했습니다. 날짜 계산과 UI를 분리하고 빈칸 배열 및 CSS Grid 정렬의 중요성을 설명합니다.

#React#Day.js#CSS
4900

프론트엔드

SI 퍼블리셔를 위한 웹 접근성(A11y) 실전 가이드

React SPA에서 자주 발생하는 웹 접근성 결함과 JSX 마크업 규칙을 정리했습니다. 모달·아코디언·동적 알림의 ARIA 및 초점 제어 검증 방법을 제시합니다.

#React#웹 접근성#WAI-ARIA
1900

프론트엔드

모바일 앱 QA, 어디서 어떻게 검증해야 할까

모바일 앱 QA에서 실기기로 Safe Area, 키보드, 터치, 화면 전환을 검증해야 하는 이유를 설명했습니다. 출시 전후 목적에 맞춘 이슈 기록과 재검수 운영 원칙을 제안합니다.

#TestFlight#iOS#mobile
3600

프론트엔드

UI 딜레마 규칙과 유연 사이

모달 크기는 콘텐츠 양, 사용자 행동, 탭의 비교 필요성에 따라 고정과 유동을 선택해야 합니다. 규격을 유지하되 과도한 콘텐츠는 더 큰 모달이나 페이지 분리를 고려해야 합니다.

#UI/UX#디자인 시스템#모달
3300

프론트엔드

Vue.js와 React.js의 사용 경험 비교

React와 Vue의 컴포넌트 작성 방식, 반응성·상태 관리·SSR 생태계를 비교했습니다. 경량 환경의 생산성과 협업성을 고려한 Vue 선택 경험을 공유했습니다.

#React#Vue.js#TypeScript
10500

프론트엔드

AI 코딩 시대, 테스트의 역할

AI 코딩으로 테스트 작성 비용이 낮아지면서, 테스트의 역할이 구현 검증을 넘어 요구사항 정의와 완료 조건 설정까지 확장된다고 설명했습니다. 프론트엔드 TDD 적용 방식과 AI 코딩 어시스턴트와의 궁합도 함께 정리했습니다.

#TDD#Testing Library#Vitest
5400

프론트엔드

SpreadJS 엑셀 로딩 성능 최적화2

React와 TypeScript 기반 SpreadJS Excel 상세 화면의 초기 로딩 지연을 단계별 측정으로 분석했습니다. 모든 시트에 바인딩하던 구조를 필요한 시트만 처리하도록 바꿔 로딩 시간을 약 40~50% 줄였습니다.

#React#TypeScript#SpreadJS
2800

프론트엔드

Storybook으로 만든 독립적인 UI 개발 환경

Storybook으로 UI 상태를 독립적으로 재현해 개발 환경 준비에 덜 의존하도록 구성했습니다. 실제 API 연동과 화면 흐름은 기존 개발 환경에서 분리해 확인했습니다.

#Storybook#Vite#Mock 데이터
6400

프론트엔드

Main Thread Blocking 개선 사례

수만 건 Grid 화면에서 Cell 계산과 데이터 조합이 반복되며 Main Thread Blocking이 발생했습니다. 사전 집계와 계산 결과 재사용으로 반복 연산을 줄여 개선했습니다.

#성능#Main Thread#Long Task
3800

프론트엔드

WebView 소셜 인증을 RN 브리지로 전환하기

React Native 네이티브 SDK로 소셜 인증을 처리하고, 기존 React/Gate 로그인 흐름은 그대로 재사용하는 브리지 구조를 도입했습니다. WebView 통신은 계약과 재전송, ACK로 안정화하고 실기기 디버깅 가능성도 높였습니다.

#React Native#WebView#OAuth
2900

프론트엔드

결제 기능 공통 컴포넌트 구현기

React 공통 컴포넌트로 결제 SDK 연동과 상태 관리를 일원화한 구현 경험을 정리했습니다. 인라인·팝업을 통합하고 성공·실패 후처리와 멱등성까지 고려한 설계가 핵심입니다.

#React#React Native#WebView
3600

프론트엔드

Loopin의 vault 경량 엔트리 적용기

배럴 import 때문에 필요한 컴포넌트 하나가 패키지 전체를 끌고 오는 문제를 해결했습니다. 경량 서브패스 엔트리를 추가해 번들을 크게 줄이고 재사용성을 유지했습니다.

#pnpm#Turborepo#모노레포
1300

프론트엔드

DOM 캡처 개선

Snap 기능의 DOM 캡처를 빠르게 만들기 위해 병목을 찾고 여러 라이브러리를 직접 비교했습니다. 또한 폰트, 의사요소, 스크롤, noscript 문제를 보정해 정확도까지 개선했습니다.

#DOM#CSS#React Flow
5600

프론트엔드

APK 빌드 환경

Windows에서 React Native APK 빌드가 경로 길이 제한으로 실패하는 문제를 다뤘습니다. Junction과 짧은 CMake 스테이징 경로, 캐시 삭제로 해결하는 방법을 정리했습니다.

#Windows#React Native#Android
2500

프론트엔드

Android WebView 본인인증 오류 개선

React Native Android WebView에서만 발생한 본인 인증 실패를 분석했습니다. 외부 인증 앱 URL 처리 로직을 보완해 인증 흐름을 정상화했습니다.

#Android#WebView#React Native
2600

프론트엔드

Android Emulator 로컬 서버 접속하기

Android Emulator에서는 localhost가 호스트 PC가 아니라 에뮬레이터 자신을 가리켜 접속이 실패할 수 있습니다. 에뮬레이터에서는 10.0.2.2를 쓰고, 필요하면 서버 바인딩과 방화벽도 함께 확인하셨습니다.

#Android Emulator#Vite#WebView
2400