아무래도 이로률

🔗 https://ant.design/components/form Form - Ant DesignAn enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprisesant.design개발 시 참고한 Ant Design 사이트이다.  Form 태그의 Input 태그 하나에 유효성 검사를 추가하는 방법이다. * message는 유효성 검사에 적합하지 않는 경우 표출되는 메시지를 설정한다.  1. 글자 수 제한 - min : 최소 글자 수- max : 최대 글자 수{ min: 2, max: 10, message:..

🔗 https://ant.design/components/form Form - Ant DesignAn enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprisesant.design개발 시 참고한 Ant Design 사이트이다.  Input 태그를 추가하였는데, submit 버튼을 누르면 원하지 않는 메시지가 출력된다.  난 is required를 원하는게 아닌데 메시지 수정하는건 사이트에 없는 듯  - 기존 코드  - 변경 코드  rules에 message를 추가하여 출력되는 메시지를 변경할 수 ..

ifcViewer를 사용하여 bim 파일 뷰어를 구현하였다.  1. canvas 요소 가져오기 const canvas = viewer.context.getRenderer().domElement; 2. canvas 내용 이미지(jpeg)로 변환 const image = canvas.toDataURL("image/jpeg", 0.9);if (!image) { alert("이미지를 캡처할 수 없습니다."); return;} 3. Base64 데이터 URL을 가져와 Blobl 데이터로 변환- Blob 데이터를 이용해 파일 객체를 생성- "bimScreenshot.jpg" 이름으로 이미지 파일 생성const blob = await (await fetch(image)).blob();const jpegFile =..

크롬 개발자모드에서 네트워크 요청을 봤을 때, 같은 api 호출을 두번씩 하는 오류가 있었다.  해결 방법은 간단하게 main.tsx에서 StrictMode를 제거해준다.  -기존 코드import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import App from './App.tsx'import { Provider } from 'react-redux'import store from '@store/store'import '@css/main.css'createRoot(document.getElementById('root')!).render( ,) - 변경 코드import { createRo..

1. header 요소의 높이를 가져옴 (없으면 0)const headerHeight = document.querySelector("header")?.offsetHeight || 0; 2. .main-contents 요소의 상/하 패딩 값을 가져옴 - main-contents는 div의 classNameconst mainContentsPadding = parseInt(getComputedStyle(document.querySelector(".main-container")!).paddingTop || "0", 10) + parseInt(getComputedStyle(document.querySelector(".main-container")!).paddingBottom || "0",..

콘솔 오류 메시지   import { Table } from 'antd';Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep)이 오류 이해하기AIreact-dom_client.js?v=ff94396b:5582 Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:5173/src/pages/bsi/Bsi.tsx이 오류 이해하기AIreact-dom_client.js?v=ff94396b:5589 An error occurred in one of your React components.Consider adding..

lazy()는 React에서 동적(import) 로딩을 지원하는 함수로, 초기 로딩 성능을 최적화하는 데 사용 - lazy()를 사용하면 코드를 필요한 시점에 로드하여 초기 로딩 속도를 줄일 수 있다. - 이 방식은 페이지별, 컴포넌트별로 분리하여 성능을 최적화하는 데 유용하다. https://ko.react.dev/reference/react/lazy lazy – ReactThe library for web and native user interfacesko.react.dev const Index = lazy(() => import("@pages/Index"));

1. Redux와 React-Redux 설치 npm install @reduxjs/toolkit react-redux - typescript인 경우 추가로 @types/react-redux 설치npm install @types/react-redux 2. Slice 생성 (userSlice.ts)2-1. Redux Toolkit을 사용한 상태 관리(slice) 설정- 로그인 후 id와 token을 저장  1) UserState 인터페이스 정의interface UserState { id: string | null; token: string | null;}2) initialState 초기 상태 설정const initialState: UserState = { id: null, token: null};3)..

1. Ant Design 설치  npm install antd --save 2. 컴포넌트 가져오기https://ant.design/components/overview  Components Overview - Ant DesignAn enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprisesant.design여기에서 원하는 컴포넌트들을 찾아서 복사 하면 된다.  3. Ant Design 적용import React from 'react';import { Button } from 'antd';const App ..

1. 부모 컴포넌트 => 자식 컴포넌트Child.tsx - interface ChildProps 를 추가하여 전달받을 변수명과 타입을 선언- ChildProps를 사용하는 Child 컴포넌트 정의- 전달받은 count 값을 화면에 표시interface ChildProps { count: number;}const Child: React.FC = ({ count }) => { return ( 자식 컴포넌트 [{count}] );};export default Child;  Parent.tsx - Child.tsx 의 props에 count값 전달import { useState } from "react";import Child from "@pages/Child";const Paren..