분류 전체보기 23

react-tooltip 라이브러리가 v5 버전부터 완전히 새롭게 리팩토링되면서,기존의 사용 방식이 완전히 사라지고, 컴포넌트 중심으로 API가 변경되었습니다. Tooltip을 원래 쓰던 방식대로 사용이 하려다가 문제가 생겨 찾아보니 v5에 큰 변경점이 있었네요;; 📌 ReactTooltip → Tooltip: 버전 4 vs 5 비교 v4v5사용 방식 사용 컴포넌트 사용트리거 방식data-tip 속성data-tooltip-id + data-tooltip-content스타일 import자동 or 선택적import 'react-tooltip/dist/react-tooltip.css' 필수위치 설정place="top" 등동일 (place="top", "bottom", "right", "left")여러 ..

Lazy Loading?리소스를 처음부터 로드하지 않고, 사용자가 필요할 때 불러오는 웹 성능 최적화 기법초기 로딩 시간을 줄이고, 브라우저의 리소스 사용을 최소화하여 UX와 성능을 개선하는 데 큰 도움을 줌 📌 React에서의 Lazy LoadingReact에서는 React.lazy와 Suspense를 사용하여 컴포넌트를 동적으로 로드할 수 있습니다. ✅ 특징컴포넌트 단위로 지연 로딩을 수동으로 설정해야 합니다.React Router를 사용할 경우, 라우트 기반 Lazy Loading도 직접 구현해야 합니다.Suspense를 통해 로딩 중 UI를 지정해야 합니다.코드 분할도 개발자가 직접 구성해야 합니다.📌 Next.js에서의 Lazy LoadingNext.js는 React 위에서 동작하는 프레임..

이번에 포트폴리오를 React.js에서 Next.js로 변경하면서 Git Pages 배포 방식에 조금 차이가 나서 정리해보았습니다. * 기본적인 GitHub Pages 세팅이나 프로젝트 세팅은 생략했습니다 📌next.config.jsconst isProd = process.env.NODE_ENV === 'production';const nextConfig = { output: 'export', basePath: isProd ? '/[레포이름]' : '', assetPrefix: isProd ? '/[레포이름]/' : '',};module.exports = nextConfig; 📌 동적 라우팅 + generateStaticParams❔ 왜 generateStaticParams를 꼭 써야 할까?..

라우팅(Routing): URL에 따라 화면을 분기하는 기술정적 라우팅(Static Routing): URL 경로가 고정되어 있는 경우동적 라우팅(Dynamic Routing): URL 경로의 일부가 동적으로 변경되는 경우 → 변하는 부분 : 동적 세그먼트(Dynamic Segment) Next.js에서의 동적 라우팅파일 시스템 기반 라우팅Next.js는 폴더와 파일명으로 라우팅을 자동 생성합니다.동적 세그먼트는 대괄호 [ ]로 정의합니다.app/products/[id]/page.tsx 📌 v15 : Promise 기반 params Next.js v15부터 params와 searchParams가 Promise 타입으로 주어집니다.따라서 항상 await를 사용해야 합니다. 👉 Promise Typ..

Promise(사전) V. 약속하다, …일 것 같다 N.약속, 가능성 비동기 작업의 최종 완료(성공) 또는 실패(에러)와 그 결과 값을 나타내는 객체"미래의 어떤 시점에 값이 있을 것" 이라는 약속을 표현하는 개념 JavaScript 기본적으로 싱글 스레드(single-threaded) 방식으로 동작합니다.만약 네트워크 요청(API 호출), 파일 읽기/쓰기, 데이터베이스 쿼리 등 시간이 오래 걸리는 "비동기 작업"이 발생했을 때,이 작업이 끝날 때까지 다른 모든 코드가 멈춰버린다면 UI가 멈추거나 먹통이 되는 문제가 발생하게 됩니다.Promise는 이러한 비동기 작업이 백그라운드에서 진행되는 동안에도 메인 스레드가 다른 작업을 계속할 수 있도록 하여, 애플리케이션이 멈추지 않고 반응성을 유지할 수 있..

자연어 처리(NLP), 컴퓨터 비전, 오디오 등 다양한 데이터 형태를 다룰 때, 대규모 데이터셋을 어떻게 효율적으로 불러오고 가공할지가 상당히 중요한 이슈 👉 Hugging Face Datasets Library ?딥러닝 데이터셋을 효율적으로 다루기 위해 설계된 고성능 데이터셋 라이브러리📌 주요 특징메모리 효율적 관리대용량 데이터도 메모리 부담 없이 처리 가능필요할 때만 데이터를 불러오는 lazy loading 지원다양한 형식 지원CSV, JSON, Parquet, 이미지, 오디오 등 다양한 포맷을 손쉽게 로드 가능고성능 전처리 지원map(), filter(), shuffle() 등 강력한 전처리 기능 제공멀티프로세싱 및 배치 처리를 통한 빠른 데이터 변환Hugging Face 모델과 자연스러운 통합..

최근 React 프로젝트에 애니메이션을 추가하려다 Framer Motion의 공식 문서를 찾지 못해 의아했었습니다.그러던 중, Framer Motion이 이제는 Motion이라는 이름의 독립 오픈소스 라이브러리로 변경되었다는 사실을 알게 되었죠. 👉 Framer Motion is now independent, introducing Motionhttps://motion.dev/blog/framer-motion-is-now-independent-introducing-motion 해당 글에 따르면,많은 유저들이 Framer Motion을 React.js 외의 환경에서도 사용하고 싶어 했고,이에 따라 개발자 Matt Perry는 다음과 같은 결정을 내렸습니다.“모든 사이트에서 애니메이션의 핵심 동인으로서 M..

윤곽선 검출이미지에서 경계선을 찾아내는 과정경계선 - 색상/밝기가 급격 Sobel Filter (1차 미분 기반)밝기의 변화가 급격한 부분 = 엣지 라고 보고 수학적으로 1차 미분값이 큰 부분을 엣지로 간주 - x축 / y축 방향으로 미분 필터 적용- 밝기의 변화율(∂I/∂x, ∂I/∂y) 계산 장점단점 - 빠르고 간단- 방향성(수평/수직) 추출 가능- 연산량 적음 - 노이즈에 민감- 두꺼운 엣지 발생- 약한 엣지 잘 못 잡음 Prewitt / Scharr FilterSobel을 변형해서 좀 더 부드럽거나 강하게 강조하는 필터 Prewitt: 고전적인 평균 기반의 미분 필터Scharr: Sobel보다 회전 불변성과 선명도가 개선됨 장점단점 Prewitt - Sobel보다 더 간단- 연산이..

SELECT TOP 10 name, type_desc, create_date, modify_dateFROM sys.objects oWHERE o.type IN ('P','V', 'FN', 'IF', 'TF', 'TR') ORDER BY modify_date DESC

텐서(Tensor) 💻 벡터와 스칼라를 일반화한 다차원 배열(N-dimensional array) ⚛️ 좌표계가 바뀌어도 일관된 법칙 아래 변환되는 수학적 객체📐 선형 변환(곱연산)을 통해 서로 연결된 공간을 표현하는 수학적 구조 딥러닝 프레임워크에서는 "모든 연산과 저장을 기본적으로 텐서(Tensor)라는 형태로 처리" 차원이름예시사용0D스칼라5손실값, 정확도1D벡터[1,2,3]특징 벡터2D행렬[[1,2], [3,4]]입력 × 가중치3D텐서여러 행렬 묶음시계열, 컬러 이미지4D고차원 텐서(배치, 채널, 높이, 너비)CNN 입력 구조 텐서 하나로 통일하는 이유?→ 계산 효율성텐서는 GPU / TPU에서 병렬로 연산하기 좋은 구조 (CUDA 등)Matrix multiplication, con..

Heatmap? 데이터를 시각적으로 표현하는 방법 숫자 값의 크기를 색상의 강도로 나타내는 그래프   히스토그램 평탄화 + 히트맵 적용import cv2import numpy as np# 1. 이미지 로드img = cv2.imread("./assets/scramble.jpg")if img is None: raise FileNotFoundError("이미지를 찾을 수 없습니다.")# 2. 그레이스케일 변환gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)cv2.imwrite("./assets/gray.png", gray)# 3. 히스토그램 평탄화equalized = cv2.equalizeHist(gray)cv2.imwrite("./assets/equalized_gray...

히스토그램(Histogram)?이미지의 밝기 값 분포를 막대그래프로 나타낸 것    히스토그램 균일화 명암 대비가 높아져야 물체를 더 잘 식별할 수 있기에밝기 값의 분포를 더 고르게 만들어서, 전체 밝기 범위를 활용하도록 하는 과정  흑백(Grayscale) 이미지는 2차원 배열  (*예시) gray_img = [ [ 12, 50, 90, 80 ], [ 34, 45, 70, 100 ], [ 60, 62, 58, 80 ], [ 90, 95, 85, 60 ]]픽셀당 밝기값만 있으니까, 바로 히스토그램 평활화를 바로 적용하면 됨 컬러 이미지는 3차원 배열 (*예시)color_img = [ [ [12, 40, 90], [50, 80, 100], [90, 30, 50], [80, 80..