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) 를 사용해 거래·영수증·상태 루트를 헤더에 담아 유사한 목적을 달성함 구현 세부와 체인별 차이 비트코인 ...

개요 Array.prototype.map은 배열의 각 요소에 대해 지정한 콜백을 호출하고 그 반환값으로 새 배열을 만드는 메서드임 원본 배열은 변경하지 않으며 콜백의 부수효과로만 변형이 일어날 수 있음 희소 배열의 빈 슬롯은 유지되며 콜백은 값이 존재하는 인덱스에만 호출됨 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback 현재 요소를 변환해 새 요소를 생성하는 함수 currentValue 현재 요소 값 index 선택 현재 요소의 인덱스 array 선택 map을 호출한 원본 배열 thisArg 선택 콜백 실행 시 this로 사용할 값 반환값 각 요소에 대해 callback을 실행한 결과로 구성된 새 배열 반환 원본 배열과 길이는 동일하고 희소성도 보존됨 ...

개요 미디어 쿼리는 뷰포트나 사용자 환경에 따라 CSS를 조건부로 적용하기 위한 기능임 다른 언어의 if 조건문과 유사하게 조건이 참일 때만 특정 스타일이 활성화됨 핵심 개념 @media 규칙과 하나 이상의 조건으로 구성 조건은 화면 폭, 해상도, 사용자 선호도 등 미디어 특성으로 표현됨 조건이 참이면 블록 내부 스타일이 캐스케이딩에 참여하고 거짓이면 무시됨 문법과 구조 @media (조건) { /* 스타일 */ }조건 예시 max-width: 상한 폭 이하에서 적용 min-width: 하한 폭 이상에서 적용 논리 결합 and, not 사용 가능 동작 원리 브라우저가 런타임에 조건을 평가함 윈도우 리사이즈나 기기 회전, OS 설정 변경 시 즉시 재평가되어 스타일 재적용됨 충돌 시 일반 CSS 우선순위 규칙을 따름 우선순위 > 특이성 > 선언 순서 모바일 퍼스트 전략 권장 min-width 기준으로 점진적 확장 구성 ...

window load는 js css 이미지 등 모든 리소스 로드 완료 시점 발생 document DOMContentLoaded는 초기 DOM 파싱 완료 시점 발생, 외부 리소스 비대기 UI 바인딩 초기화는 DOMContentLoaded 이미지 크기 등 전체 리소스 필요 계산은 load body onload window.onload에 매핑됨 마지막 할당만 유효 덮어쓰기 방지용 addEventListener 권장 참고자료 https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

개요 nvarchar와 nchar를 사용할 때 n이 곧 문자 개수라고 가정하는 경우가 많음 하지만 SQL Server에서 nchar(n), nvarchar(n)의 n은 문자 개수가 아니라 2바이트 단위의 길이, 즉 바이트 페어(byte-pair) 개수로 정의됨 문자 집합 범위에 따라 한 문자가 1개 혹은 2개의 바이트 페어를 사용할 수 있어 저장 가능한 문자의 실제 개수는 달라짐 핵심 개념과 정의 nchar(n), nvarchar(n)의 n은 0~4000 바이트 페어 범위의 길이 의미 하나의 바이트 페어는 2바이트로, 내부적으로 UTF-16 코드 유닛 단위로 이해 가능 유니코드 BMP 범위(0~65,535) 문자는 보통 1 바이트 페어 사용 보조 평면 범위(65,536~1,114,111) 문자는 서러게이트 페어로 2 바이트 페어 사용 따라서 n이 문자의 최대 개수를 보장하지 않음 char(n), varchar(n)은 n이 바이트 수 의미라는 점에서 유사한 맥락이나, nvarchar/nchar는 바이트 페어 기준이라는 차이 존재 추가 기본값 규칙 ...

개요 Array.prototype.reduce는 배열을 하나의 값으로 축약하는 표준 API 배열의 각 요소에 대해 리듀서 함수를 순차 실행하고 누산기 값을 반환 집계, 변환, 그룹핑, 파이프라인 구성 등 다양한 패턴에 사용 구문 arr.reduce(callback[, initialValue]) callback에 누산 로직 정의 initialValue가 있으면 누산기의 시작값으로 사용, 없으면 배열의 첫 요소가 시작값 매개변수 callback(accumulator, currentValue, currentIndex, array) accumulator: 누산된 값 currentValue: 현재 요소 값 currentIndex: 현재 인덱스 array: 원본 배열 initialValue (옵션) 누산기의 초기값 제공하지 않으면 배열 첫 요소가 초기값이 되어 콜백은 두 번째 요소부터 시작 반환값 축약 결과로 얻은 최종 누산값 동작 방식 왼쪽에서 오른쪽으로 순회하며 callback을 한 번씩 호출 initialValue 미제공 빈 배열이면 TypeError 발생 요소가 하나뿐이면 그 요소를 그대로 반환하며 callback은 호출되지 않음 initialValue 제공 배열이 비어 있어도 initialValue를 그대로 반환하며 callback은 호출되지 않음 희소 배열의 빈 슬롯은 건너뜀 누산기는 어떤 타입도 가능하며 객체, 맵, 프라미스 등으로 확장 가능 주의 사항과 베스트 프랙티스 가능한 항상 initialValue 지정 권장 빈 배열 입력 시 예외 방지, 타입 안정성 확보 누산기 불변성 유지 권장 객체 누산 시 얕은 복사 또는 구조 분해 사용 고려 콜백은 순수 함수 지향 외부 상태 변경 최소화, 테스트 용이성 확보 읽기 어려운 과도한 축약 로직은 map, filter, for…of 등으로 분리 고려 희소 배열에서 빈 슬롯은 콜백이 호출되지 않음에 유의 오른쪽에서 왼쪽으로 처리해야 하면 reduceRight 사용 간단 예시 합계 계산 ...

개요 클라이언트에서 서버로 들어오는 요청 데이터를 DTO로 다루면 변환과 검증의 경계를 명확히 유지 가능함 class-transformer는 입력을 클래스 인스턴스로 변환하는 역할, class-validator는 변환된 인스턴스의 유효성 검증 역할 두 라이브러리를 함께 쓰면 DTO 레이어에서 데이터 정합성을 선제적으로 보장 가능함 핵심 개념 DTO 데이터 전송 객체, 외부 입력을 내부 도메인으로 들이기 전 구조와 제약을 고정하는 경계 class-transformer plain object ↔ 클래스 인스턴스 변환, 노출/제외 필드 제어 class-validator 데코레이터 기반 유효성 규칙 선언, 실행 시 검증 에러 수집 설치 npm install class-transformer class-validator사용 흐름과 최소 예시 입력 JSON 수신 → DTO 클래스로 변환 → DTO 인스턴스 검증 → 실패 시 에러 응답, 성공 시 비즈니스 로직으로 전달 import { Expose, Exclude, plainToInstance } from 'class-transformer' import { IsInt, IsString, validate } from 'class-validator' class UserDTO { @IsString() @Expose() name: string @IsInt() @Expose() age: number @Exclude() password?: string } const dto = plainToInstance(UserDTO, payload) const errors = await validate(dto) if (errors.length) { // 검증 실패 처리 }포인트 ...