본문 바로가기

전체 글459

React-Spring 들어가기: JavaScript 애니메이션 개념1. 애니메이션이란?시간에 따라 상태(예: 위치, 크기, 색상 등)가 변하는 것입니다. 브라우저에서 이걸 구현하려면 setInterval 또는 requestAnimationFrame 같은 타이머/프레임 기반 API를 사용합니다. React-Spring은 requestAnimationFrame을 이용해 동작합니다.requestAnimationFrame은 브라우저에 최적화된 애니메이션 실행 방식반드시 setInterval 대신 사용할 것react-spring도 이 방식을 내부에서 사용함2. requestAnimationFrame() 개념requestAnimationFrame(callback)은 다음 브라우저의 리페인트 시점에 콜백 함수를 실행시켜 주는 API입니다.. 2025. 5. 23.
dnd-kit(Drag-and-Drop 라이브러리) https://dndkit.com/ dnd kit – a modern drag and drop toolkit for ReactA modular, lightweight, performant, accessible and extensible drag & drop toolkit for React.dndkit.com1단계: 기본 구조 이해1. DndContext의 역할개념DndContext는 드래그 앤 드롭을 가능하게 해주는 최상위 컨테이너입니다.여기에 드래그/드롭 관련 이벤트 핸들러와 센서를 등록하면 자식 컴포넌트에서 드래그가 활성화됩니다.예제import { DndContext } from '@dnd-kit/core';export default function App() { return ( .. 2025. 5. 20.
ResponseEntity ResponseEntity란?ResponseEntity는 Spring Framework에서 HTTP 응답 전체를 커스터마이징할 수 있게 해주는 클래스입니다.@RestController나 @Controller에서 일반적으로 메서드 반환 타입으로 사용되며, HTTP 상태 코드, 헤더, 바디를 원하는 대로 제어해서 응답을 반환할 수 있습니다.왜 쓰는가? (주요 목적)HTTP 상태 코드 커스터마이징기본적으로 @RestController에서는 객체 반환 시 항상 200 OK로 나가지만, 상황에 맞게 404, 201, 400 등 다양한 상태 코드로 직접 제어하고 싶을 때 사용해요.헤더 직접 지정응답에 Location, Set-Cookie, Cache-Control 같은 커스텀 헤더를 추가하거나 수정할 수 있어요.응.. 2025. 5. 15.
React Hook Form https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com1. React Hook Form (RHF) 이란?✔ 핵심 정의 (상세)React Hook Form(RHF)은React의 함수형 컴포넌트에서 "Form 상태 관리", "검증", "에러 처리", "제출 로직"을 간단하고 성능 좋게 관리해주는 라이브러리입니다.React Hook Form은 React의 Hooks 시스템을 기반으로 한 Form 관리 라이브러리 중 가장 널리 사용되는 표준.. 2025. 5. 15.
Zod + zodResolver + React Hook Form Zod 기본 개념 (TypeScript에서 스키마 기반 데이터 검증)https://zod.dev/ Intro | Zod zod.devZod란?Zod는 TypeScript에서 스키마 기반 데이터 검증을 수행하는 라이브러리이다.TypeScript의 타입 시스템은 컴파일 단계에서만 타입을 체크하지만, Zod는 런타임에서도 데이터를 안전하게 검증할 수 있도록 도와준다.TypeScript 타입만 사용한 경우 (런타임에서 오류 검출 불가)type User = { name: string; age: number;};const data = JSON.parse('{"name": "Alice"}'); // `age` 없음const user: User = data; // ❌ 컴파일 시 문제 없음 (하지만 실행 시 오류 가.. 2025. 5. 15.
React Query https://tanstack.com/ TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com1단계. React Query의 철학과 역할 이해React Query 등장 배경React Query는 기존 React 개발 환경에서 서버 상태 관리를 효율적으로 개선하기 위해 등장했습니다.전통적인 React 앱에서는 API 호출과 데이터 관리를 useState나 useEffect를 사용해 직.. 2025. 5. 15.
나 보호되어 있는 글 입니다. 2025. 5. 14.
트랜잭션 트랜잭션(Transaction) 기초정의:트랜잭션은 데이터베이스에서 하나의 논리적 작업 단위를 의미하며, 하나의 트랜잭션 안의 모든 연산은 전체가 실행되거나 전혀 실행되지 않아야 함.트랜잭션의 상태:활동(Active): 트랜잭션이 실행 중부분 커밋(Partially Committed): 마지막 연산이 완료된 상태 (아직 커밋 안됨)커밋(Committed): 트랜잭션 성공 → 변경사항이 확정실패(Failed): 오류 발생, 실패 상태철회(Aborted): 실패 후 롤백 수행, 이전 상태로 복구ACID 특성트랜잭션이 지켜야 하는 4가지 핵심 속성원자성 (Atomicity)전부 성공하거나 전부 실패, 중간 없음일관성 (Consistency)트랜잭션 전·후 데이터 무결성 유지고립성 (Isolation)트랜잭션이.. 2025. 5. 14.
공개키 암호 공개키 암호 개념 (Public Key Cryptography)두 개의 키 사용공개키(Public Key): 누구나 사용 가능, 암호화에 사용.개인키(Private Key): 본인만 소유, 복호화에 사용.원리누구나 공개키로 데이터를 암호화할 수 있지만,개인키 없이는 해독 불가능.안전한 키 분배, 인증, 서명, 암호화에 활용.목적: 안전한 키 분배, 전자 서명, 데이터 암호화 등.수학적 기반: 일방향 함수(One-way Function) 이용.기반 문제 (수학적으로 어려운 일방향 함수 기반)→ 일방향 함수:앞으로 계산은 쉽지만, 역으로 해독은 어렵다.소인수분해 문제큰 수를 두 소수의 곱으로 만들기는 쉽다.역으로 소인수분해는 매우 어렵다.→ RSA이산대수 문제a^x mod n은 쉽다.역으로 x를 찾기는 어렵.. 2025. 5. 13.
대칭키 암호 대칭키 암호 (Symmetric Key Encryption)개념암호화와 복호화에 동일한 키 사용빠른 속도, 상대적으로 간단한 알고리즘장점: 효율적, 빠름단점: 키 분배의 어려움암호화: C = EK(P) 복호화: P = DK(C)블록 암호 (Block Cipher)라운드 함수: 반복되는 함수키 스케줄: 키를 입력하여 라운드 키를 발생시키는 과정라운드 키: 라운드 함수에 작용하는 키개념평문 → 고정된 크기 블록으로 나누어 암호화대표 구조Feistel 구조 (DES, SEED 등)SPN 구조 (AES, ARIA 등)Feistel 구조블록을 좌·우로 나눠 XOR 및 라운드 함수 반복 (짝수 번의 라운드를 진행)역변환 용이 (복호화 시 암호화 과정 역순)SPN 구조S-box(치환) → P-box(전치) 순으로 .. 2025. 5. 13.
디지털 포렌식 디지털 포렌식 개요디지털 포렌식:디지털 기기에서 수집된 데이터를 법적 증거로 활용하기 위해 과학적 방법으로 수집·분석·보고하는 과정.→ 컴퓨터, 네트워크, 스마트폰 등 디지털 매체 대상.등장 배경:디지털 범죄 증가, 데이터 대부분이 디지털 형태, 범죄 수사에 필수.디지털 증거 개념 및 특성디지털 증거란?디지털 매체에 저장되거나 네트워크로 전송되는 자료 중 법적 효력을 갖는 정보.기록방식, 저장원리, 프로그램 동작 원리 등에 대한 이해 필수.유형내용물 증거:사건을 직접 증명 (문서, 사진, 메일 등).특성 정보 (메타데이터):생성 시간, 파일명, 해시코드 등.생성 주체 기준컴퓨터 저장 증거: 사람이 작성 (내용물 중심).컴퓨터 생성 증거: 자동 생성 (메타데이터 중심).주요 특성비가시성: 육안으로 식별할 .. 2025. 5. 13.
해싱과 특수 인덱싱 해싱(Hasing) 기법해시 함수 (Hash Function)정의: 탐색키에 산술적인 연산을 통해 버킷의 주소를 계산하는 함수.역할:레코드의 탐색키 값을 입력받아 해당 레코드를 저장하거나 찾을 버킷 주소를 결정.가장 이상적인 해시 함수는 탐색키의 값들이 균등하게 분포되도록 설계되어야 함.충돌이 적고, 빠른 접근이 가능한 함수가 이상적.해시 파일 구조버킷(Bucket): 한 개 이상의 레코드를 저장할 수 있는 저장 공간 단위 (보통 블록 단위(4KB) 와 동일).구조:탐색키 → 해시함수 → 버킷버킷 내에 레코드 저장, 충돌 발생 시 오버플로우 발생.정적 해싱의 특징버킷 개수 고정: 초기 생성 시 고정된 버킷 수.충돌 발생 시: 체인 방식(포인터 연결) 또는 다음 버킷에 저장(오버플로 체인) 방식 사용.성능.. 2025. 5. 13.

티스토리툴바