React (10) 썸네일형 리스트형 node 최신 버전 업데이트 방법 # Node.js 최신 버전 업데이트 방법 Node.js를 최신 버전으로 업데이트하는 방법은 운영체제에 따라 다릅니다. 아래에 각 OS별 업데이트 방법을 안내해 드리겠습니다. ## Windows/macOS 사용자 ### 1. 공식 웹사이트에서 직접 설치 1. [Node.js 공식 웹사이트](https://nodejs.org/) 방문 2. "LTS" 또는 "Current" 버전 다운로드 (안정성을 위해 LTS 권장) 3. 설치 프로그램 실행 후 안내에 따라 설치 ### 2. Node Version Manager(nvm) 사용 (권장) nvm을 사용하면 여러 버전을 쉽게 관리할 수 있습니다. **설치 방법:** # Windows (nvm-windows) https://github.com/coreybutler.. 커스터마이징, 혹은 특정 컴포넌트만 사용하고 싶은 경우에 pro-components 패키지를 직접 설치하지 않고 소스 코드를 가져다가 직접 쓰는 방법 Ant Design Pro에서 제공하는 고급 컴포넌트들(`@ant-design/pro-components`)은 기업용 어드민 UI를 빠르게 구성할 수 있도록 도와주는 강력한 라이브러리입니다. 하지만 때로는 번들 크기 최적화, 커스터마이징, 혹은 특정 컴포넌트만 사용하고 싶은 경우에 `pro-components` 패키지를 직접 설치하지 않고 **소스 코드를 가져다가 직접 쓰고 싶을 수 있습니다**. --- ## ✅ 목표 - `@ant-design/pro-components` 패키지 설치 없이도 - 필요한 컴포넌트(예: `ProTable`, `ProForm`, `Descriptions`, 등)의 소스코드를 직접 가져와서 사용 --- ## 🚀 방법 1: GitHub에서 원본 소스 가져오기 (추천) 공식 .. Ant Design의 전체 아이콘 SVG 소스를 한 번에 추출 하는 방법 Ant Design의 **전체 아이콘 SVG 소스를 한 번에 추출**하고 싶으시면, 공식 GitHub 저장소에서 스크립트를 이용해 모든 아이콘을 자동으로 다운로드하거나 React 컴포넌트 형태로 변환할 수 있습니다. --- ## 🧾 목표 - `@ant-design/icons` 패키지 없이도 Ant Design 아이콘 사용 - 전체 아이콘 SVG 또는 React 컴포넌트로 일괄 추출 - 번들 최적화 및 커스터마이징 가능 --- ## ✅ 방법 1: 공식 레포지토리에서 직접 클론 ### 1. Git Clone ```bash git clone https://github.com/ant-design/ant-design-icons.gitcd ant-design-icons ``` ### 2. 필요한 아이콘 위치 .. Java, Spring, iBatis, MariaDB 환경에서 실행 결과를 등록된 수신자들에게 이메일로 발송 예제 // com.example.service.TestPlanEmailService.javaimport org.springframework.beans.factory.annotation.Autowired;import org.springframework.mail.SimpleMailMessage;import org.springframework.mail.javamail.JavaMailSender;import org.springframework.stereotype.Service;import com.example.mapper.ItTestPlanMapper;import java.util.ArrayList;import java.util.List;import java.util.Map;@Servicepublic class Te.. 유효한 Date 객체인지 검사하는 유틸리티 함수 export function isValidDate(d: unknown): boolean { return d instanceof Date && !isNaN(d.getTime());}상세 설명1. d: unknown이 함수는 어떤 타입(unknown)의 값이라도 받을 수 있습니다.unknown은 TypeScript에서 타입 안정성을 높이기 위해 any보다 더 안전한 타입입니다.내부에서 명확한 타입 확인을 통해 안전하게 다룰 수 있게 유도합니다.2. d instanceof Dated가 Date 클래스의 인스턴스인지 확인합니다.new Date()로 생성된 객체만 true가 됩니다.문자열이나 숫자 등의 다른 값은 false입니다.3. !isNaN(d.getTime())d가 Date 객체여도 내부 값이 유효한 날.. React 17 + TypeScript 환경의 클래스 컴포넌트에서 hh24:mi 형식(예: 13:32)의 값을 입력받아 유효성 검증하는 React 17 + TypeScript 환경의 클래스 컴포넌트에서 hh24:mi 형식(예: 13:32)의 값을 입력받아 유효성 검증하는 예제를 아래에 작성해드리겠습니다.검증 조건은 다음과 같습니다:형식은 HH:MI (00:00 ~ 23:59)정규표현식으로 검증잘못된 경우 에러 메시지를 출력import React, { Component, ChangeEvent } from 'react';interface State { time: string; error: string;}class TimeInputValidator extends Component { state: State = { time: '', error: '', }; validateTimeFormat = (value: string): .. 하단 그리드(BottomGrid.tsx)에서 hide 사용 예제 ag-Grid에서 하단 그리드의 컬럼을 조건(testType)에 따라 보이거나 숨기는 방법으로 columnDefs의 hide 속성을 사용하는 방식은 매우 일반적이고 효과적입니다.아래는 React 17 + TypeScript에서 hide 속성을 동적으로 제어하는 예제입니다.✅ 하단 그리드(BottomGrid.tsx)에서 hide 사용 예제import React, { useMemo } from 'react';import { AgGridReact } from 'ag-grid-react';import { ColDef } from 'ag-grid-community';import 'ag-grid-community/styles/ag-grid.css';import 'ag-grid-community/styles/ag-t.. Failed prop type: invaild prop value[0] of type String supplied to DataRangePicker, expcted instance of 'Date' 오류 오류 메시지:Failed prop type: Invalid prop `value[0]` of type `String` supplied to `DateRangePicker`, expected instance of 'Date'이 메시지는 다음과 같은 핵심 내용을 담고 있습니다:DateRangePicker에 넘긴 value의 항목이 Date 인스턴스가 아니라 문자열(string) 이라는 뜻입니다.즉, selectRow.excludeDt = ['2025-06-11', '2025-06-12']처럼 문자열이 들어가 있었기 때문입니다.✅ 1. 원인 분석selectRow.excludeDt?.[0] = selectRow.excludeFromDt;이 코드에서 selectRow.excludeFromDt와 selectRow... 이전 1 2 다음