내 세상

.GaniButton.on { background: linear-gradient(to right, #38bdf8, #7dd3fc, #60a5fa); color: #fff;}.GaniButton.on::before { content:""; // 입력필수 position: absolute; top:-4px;left:-4px;right:-4px;bottom:-4px; background: red; background-size: 600% 600%; animation: ganiBorder 6s linear infinite;}.GaniButton.on::after { content:""; position: absolute; top:2px;left:2px;right:2px;bottom:2px; ..

보호되어 있는 글입니다.

# 방안 1File → Settings  → Editor → Code Style → HTML Add for JSX attributes 를 None으로 변경 # 방안 2 File → Settings  → Editor → General → Smart Keys insert paired brackets (), [], [}, 체크옵션 해제

Version 정보org.springframework.boot 3.4.2org.jetbrains.kotlin.jvm 1.9.25org.jetbrains.kotlin.plugin.spring 1.9.25 implementation("org.springframework.boot:spring-boot-starter-data-r2dbc") implementation("dev.miku:r2dbc-mysql:0.8.2.RELEASE") implementation("org.springframework.boot:spring-boot-starter-webflux") implementation("com.fasterxml.jackson.module:jackson-module-kotlin") implementation("io..

React-Leafet 사용 시, 동적인 정보를 보여주기 위해 Rectangle을 Customize해서 사용하고 있음. 다만, Rectangle은 SVG 요소이기 때문에, fillColor를 Gradient로 사용이 불가하고 단색으로만 가능함. 하지만, svg defs 선언을 통해서 SVG 요소에도 Gradient를 적용할 수 있는 방안을 발견 MapContainer 내부에 svg-defs를 통해 먼저 linearGradient를 먼저 설정한다. 그리고 Rectangle이나 SVG 요소에서 fillColor를 'url(#grad-RED)' 와 같은 형식으로 사용하면 됨 const MyContainer = memo( ({ onMove, mapCenter, mapZoom, showDialogWithData..

react-select를 사용해서 Select를 구현할 때, 드롭다운 메뉴 클릭 시 뒤에 있는 다른 부분이 선택되는 이슈 아래 예시는 Select 드롭다운 메뉴 뒤에 CheckBox가 있어서 드롭다운 메뉴 중 하나 선택 시, 뒤쪽 CheckBox가 선택되는 이슈임. 1. menuPortalTarget 설정 (react-select 전용)react-select에서는 드롭다운 메뉴가 별도의 포탈로 렌더링되기 때문에 menuPortalTarget 속성을 document.body로 설정하면 문제를 해결할 수 있습니다. this.setState({ temp1: e })} menuPortalTarget={document.body} // 포탈을 body에 렌더링 styles={{ menuPortal: bas..

webpack dev server 매우 느린 이슈로 인해 해결방안1. babel-loader → esbuild-loader 변경2. webpack config 수정 module.exports = { mode: 'development', entry: ['@babel/polyfill', './src/index.js'], devtool: false, optimization: { providedExports: process.env.NODE_ENV === 'prod', }, output: { pathinfo: false, filename: 'bundle.js', path: path.resolve(__dirname + '/dist'), publicPath: '/', cle..

공식 답변https://github.com/sidorares/node-mysql2/issues/1302  we should probably make it default option. Currently when remote side closes the socket the client might not see it, see net.setKeepAlive  AS-ISTO-BE{    "host": "aa.bb.cc.dd,    "port": 100,    "user": "test_user",    "password": "test_password",    "database": "100",    "connectionLimit": 100,    "queueLimit": 0,    "waitForConnections..

NestJS + mysql2 사용시, mysql 객체가 TypeError: Cannot read properties of undefined (reading 'createPool') 에러가 발생하는 경우가 있음. import mysql from "mysql2/promise";const _dbConn = mysql.createPool({});export { _dbConn }; 위와 같이 구현한 경우에 해당 에러가 발생함. 조치 방법은 아래와 같이 as로 import 구문을 변경해주면 됨. import * as mysql from "mysql2/promise";const _dbConn = mysql.createPool({});export { _dbConn };

RegExp.prototype.execString.prototype.match문자열에 대해 정규식과 일치하는지 탐색 후 결과를 배열로 반환함. (일치하지 않을 경우, null 반환)example) 정규식.exec(문자열)정규식으로 문자열에서 일치하는지 탐색 후 결과를 배열로 반환함. (일치하지 않을 경우,  null 반환)example) 문자열.match(정규식)   차이점1. g 플래그 사용Case1) 단순 정규 표현식const execTest = /(?\d{4})-(?\d{2})-(?\d{2})/.exec("2024-04-15");console.log(execTest)// print log// [// '2024-04-15',// '2024',// '04',// '15',// inde..

https://velog.io/@cmk0905/React-useRef

https://www.material-react-table.com/ Material React Table V2 Material React TableFree MITBuilt on top of TanStack Table V8 and Material UI V5, Material React Table (MRT) is a batteries-included React table library that attempts to provide all the table features you need while trying to stay as highly performant and www.material-react-table.com column 설정 { accessorKey: "TestColumn1", // 데이터에서 ke..

ReactJS + Webpack5 + React-refresh 조합으로 변경 중 굉장히 심각한 사태 발발함. path.js:25 Uncaught ReferenceError: process is not defined at eval (path.js:25:1) at ./node_modules/path/path.js (main-9dd8e511eae3f7488f14.js:5817:1) at options.factory (main-9dd8e511eae3f7488f14.js:9481:31) at __webpack_require__ (main-9dd8e511eae3f7488f14.js:8908:32) at fn (main-9dd8e511eae3f7488f14.js:9139:21) at eval (main.js:2:1)..

https://www.npmjs.com/package/redis redis A modern, high performance Redis client. Latest version: 4.6.13, last published: 15 days ago. Start using redis in your project by running `npm i redis`. There are 9607 other projects in the npm registry using redis. www.npmjs.com https://www.npmjs.com/package/ioredis ioredis A robust, performance-focused and full-featured Redis client for Node.js.. Late..

[NodeJS] CentOS 7 환경 NodeJS Offline 설치 Local PC에서 nodejs 다운로드 (아래 주소에서 버전에 맞게 변경하여 입력) https://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.xz 해당 파일 이동 후 CentOS 7 환경에서 압축해제 sudo xz -d node-v16.15.1-linux-x64.tar.xz sudo tar xf node-v16.15.1-linux-x64.tar sudo cp -r node-v16.15.1-linux-x64 /opt/nodejs/node-v16.15.1-linux-x64 NodeJS 설치 후 환경 설정 sudo vi ~/.bashrc export PATH="$PATH:/opt/node..

VS Code 사용 중 Eslint가 동작하지 않은 이슈가 발생함. 우측 하단에 Prettier가 아닌 ESLint가 떠있어야 하는데, 다르게 떠있는 상황 VS Code 에서 "Ctrl + Shift + P" 를 통해 eslint를 검색하면 5가지의 선택 항목이 나옴. (VS Code 1.7.0 기준) 1) ESLint: Show Output Channel 2) ESLint: Restart ESLint Server 3) ESLint: Migrate Settings 4) ESLint: Create ESLint configuration 5) ESLint: Fix all auto-fixable Problems 위 기능들을 하나씩 실행했을 때, 아래와 같은 결과를 확인할 수 있었음. 동작 오류메시지 1) ESL..