아무래도 이로률

각 테스트 단계는 **소프트웨어 개발 생명주기(SDLC)**의 흐름 속에서 순차적으로 수행되는 중요한 품질 검증 절차 ✅ 1. 단위 테스트 (Unit Test)📌 개념하나의 함수, 모듈, 클래스 등 가장 작은 단위를 테스트하는 과정입니다.주로 개발자가 직접 수행하며, 로직이 의도한 대로 작동하는지를 검증합니다.📎 예시A 함수에 숫자 3과 5를 넣었을 때 8이 반환되는지 확인하는 테스트👨‍💻 주체개발자 (자동화 테스트 도구와 함께 많이 사용)✅ 2. 통합 테스트 (Integration Test)📌 개념단위별로 잘 동작하던 모듈들이 서로 연결되었을 때 제대로 작동하는지 확인하는 테스트입니다.모듈 간 인터페이스, 데이터 전달, 호출 흐름 등을 중점적으로 검증합니다.📎 예시로그인 기능에서 사용자 인증..

✅ 인터페이스(Interface)란?서로 다른 두 개체(예: 시스템, 모듈, 사용자와 시스템 등)가 정보를 주고받기 위해 약속된 접점 또는 소통 방식 🔹 종류별 간단 예시:사용자 인터페이스 (User Interface, UI) → 사람이 시스템과 상호작용하는 화면, 버튼, 입력창 등  예: 웹사이트에서 로그인 화면시스템 간 인터페이스 (System Interface) → 두 시스템이 데이터를 주고받기 위한 연결  예: 시스템 A가 시스템 B에 API로 요청하고 결과를 받는 방식소프트웨어 인터페이스 (프로그램 내 인터페이스) → 하나의 모듈이나 클래스가 외부와 어떻게 연결되는지 정의  예: Java에서 interface 키워드를 사용한 기능 명세 ✅ 요약인터페이스는 '연결점'이자 '약속된 방식'사람이 시..

🔗 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 =..

1. 번들러1-1. WebpackCRA는 React 애플리케이션의 초기 설정을 간단히 해주는 툴로,리액트 프로젝트 생성 시 기본적으로 Webpack과 Babel을 사용해 번들링과 트랜스파일링을 처리함Webpack은 번들러로, 다양한 JavaScript, CSS, 이미지 파일 등을 하나 또는 여러 개의 최적화된 파일로 묶어주는 도구번들링 : JavaScript뿐 아니라 CSS, 이미지, 폰트 등을 포함한 모든 리소스를 하나의 번들로 묶음플러그인 시스템 : 다양한 플러그인으로 기능 확장 가능Hot Module Replacement (HMR) : 변경된 파일만 브라우저에 업데이트해 빠른 개발 경험 제공 1-2. ViteVite는 빠른 개발 환경을 제공하기 위한 번들링 및 빌드 도구기존 도구인 Webpack과 ..

크롬 개발자모드에서 네트워크 요청을 봤을 때, 같은 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"));