풀소유

인덱스는 데이터베이스 테이블의 특정 칼럼에 대해 생성되는 구조로, 데이터 검색을 더 빠르게 수행할 수 있도록 도와주는 도구이다.검색 속도 향상: 전체 테이블을 스캔하는 것보다 훨씬 빠르게 데이터를 찾을 수 있다.정렬 및 필터링 성능 개선: 데이터 정렬 및 필터링 작업의 성능을 향상시킨다.Unique Constraint 지원: 유니크 인덱스는 테이블 내에서 중복된 데이터를 방지할 수 있다.디스크 공간 소모: 인덱스를 생성하면 추가적인 디스크 공간이 필요하다.데이터 수정 시 성능 저하: 삽입, 삭제, 업데이트 작업이 발생할 때 인덱스도 함께 업데이트되므로 성능이 저하된다. Full Table Scan이 더 좋은 경우테이블에 데이터가 몇십 또는 몇 백 건밖에 없는 경우, 전체 테이블을 스캔하는 것이 인덱스를 ..

해시 함수란 임의의 크기를 가지는 type의 데이터를 고정된 크기를 가지는 type의 데이터로 변환하는 함수이다.데이터의 무결성을 검사하고, 데이터에 대한 고유한 지문을 생성하기 위해 사용된다.각 해시 알고리즘은 서로 다른 보안 요구 사항과 성능 특성을 가지고 있으므로, 사용 목적에 맞는 적절한 알고리즘을 선택하는 것이 중요하다. 보안 요구 사항이 높은 경우, SHA-2, SHA-3 또는 BLAKE2와 같은 최신 알고리즘을 사용하는 것이 좋다. 1. MD5 (Message Digest Algorithm 5)해시 길이: 128 비트설명: MD5는 가장 오래된 해시 알고리즘 중 하나로, 빠르고 간단하다. 주로 파일 무결성 검사와 비밀번호 해싱에 사용되지만, 최근에는 보안 취약성 때문에 중요한 보안 응용에는 ..

Express 설치 및 초기 설정Express란?Express는 Node.js를 위한 빠르고 간결한 웹 프레임워크이다. 미들웨어와 라우팅 기능을 제공하여 서버와 API를 쉽게 구축할 수 있게 도와준다.프로젝트 초기 설정mkdir express-apicd express-apinpm init -ynpm install express mongoose corsnpm install --save-dev typescript ts-node @types/node @types/express @types/corsnpx tsc --initTypeScript 설정tsconfig.json 파일을 생성하고 다음과 같이 설정한다.{ "compilerOptions": { "target": "ES2020", "module":..

MongoDB는 NoSQL 데이터베이스로, 비관계형 데이터베이스 시스템이다. 전통적인 관계형 데이터베이스와 달리, MongoDB는 JSON과 유사한 BSON(Binary JSON) 형식의 문서를 사용하여 데이터를 저장하고 관리한다. 이러한 특성 덕분에 다양한 형식의 데이터를 유연하게 저장하고 빠르게 처리할 수 있다.NoSQL: 비관계형 데이터베이스로, 스키마가 필요하지 않다.JavaScript 질의어: 자바스크립트를 질의어로 사용하여 데이터베이스와 상호작용할 수 있다.배열 데이터: 배열 형태의 데이터를 효율적으로 저장하고 관리할 수 있다.JSON 저장: JSON 형태의 데이터를 자유롭게 저장할 수 있다. MongoDB 관리 도구MongoDB Shell (mongosh)명령줄 인터페이스(CLIMongoDB..

웹 사이트에 회원가입을 해야지만 이용할 수 있는 페이지가 있다. 이처럼 누구나 접속할 수 있는 경로를 공개 라우트, 로그인한 사용자만 접속 가능한 경로를 비공개 라우트라고 한다.예제회원가입을 해야지만 이용할 수 있는 비공개 라우트와 누구나 접근 가능한 공개 라우트를 설정하는 예제이다. 이를 위해 RequireAuth 컴포넌트를 사용해 비공개 라우트를 보호하고, Layout 컴포넌트를 통해 공통 레이아웃을 정의한다.useAuth.tsximport type {FC, PropsWithChildren} from "react";import {createContext, useCallback, useContext, useState} from "react";import * as U from "../utils";// L..

react-router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 처리할 수 있게 도와주는 라이브러리이다.React Router의 주요 기능경로 기반 라우팅: URL 경로에 따라 다른 컴포넌트를 렌더링 한다.네스티드 라우팅: 라우트 안에 라우트를 중첩하여 복잡한 내비게이션을 구현한다.동적 라우팅: URL 매개변수를 사용하여 동적인 콘텐츠를 처리한다.프로그램적 내비게이션: 코드에서 직접 내비게이션을 제어할 수 있다.라우트 보호: 인증 및 권한 관리를 통해 특정 라우트 접근을 제어한다.설치npm i react-router Routes, Route, LinkRoutesRoutes는 React Router v6에서 도입된 새로운 컴포넌트로, 라우트의 집합을 정의하는 역할을 한다. 이전 버전에서는 S..

react-beautiful-dnd는 React 애플리케이션에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 이 라이브러리는 복잡한 드래그 앤 드롭 상호작용을 간단하게 처리할 수 있게 설계되었으며, 높은 유연성과 성능을 제공한다.주요 특징쉬운 사용법: API가 간단하고 직관적이며, 드래그 앤 드롭 기능을 쉽게 추가할 수 있다.성능 최적화: 가상화와 메모이제이션을 통해 높은 성능을 유지하며, 많은 요소를 포함한 리스트에서도 원활한 성능을 보장한다.접근성: 기본적으로 접근성(Accessibility, a11y)을 고려하여 설계되었다.애니메이션: 드래그 및 드롭 동작에 대한 부드러운 애니메이션을 제공한다.설치npm i --legacy-pee-deps react-beautiful-dn..

React에서는 react-dnd 라이브러리를 사용하여 드래그 앤 드롭 기능을 간편하게 구현할 수 있다.설치먼저, react-dnd와 react-dnd-html5-backend를 설치한다. react-dnd-html5-backend는 HTML5의 드래그 앤 드롭 API를 사용하는 기본 백엔드이다.npm i react-dnd react-dnd-html5-backendnpm i -D @types/react-dndReact DnD에서 백엔드는 드래그 앤 드롭 이벤트를 처리하고, 드래그된 아이템의 상태를 관리하는 시스템이다. "백엔드"라는 용어는 여기서 드래그 앤 드롭 기능을 지원하는 '기술적 메커니즘' 또는 '엔진'을 의미한다. 실제 서버 백엔드와 혼동할 수 있지만, 문맥상 이 백엔드는 클라이언트 측에서 동작..

import {makeRandomCard} './data'const card = makeRandomCard()const uuid = card['uuid'] // 색인 연산자로 객체의 'uuid' 속성값 얻기자바스크립트는 색인 연산자 []를 사용하여 객체의 속성값을 얻을 수 있다. 이러한 형태의 코드는 속성 이름을 잘못 작성하는 실수를 일으킬 수 있다. 또한 이런 오류는 코드가 실행되기 전에는 알 수 없다.이 때문에 타입스크립트는 기본으로 객체의 속성값을 색인 연산자로 얻을 수 없게 한다. 대신 Record 타입을 제공한다. Record 타입type Record = { [P in K]: T;}K: 객체의 키 타입을 지정한다. keyof any는 모든 가능한 키 타입을 의미한다. (예: string, ..

peerDependencies는 package.json 파일의 한 필드로, 패키지가 특정 버전의 다른 패키지와 함께 동작해야 함을 나타낸다. 주로 플러그인이나 라이브러리가 특정 버전의 상위 라이브러리와 함께 동작해야 할 때 사용된다.React 플러그인을 만들 때, 플러그인이 특정 버전의 React와 호환되도록 하고 싶다면 peerDependencies를 사용하여 React 버전을 지정할 수 있다. 아래 예시에서, my-react-plugin은 React 16 이상 버전과 함께 사용되어야 한다.{ "name": "my-react-plugin", "version": "1.0.0", "peerDependencies": { "react": ">=16.0.0" }} peerDependencies의 주..