본문 바로가기

반응형

개발자정보

(340)
React의 Material UI에서 Dialog 컴포넌트 사용 시 PaperComponent prop Material UI의 Dialog 컴포넌트는 모달 대화 상자를 표시할 때 사용됩니다. 이 다이얼로그의 배경 부분, 즉 내용이 표시되는 종이 형태의 영역을 제어하기 위해 사용되는 prop이 바로 PaperComponent입니다. 기본적으로 Dialog는 내부적으로 Material UI의 Paper 컴포넌트를 사용하여 다이얼로그의 표면을 렌더링합니다. 이 Paper 컴포넌트는 그림자 효과나 모서리 라운딩 등 Material Design의 지침에 맞는 스타일을 적용해 줍니다. 하지만 때로는 다이얼로그의 기본 동작이나 스타일을 변경하고 싶을 때가 있습니다. 예를 들어, 다이얼로그를 사용자가 드래그하여 위치를 옮길 수 있도록 만들거나, Paper 컴포넌트가 아닌 다른 커스텀 컴포넌트를 사용하여 완전히 다른 모양..
ag-grid를 사용하는 React 17버전 클래스 컴포넌트 환경에 SQL 체크하는 모달 창 만들기 예제 - ag-grid와 React 17 클래스 컴포넌트 환경에서 타입스크립트로 구현- 체크박스 행 선택, SQL 편집 모달, 서버 연동- 데이터 타입과 모달 컴포넌트를 분리하고, 서버 연동 시 기본값 설정 및 LIMIT 1 추가 로직까지 고려 1. 데이터 타입 정의 (types/gridTypes.ts)TypeScript // types/gridTypes.tsexport interface GridRowData { [key: string]: any; // 실제 데이터 필드에 따라 구체적인 타입 정의 필요 sql?: string;}export interface ModalState { isOpen: boolean; selectedRow?: GridRowData; editedSql: string; isCh..
React와 Spring Boot를 사용한 SQL 체크 및 모달 창 구현 1. React 클래스 컴포넌트와 AG Grid 설정AG Grid와 React 설정AG Grid를 사용하여 React 클래스 컴포넌트에서 데이터 그리드를 설정합니다. TypeScript를 사용하여 컴포넌트를 작성합니다.import React, { Component } from 'react';import { AgGridReact } from 'ag-grid-react';import 'ag-grid-community/styles/ag-grid.css';import 'ag-grid-community/styles/ag-theme-alpine.css';interface RowData { id: number; sql: string; // 다른 필드들 추가 가능}interface State { rowData:..
React17, Typescript 환경에서 modal 띄우는 예제 중간정리ag-grid를 사용하는 React 17버전 클래스 컴포넌트 환경에서 타입스크립트를 기반으로,체크박스로 행을 선택한 후 CheckSQL 버튼 클릭 시 첫 번째 선택된 행의 SQL 값을 별도의 모달 창에서 편집하고 확인 버튼을 통해 선택 된 행의 필드에 적용하는 기능을, 데이터 타입 및 모달 컴포넌트를 분리하여 구현하고 클래스 컴포넌트 형태로 코드 만들어 주세요. Class Components1. RowDataType.ts 파일 (변경 없음)// src/types/RowDataType.ts (예시 경로)export interface RowDataType { id: number; // 각 행을 고유하게 식별할 ID (업데이트 시 필요) make: string; model: string; pri..
Windows에 Python 설치하기 1. 설치 파일 다운로드Python 공식 다운로드 페이지 접속안정적인 최신 버전 선택 (예: Python 3.12.3)Windows installer (64-bit) 클릭 (일반적으로 64비트 권장)참고: 32비트 PC는 Windows installer (32-bit) 선택2. 설치 실행 (중요 설정 포함)다운로드한 .exe 파일 실행 (예: python-3.12.3-amd64.exe)반드시 체크할 옵션 (⚠️ 필수):☑ Add python.exe to PATH (시스템 환경 변수 자동 추가)☑ Install launcher for all users (관리자 권한으로 설치)Customize installation 클릭 후 다음 옵션 확인:☑ pip (패키지 관리자)☑ tcl/tk and IDLE (기본 ..
Visual Studio Code 2022 Community 버전 설치 방법 https://code.visualstudio.com/updates/v1_72 Visual Studio Code 설치 방법 가이드 (Windows 기준)안녕하세요! 이번 글에서는 마이크로소프트의 가볍고 강력한 코드 편집기인 **Visual Studio Code (VS Code)**를 Windows PC에 설치하는 방법을 단계별로 쉽게 안내해 드리겠습니다.1. Visual Studio Code란?Visual Studio Code는 무료 오픈소스 코드 편집기로, 다양한 프로그래밍 언어 지원과 풍부한 확장 기능, 빠른 속도, 뛰어난 사용자 경험으로 많은 개발자들에게 사랑받고 있습니다. 특히 가볍고 유연하며, Windows, macOS, Linux 모두 지원합니다.2. VS Code 설치 준비 사항운영체제: W..
Java, Spring, iBatis 소스 분석/시각화 Pinpoint설명: Pinpoint는 대규모 분산 시스템을 위한 APM (Application Performance Management) 도구입니다. 주로 Java, PHP, Python으로 작성된 시스템을 모니터링합니다.링크: Pinpoint GitHubjava-callgraph설명: Java의 정적 및 동적 호출 그래프를 생성하는 도구입니다. 이를 통해 소스 코드를 분석하고 시각화할 수 있습니다.링크: java-callgraph1. Scouter (스카우터)주도 기여: 인도 개발자 커뮤니티 + 한국과 협력특징:Java/Spring 애플리케이션의 성능 모니터링에 특화.MyBatis SQL 쿼리 추적 및 실행 시간 시각화.분산 트레이싱과 실시간 대시보드 제공.2. Stagemonitor주도 기여: 인도..
DATA LAKE(데이터 레이크) [데이터 소스] → [수집 Layer] → [저장 Layer] → [처리 Layer] → [분석/시각화] (DB, IoT, SaaS) (Kafka, Flume) (S3, HDFS) (Spark, SQL) (Tableau, ML)DATA LAKE(데이터 레이크) 는 구조화된 데이터, 반구조화된 데이터, 비정형 데이터 등 모든 유형의 대용량 데이터를 원본 형태 그대로 저장하고 관리하는 중앙 집중식 저장소입니다.(→ 전통적인 데이터 웨어하우스와 달리, 데이터를 미리 정제하거나 스키마를 정의하지 않아 유연성이 높습니다.) 1. 데이터 레이크의 핵심 특징특징설명원본 데이터 저장CSV, JSON, 로그 파일, 이미지, 동영상, IoT 데이터 등 다양한 형식 수용스키마 온 리드(Schema-on-R..

반응형