Velopers
모든 블로그
넥스트리

넥스트리

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

활동 요약

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

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

프론트엔드

화면 설계서 작성과 QA

화면 설계서 작성과 QA를 통해 요구사항과 구현 결과의 차이를 줄이는 방법을 정리했습니다. 버전 관리와 예외 상황 정의가 문서 품질과 테스트 효율을 높였다고 설명했습니다.

#UI/UX#QA#test
3400

프론트엔드

SpreadJS 파일 올바르게 로드하기

SpreadJS 파일 형식별로 올바른 로딩 API를 매칭하는 방법을 정리했습니다. 확장자와 데이터 형태를 구분해 import()와 fromJSON()을 적용하면 파싱 오류를 줄일 수 있었습니다.

#SpreadJS#Excel#JavaScript
1200

프론트엔드

친절함과 간결함 사이, UX 라이팅

낯선 사용자층을 위한 앱에서 UX 라이팅의 기준을 고민한 글입니다. 버튼은 간결하게, 설명이 필요한 곳은 친절하게 나누는 원칙을 정리했습니다.

#UI/UX#UX 라이팅#온보딩
3000

프론트엔드

React Hook Form, Zod로 Form 관리하기

복잡한 다단계 폼을 React Hook Form, Zod, Jotai로 전략적으로 관리하는 방법을 정리했습니다. 조건별 스키마 분리, 임시 저장, 단계별 검증과 값 초기화 흐름을 설명했습니다.

#React#TypeScript#Zod
2600

프론트엔드

빠른 프론트 개발을 위한 셀프 리뷰

빠른 프론트 개발에서도 기능 동작만 보지 말고 셀프 코드 리뷰로 예외 상황과 유지보수성을 함께 점검해야 합니다. 일정이 급할수록 변경분 기준으로 핵심 문제부터 우선 확인하는 습관이 중요합니다.

#Vue.js#API#비동기
9300

프론트엔드

React vs React Native: 프로젝트별 선택 가이드

React와 React Native의 렌더링 방식과 활용 기준을 비교해 프로젝트별 선택 기준을 정리했습니다. SEO와 배포 민첩성은 React, 네이티브 UX와 하드웨어 연동은 React Native가 적합했습니다.

#React#React Native#SEO
4700

프론트엔드

SpreadJS Designer

SpreadJS Designer에서 새로고침 버그와 시트 추가·삭제 제한 요구를 해결한 과정을 정리했습니다. 커맨드 상태 확인과 컨텍스트 메뉴 제어가 핵심이었습니다.

#SpreadJS#Excel#context menu
1900

프론트엔드

타입스크립트(TypeScript) 파헤치기

타입스크립트의 핵심 개념과 컴파일러 동작, 구조적 타이핑, 타입 추론을 설명했습니다. 또한 런타임 한계와 TSConfig 옵션, 실무 적용 시 주의점을 정리했습니다.

#TypeScript#JavaScript#컴파일러
7300

프론트엔드

ag-Grid로 화면과 동일한 Excel 만들기

ag-Grid Excel Export에서 화면과 동일한 스타일과 값을 맞추는 과정을 정리했습니다. valueFormatter, excelStyles, header 규칙을 통해 엑셀 스타일 반영 문제를 해결했습니다.

#ag-Grid#Excel#valueFormatter
43700

프론트엔드

모바일 UI, 웹과는 다르다

모바일 UI는 웹과 달라 입력 방식, 화면 높이, 스크롤, 접근성까지 함께 고려해야 했습니다. Safe Area, dvh, rem, Bottom Sheet 등 모바일에 맞는 구조와 상태 설계가 중요했습니다.

#mobile#UI/UX#CSS
47700

프론트엔드

조합형 Form 컴포넌트 설계

React Hook Form과 MUI 기반 폼 컴포넌트의 확장 한계를 설명했습니다. 역할 분리와 Composition Pattern으로 복합 입력 UI와 유지보수성을 개선한 사례입니다.

#React#React Hook Form#Material UI
29400

프론트엔드

MUI 기반 디자인시스템 VUI

MUI 기반 디자인 시스템 VUI의 구축 배경과 토큰-테마-컴포넌트 연결 구조를 소개했습니다. 브랜드와 모드 변형을 설정으로 흡수하고, 남은 과제도 정리했습니다.

#MUI#디자인 시스템#design token
6600

프론트엔드

React 환경에서 중복 API 요청 개선

React에서 전역 Context와 비동기 흐름이 얽히며 중복 API 요청과 레이스 컨디션이 발생했습니다. AbortController, runId, Promise.all로 요청 취소와 최신 응답 보장을 개선했습니다.

#React#비동기#AbortController
8800

프론트엔드

ESLint와 Prettier로 코드 스타일 통일하기

ESLint와 Prettier로 Vue 3·TypeScript 프로젝트의 코드 스타일과 품질 규칙을 통일하는 방법을 다루었습니다. IDE와 SFC 파싱 문제까지 함께 정리해 협업 시 불필요한 diff를 줄이는 과정을 소개했습니다.

#ESLint#Prettier#Vue.js
6200

프론트엔드

React Query 캐시 전략에 대한 고찰

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

#React#cache#refactoring
4300

프론트엔드

Keycloakify의 page_hint 상태 관리 개선

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

#Keycloak#React#sessionStorage
1400

프론트엔드

모바일 UI 로 첫 나들이

웹과 모바일 UI의 차이를 타이포그래피, Safe Area, 내비게이션, 버튼 배치 중심으로 정리했습니다. 모바일에서는 공간 배치보다 우선순위와 엄지 조작성을 더 중요하게 봐야 한다는 점을 설명했습니다.

#mobile#UI/UX#Android
14300

프론트엔드

선언적 폼 바인딩

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

#React#React Hook Form#동시성
2001