React (11) 썸네일형 리스트형 Argument of type 'TEmptiable<number>' is not assignable parameter of type 'number' type 'undefined' is not assignable to type 'number' Argument of type 'TEmptiable' is not assignable parameter of type 'number' type 'undefined' is not assignable to type 'number' 오류의 핵심은 updatefileGroupid 메서드의 파라미터 타입이 number인데,filegroupId 변수는 TEmptiable 타입이어서 null이나 undefined일 수도 있기 때문입니다.즉, number만 받을 수 있는 함수에 number | null | undefined를 넣으니 타입스크립트가 거부하는 거죠. 1. 타입 좁히기 (null/undefined 체크)if (filegroupId != null) { // null, undefined 둘 다 체크 this... 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.. 이전 1 2 다음