HandsLog

개요 블록체인 기술에서 모든 것을 온체인(On-chain)으로 처리하는 것은 비효율적이거나 불가능한 경우가 많음 이때 오프체인 서명 검증(Off-chain Signature Verification)은 오프체인(서버)의 유연성과 온체인(컨트랙트)의 신뢰성을 결합하는 강력한 해결책이 됨 쉽게 비유하자면, 클럽 매니저(서버)가 VIP 손님(사용자)에게만 특별한 싸인이 담긴 입장권(서명)을 발급하고, 입구의 가드(스마트 컨트랙트)는 그 싸인만 확인하고 들여보내는 것과 같음 가드는 매번 매니저에게 연락할 필요 없이, 위조되지 않은 싸인인지 확인만 하면 됨 이 글에서는 오프체인 서명 검증이 무엇인지, 어떤 용어들이 사용되는지, 그리고 가장 중요하게는 어떤 원리로 동작하는지 상세히 알아봄 ...

개요 블록체인 서비스에서 사용자가 겪는 가장 큰 장벽 중 하나는 단연 가스비(Gas Fee)임 아무리 좋은 서비스를 만들어도, 사용자가 지갑에 가스비로 쓸 코인(ETH 등)을 보유하고 있어야 한다는 점은 대중화를 가로막는 결정적인 요인임 이 문제를 해결해 사용자가 가스비 걱정 없이 서비스 핵심 가치에만 집중하게 만드는 것, 즉 가스리스 트랜잭션(Gasless Transaction)을 구현하는 것이 이번 개발의 최종 목표였음 zkSync Era는 이를 위해 페이마스터(Paymaster)라는 강력한 시스템을 제공함. 페이마스터는 서비스 제공자 같은 제3자가 사용자를 대신해 트랜잭션 수수료를 지불할 수 있게 해주는 스마트 컨트랙트임 ...

SSE(Server-Sent Events)란 무엇인가 SSE는 Server-Sent Events의 약자로, 서버가 클라이언트로 실시간 데이터를 단방향으로 푸시(push)할 수 있게 해주는 웹 기술임 클라이언트가 먼저 요청을 보내고 서버는 그 연결을 끊지 않은 채, 새로운 데이터가 생길 때마다 지속적으로 응답을 보내는 방식임 주로 실시간 알림, 주식 시세 업데이트, 라이브 피드 등 서버에서 클라이언트로 일방적인 데이터 전송이 필요한 경우에 매우 유용함 SSE vs 웹소켓, 그리고 한계 SSE는 실시간 이벤트 전송에 유용하지만 만능은 아님. 웹소켓과 비교했을 때 명확한 장단점이 존재함 ...

개요 머클트리는 블록체인에서 거래 집합을 안전하고 효율적으로 요약·검증하기 위해 쓰이는 핵심 자료구조임 블록 헤더에 머클루트가 포함되는 이유는 블록 안의 모든 거래를 고정 크기 해시 하나로 대표해 무결성 확인과 경량 검증을 가능하게 하기 때문임 이 글은 머클트리의 구조와 동작 원리, 블록체인에서의 실무적 의미와 구현 주의사항까지 초보자도 이해할 수 있도록 상세히 설명함 핵심 개념과 구조 머클트리는 보통 이진 트리 형태로 구현함 거래들을 리프(leaf) 로 두고 인접 두 리프의 해시를 이어 붙여 부모 해시를 만들며 이 과정을 반복해 루트 해시를 얻음 해시 함수는 체인별로 다르며 비트코인은 더블 SHA‑256, 이더리움은 트라이 구조에서 Keccak‑256 을 사용함 최상단 해시를 머클루트(Merkle root) 라 부르며 크기는 해시 함수에 따라 고정됨 리프 수가 홀수일 때는 마지막 리프를 복제해 짝을 맞추는 방식이 일반적이며 비트코인은 이 규칙을 사용함 트리 깊이는 리프 수 N에 대해 ⌈log₂ N⌉ 에 비례하므로 대량의 거래를 효율적으로 요약할 수 있음 동작 원리와 장점 인접 노드 해시 H_left || H_right 를 순서대로 연결해 해시를 계산하고 이를 위로 올려가며 루트 해시를 얻음 무결성 검증 단일 거래가 바뀌면 해당 리프에서 루트까지의 모든 경로 해시가 바뀌어 변조를 즉시 탐지할 수 있음 효율적 포함 증명 특정 거래가 블록에 포함되었음을 증명하려면 그 거래와 경로상의 형제 해시들만 있으면 됨 필요한 해시 개수는 O(log N) 으로 작아 대역폭과 검증 비용이 작음 확장성 보조 리프가 1,000,000개여도 증명에 필요한 형제 해시는 약 20개 수준으로 32바이트 해시 기준 약 640바이트에 불과함 블록 헤더와 경량 노드(SPV) 비트코인 블록 헤더는 이전 블록 해시, 머클루트, 난스 등 합의 관련 메타데이터를 포함함 경량 노드(SPV)는 블록 전체가 아니라 헤더 체인만 받아 신뢰성을 확보하고, 개별 거래에 대해서는 풀노드로부터 머클 증명 을 받아 포함 여부를 검증함 이 방식은 모바일·임베디드 환경에서도 실사용이 가능하게 하는 기반이 됨 이더리움은 전통적인 이진 머클트리 대신 머클‑패트리샤 트라이(MPT) 를 사용해 거래·영수증·상태 루트를 헤더에 담아 유사한 목적을 달성함 구현 세부와 체인별 차이 비트코인 ...

개요 값 복사에서 가장 흔한 실수는 얕은 복사와 깊은 복사의 차이를 간과하는 것임 이 글은 JSON 해킹이나 라이브러리 대신 브라우저와 런타임이 제공하는 structuredClone으로 깊은 복사를 안정적으로 수행하는 방법과 주의점을 정리함 얕은 복사 JavaScript의 전개 연산자 …로 만드는 복사는 기본적으로 얕은 복사임 겉 모양과 1단계 속성은 복제되지만 중첩된 객체는 동일 참조를 공유함 const myOriginal = { someProp: "with a string value", anotherProp: { withAnotherProp: 1, andAnotherProp: true } } const myShallowCopy = { ...myOriginal } myShallowCopy.aNewProp = "a new value" console.log(myOriginal.aNewProp) // ^ logs `undefined` myShallowCopy.anotherProp.aNewProp = "a new value" console.log(myOriginal.anotherProp.aNewProp) // ^ logs `a new value` 기본형 값은 값 자체가 복사되지만 객체 같은 참조형은 레퍼런스가 복사됨 따라서 중첩된 구조를 안전하게 분리하려면 깊은 복사가 필요함 ...

개요 Ramda는 JavaScript와 TypeScript에서 함수형 프로그래밍을 실용적으로 적용하기 위한 유틸리티 모음집임 순수 함수, 불변성, 커링, 함수 조합을 일관된 인터페이스로 제공하며, 매개변수 순서를 함수 → 데이터로 통일해 조합과 부분 적용을 자연스럽게 만듦 이 글은 R.prop을 중심으로 Ramda 핵심 함수의 개념과 사용법, 타입 고려사항, 흔한 함정과 우회 전략을 정리함 R.prop 개념과 문법 목적과 동작 원리 객체의 특정 속성 값을 안전하게 조회하는 읽기 전용 도구 속성이 없거나 undefined일 수 있는 상황에서 런타임 예외 없이 undefined 반환 커링 지원으로 속성 이름을 고정해 재사용 가능한 픽커 함수 구성에 유리함 시그니처 ...

개요 SWC는 Rust로 작성된 초고속 TypeScript/JavaScript 컴파일러 겸 트랜스파일러 동일한 작업을 수행하는 Babel이나 tsc 대비 10~20배 수준의 성능 향상이 보고됨 Rust로 구현되어 JS 런타임 기반 도구 대비 낮은 오버헤드와 높은 병렬 처리 효율 확보 핵심 개념 목적 TS/JS 소스 코드를 목표 런타임에서 실행 가능한 코드로 빠르게 변환 특징 타입 체크 미포함, 변환에 집중해 극단적 속도 추구 적용 범위 컴파일 단계와 테스트 실행, 개발 서버 부팅, CI 빌드 가속에 유효 채택 사례 Next.js에 기본 통합됨, 서버 프레임워크에서도 선택지로 확산 중 ...

개요 차세대 프론트엔드 빌드 도구 Vite 요약 Vue.js 창시자 Evan You가 만들었고, 개발 중 대기 시간을 줄이는 데 초점 맞춤 프랑스어로 vite는 빠름을 의미함 핵심 가치 개발 서버 즉시 기동에 가까운 체감 속도 HMR이 가볍고 빠르게 동작 의존성 프리번들을 esbuild로 처리해 개발 경험 가속 프로덕션 빌드는 Rollup으로 안정적 번들 생성 배경과 문제 기존 번들러(Webpack) 방식은 시작 시 전체 그래프를 사전 번들링하는 구조 프로젝트 규모가 커질수록 첫 기동이 지연 코드 변경 반영 또한 번들 재생성 비용으로 지연 발생 개발 체감 문제 ...

개요 Vite 기반의 테스트 프레임워크 Vitest 소개 및 실무 사용 패턴 정리 Jest와 거의 동일한 API를 제공하고, Vite의 ESM/HMR을 활용해 빠른 재실행을 제공함 Vite 프로젝트에서는 최소 설정으로 바로 사용 가능 빠른 실행과 재실행, watch 효율 높음 Jest API 호환성 높아 러닝 커브 낮음 TypeScript 네이티브 지원 1. 기본 구조 테스트 파일 명명 규칙 *.spec.ts 또는 *.test.tsdescribe(name, fn) 관련 테스트를 그룹화하는 컨테이너 import { describe, it, expect } from 'vitest' describe('계산기', () => { it('두 수를 더한다', () => { expect(1 + 2).toBe(3) }) it('두 수를 뺀다', () => { expect(5 - 3).toBe(2) }) }) 첫 번째 인자: 그룹 이름 두 번째 인자: 테스트 콜백 중첩 describe 구성 가능 it(name, fn) / test(name, fn) 개별 테스트 케이스 정의, 두 API는 동일 동작 ...

개요 API DTO를 다룰 때 class-transformer의 @Expose, @Exclude, @Type와 plainToInstance, excludeExtraneousValues 옵션을 정확히 이해해야 데이터 노출 제어와 변환 일관성을 확보할 수 있음 아래는 개념 정의와 동작 방향, 자주 생기는 오해 정리 및 최소 예시 @Expose와 @Exclude 핵심 개념 @Expose: 변환 대상으로 명시적 노출 표시 @Exclude: 변환에서 제외 표시 기본 전략은 include-all에 가까움. 즉 아무 옵션 없이 변환하면 대부분의 필드가 그대로 따라옴. 진짜 필드 필터링을 원하면 @Exclude 사용 또는 excludeExtraneousValues 옵션과 함께 @Expose 사용 필요 동작 원리 ...