I'm sw engineer!

[React] React와 ReactDOM

React와 ReactDOM은 React 생태계의 핵심 라이브러리 두 가지입니다.이 둘은 목적이 다르며, 함께 사용되지만 역할이 명확히 나뉘어 있습니다.🔹 React✅ 역할React는 컴포넌트를 만들고 구성하는 역할을 합니다.즉, UI를 정의하고 로직을 구성하는 도구입니다.✅ 주요 기능React.createElement(): React 엘리먼트 생성useState, useEffect 등 훅 제공JSX 문법을 해석할 기반 제공컴포넌트 클래스, 함수형 컴포넌트 등 정의✅ 예시jsximport React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return setCount(count + 1..

IntelliJ에서 정의로 이동

🔹 단축키:기능 Windows/LinuxmacOS정의로 이동 (Go to Definition)Ctrl + B 또는 Ctrl + ClickCmd + B 또는 Cmd + Click선언으로 이동 (Go to Declaration)Ctrl + B 또는 Ctrl + ClickCmd + B 또는 Cmd + Click구현으로 이동 (Go to Implementation)Ctrl + Alt + BCmd + Alt + B 👀 인라인 미리보기 (Quick Definition)🔹 단축키:기능Windows/LinuxmacOS정의 미리보기 (Quick Definition)Ctrl + Shift + ICmd + Y 또는 Cmd + Shift + I 예: 함수 이름 위에 커서를 두고 이 단축키를 누르면 팝업창으로 함수 정의가..

Visual Studio Code F12 / 정의로 이동이란 ?

**“정의로 이동(Go to Definition)”**은 프로그래밍에서 함수, 변수, 클래스 등 식별자의 선언 위치로 이동하는 기능이에요. function sayHello() { console.log("Hello!");}sayHello(); // 커서를 여기 두고 F12 누르면... sayHello();에 커서를 두고 F12를 누르면위에 선언된 function sayHello() { ... }로 자동으로 점프합니다.✅ 이 기능이 왜 유용할까?코드 구조를 빠르게 파악할 수 있어요.라이브러리나 모듈에서 정의된 내용을 추적할 때 필수예요.함수나 변수의 정의 위치를 찾느라 스크롤할 필요가 없음.💡 팁:F12: 정의로 이동Alt + F12: 정의를 인라인으로 미리 보기Ctrl + Click / Cmd + Cl..

🧠 IntelliSense / 자동완성기능Windows/LinuxmacOS코드 자동완성Ctrl + SpaceCtrl + Space정의로 이동F12F12정의를 옆에 열기Ctrl + ClickCmd + Click빠른 수정 제안Ctrl + .Cmd + .

📁 파일 탐색/제어 기능Windows/LinuxmacOS파일 열기Ctrl + PCmd + P전체 검색Ctrl + Shift + FCmd + Shift + F파일 내 검색Ctrl + FCmd + F줄 이동Ctrl + GCmd + G사이드바 토글Ctrl + BCmd + B

✂️ 편집 관련 단축키기능Windows/LinuxmacOS줄 삭제Ctrl + Shift + KCmd + Shift + K줄 복사Shift + Alt + ↓/↑Shift + Option + ↓/↑줄 이동Alt + ↑/↓Option + ↑/↓자동 줄 정렬 (포맷)Shift + Alt + FShift + Option + F여러 줄 커서Alt + ClickOption + Click동일한 단어 선택 추가Ctrl + DCmd + D전체 동일한 단어 선택Ctrl + Shift + LCmd + Shift + L

$('#yourSelectId').multiselect('destroy');🎯 정리멀티셀렉트 "다시 적용" 핵심은:destroy() 또는 초기화옵션 재설정다시 .multiselect() 적용

DataTables의 Scroller 플러그인은 대량의 데이터를 처리할 때 성능을 향상시키기 위해 사용되는가상 스크롤(Virtual Scrolling) 기능입니다.즉, 수천~수만 건의 데이터가 있어도 브라우저에 실제로 렌더링되는 행의 수를 제한하여 빠르게 스크롤할 수 있게 해줍니다. 🔍 Scroller 플러그인 핵심 특징항목설명목적수천~수만 건의 대용량 데이터를 효율적으로 렌더링렌더링 방식화면에 보이는 영역만 실제 DOM에 표시 (Virtual rendering)스크롤 바 생성scrollY 높이를 기준으로 세로 스크롤 생성성능 향상전체 데이터를 클라이언트에 불러오더라도 실제 렌더링은 필요한 부분만 처리 ✅ 사용 방법1. HTMLhtml복사편집 번호 이름 직책 ..

CSS로 테이블 높이 조절하기가장 간단한 방법은 DataTable을 감싸고 있는 container에 height를 지정하고, scrollY 옵션을 설정하는 것입니다. $('#example').DataTable({ scrollY: '500px', // 또는 '60vh'처럼 viewport 기준도 가능 scrollCollapse: true, paging: false // 필요시});

ECharts 파이 차트에서 이름(label)이 같은 경우 같은 색상으로 표시되는 이유는,ECharts가 내부적으로 name 값을 기준으로 색상을 매핑하기 때문입니다.즉, data: [{name: 'A', value: 100}, {name: 'A', value: 200}] 처럼 name이 동일하면 같은 색상을 자동으로 지정합니다. ✅ 해결 방법: name을 고유하게 바꾸고, label에서는 다시 원래 이름으로 보이게 설정const rawData = [ { name: 'A', value: 100 }, { name: 'A', value: 200 }];// 실제 표시할 이름은 label에서 처리하고,// 내부 name은 유일하게 만들어줍니다.const dataList = rawData.map((item, ..