본문 바로가기

전체 글

 (82)
SpreadJS 계산 성능 튜닝: 재계산 모드 설정과 CalculationProgress 이벤트로 대용량 시트 최적화 대용량 시트에서 계산이 느려지는 순간, 어디부터 잡을까요대량의 수식과 참조가 얽힌 시트에서 버튼 클릭마다 수 초씩 멈춘다면, 단순한 렌더링 문제가 아니라 계산 전략의 문제일 가능성이 큽니다. SpreadJS는 재계산 모드와 진행 이벤트를 조합해 계산 타이밍과 사용자 체감을 동시에 조절할 수 있습니다. 실무에서는 입력 한 칸이 바뀌어도 전체 시트가 즉시 재계산되면 불필요한 오버헤드가 커집니다. 반대로 계산을 미루기만 하면 사용자는 응답이 없는 것처럼 느낄 수 있습니다. 이 글은 초보자도 따라 할 수 있도록 “언제 자동 계산을 끄고, 언제 배치로 모아 계산하며, 진행 상황을 어떻게 안내할지”를 구체적으로 다룹니다. 필요 시 SpreadJS 공식 제품 페이지에서 옵션 명칭과 버전을 다시 확인하는 것을 권장합니..
Hono + Cloudflare Workers로 초경량 REST API 구축: 라우팅·미들웨어·배포 실무 가이드 왜 Hono와 Workers로 시작해야 할까거대한 프레임워크로 API를 꾸리면 설정과 인프라가 복잡해지고, 작은 변경에도 배포가 부담스럽습니다. 간단한 CRUD나 웹훅 처리처럼 가벼운 요구라면, 빠른 라우팅과 저비용 엣지 배포가 핵심입니다.Hono는 미니멀 라우팅과 미들웨어 구성이 쉬워 학습·유지 비용이 낮습니다. Cloudflare Workers는 서버 관리 없이 전 세계 엣지에 배포되어 지연시간을 줄일 수 있습니다.이 글은 “라우팅을 어떻게 나누고, 미들웨어를 어디에 두며, 어떤 순서로 배포하는가”에 초점을 둡니다. 처음 적용한다면 버전 전략, 에러 처리, 환경변수 관리 같은 실무 체크포인트도 함께 정리합니다.Hono와 Workers를 이해하는 가장 짧은 길작은 팀이 주문 상태 조회 API를 만든다고..
Cloudflare Durable Objects로 채팅방/대기열 상태 관리 구현 가이드 초보자 실무 입문용 왜 Durable Objects로 채팅방·대기열을 관리해야 할까요실시간 채팅방이나 티켓팅 대기열은 사용자 수가 늘수록 동시성 충돌, 순서 보장, 상태 유실 문제가 쉽게 드러납니다. 서버를 여러 대 늘려도 세션이 분산되면 누가 어디에 줄 섰는지 일관되게 추적하기 어렵습니다.Cloudflare Durable Objects는 특정 키(예: room-123, queue-abc)에 대해 단일 실행 컨텍스트를 제공해 상태를 한곳에서 직렬화합니다. 즉, 같은 방·같은 대기열의 모든 요청이 한 객체로 모여 순서와 일관성을 보장합니다.처음 적용한다면 “Redis 락을 어떻게 걸지”, “웹소켓 브로드캐스트는 어디서 유지하지” 같은 고민을 줄일 수 있습니다. 전역에 분산된 에지에서 실행되지만, 각 객체 단위로는 원자적 업데..
Passkey(WebAuthn) 로그인 구현 가이드: 비밀번호 없이 등록·로그인·백업 플로우 전체 정리 비밀번호가 문제를 만들 때, Passkey가 답이 되는 이유비밀번호는 잊히고, 재사용되고, 유출됩니다. 이로 인해 로그인 실패, 계정보안 이슈, 복구 비용이 누적되고, 사용자 경험은 매번 나빠집니다.Passkey(WebAuthn)는 기기 생체인증과 공개키 암호화를 활용해 비밀번호 자체를 없앱니다. 결과적으로 “등록–로그인–백업” 전 과정을 단순화하면서 피싱·재사용 위험을 크게 줄일 수 있습니다.이 글은 왜 Passkey를 선택해야 하는지에서 출발해, 어떤 데이터를 저장하고 어떤 브라우저 API를 호출해야 하는지까지 흐름을 끊기지 않게 설명합니다. 초보자도 바로 설계할 수 있도록 등록, 로그인, 기기 변경·백업 플로우를 하나의 시나리오로 정리합니다.실무에서는 레거시 계정과의 호환, 다중 기기 동기화, 복구..
Next.js App Router 캐시 무효화 실전: revalidateTag·updateTag·router.refresh 패턴 이해와 적용 방법 왜 App Router 캐시 무효화가 초보자에게 어렵게 느껴질까Next.js App Router는 자동 캐싱과 데이터 페칭을 결합해 성능을 높이지만, 화면이 바로 갱신되지 않거나 오래된 데이터가 남는 문제가 자주 나타납니다. 핵심은 어떤 캐시를 언제, 무엇으로 무효화할지 결정하는 것입니다.예를 들어 게시글을 수정했는데 목록에는 반영되지 않거나, 서버 액션 후 상세 페이지만 바뀌고 헤더 카운트는 그대로일 때가 있습니다. 이는 revalidateTag, updateTag, router.refresh의 역할과 범위를 혼동해서 생기는 현상입니다.이 글은 세 가지 패턴의 차이와 연결 지점을 실무 흐름에 맞춰 정리합니다. 초보자도 “어떤 요청에 어떤 태그를 붙이고, 어느 시점에 무엇을 갱신할지”를 빠르게 판단할 수..
React Hook Form + Zod로 파일·이미지 유효성 검사 패턴과 App Router 연동 가이드 왜 파일·이미지 검증이 생각보다 자주 실패할까쇼핑몰 상품 등록, 프로필 변경, 지원서 업로드처럼 파일 입력은 흔하지만, 타입·용량·해상도 검증을 놓치면 런타임 오류나 보안 이슈로 이어지기 쉽습니다. 특히 App Router 환경에서는 클라이언트 폼 검증과 서버 액션/라우트 핸들러 검증을 함께 설계해야 안전합니다.React Hook Form은 성능 좋은 폼 상태 관리를 제공하고, Zod는 스키마 기반으로 입력을 엄격히 검사합니다. 두 도구를 조합하면 “미리보기는 되는데 서버에서 거절되는” 불일치를 줄이고, 사용자에게 즉각적인 피드백을 줄 수 있습니다.이 글은 파일·이미지 업로드에서 자주 막히는 포인트를 패턴으로 정리합니다. 예를 들어 허용 확장자와 MIME 동시 체크, 최대 용량/개수 제한, 이미지 픽셀 ..
Tailwind CSS v4 마이그레이션 체크리스트: v3→v4 변경점과 @import 전환 가이드 왜 지금 v4로 옮겨야 할까요Tailwind CSS v4는 설정과 빌드 방식이 크게 달라져 v3 프로젝트를 그대로 유지하면 스타일 깨짐, 빌드 오류, 퍼포먼스 저하가 발생할 수 있습니다. 특히 @tailwind 지시자와 PostCSS 기반 구성에서 @import 중심의 새 흐름으로 전환되는 점이 핵심 변화입니다.실무에서는 디자인 토큰과 플러그인 동작이 바뀌면 공통 컴포넌트가 domino처럼 영향을 받습니다. 배포 전에 체크리스트로 위험 구간을 빠르게 점검하면 롤백 없이 안정적으로 옮길 수 있습니다.이 글은 “무엇이 바뀌었는지 → 어디를 먼저 확인할지 → @import로 어떻게 전환할지” 순서로 안내합니다. 초보자도 따라할 수 있도록 예시와 최소 단계로 정리해 시간을 아끼도록 돕습니다.v3의 @tailwi..
SpreadJS 종속 드롭다운 데이터 유효성 검사 구현 가이드: 초보자도 따라하는 단계별 예제 왜 종속 드롭다운과 유효성 검사가 함께 필요할까요엑셀처럼 보이는 입력 화면에서 ‘지역 → 도시’처럼 앞 선택이 뒤 선택을 제한해야 하는 경우가 많습니다. 하지만 목록만 연결해 두면 사용자가 순서를 바꾸거나 붙여넣기할 때 규칙이 쉽게 깨집니다. SpreadJS에는 리스트 유효성 검사와 이벤트 훅이 있지만, 종속(카스케이딩) 드롭다운을 안정적으로 만들려면 유효성 규칙과 데이터 소스를 함께 설계해야 합니다. 그렇지 않으면 잘못된 조합이 저장되거나 숨은 시트의 참조가 어긋나는 문제가 생길 수 있습니다. 이 글은 “데이터 소스 준비 → 첫 번째 드롭다운 구성 → 두 번째 드롭다운 동기화 → 붙여넣기·지우기 예외 처리” 순서로 구현을 안내합니다. 실무 화면에 바로 적용할 수 있는 최소 코드와 주의사항을 포함합니다...

티스토리툴바