내 세상

[React] CSS Button 테두리 효과 넣기

sga8 — Tue, 30 Sep 2025 19:33:15 +0900

.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;
  z-index:-1;
  border-radius: 6px;
  background: blue;
}
@keyframes ganiBorder {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

[WebStorm] 중괄호 bracket 자동 완성 해제 하기

sga8 — Thu, 27 Feb 2025 10:57:26 +0900

# 방안 1

File → Settings → Editor → Code Style → HTML

Add for JSX attributes 를 None으로 변경

# 방안 2

File → Settings → Editor → General → Smart Keys

insert paired brackets (), [], [}, <> 체크옵션 해제

[Spring Webflux][R2DBC] The server timezone is <????> that's unknown, trying to use system default timezone 조지기

sga8 — Wed, 26 Feb 2025 16:59:09 +0900

Version 정보

org.springframework.boot 3.4.2

org.jetbrains.kotlin.jvm 1.9.25

org.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.projectreactor.kotlin:reactor-kotlin-extensions")
implementation("org.jetbrains.kotlin:kotlin-reflect")
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-reactor")

문제점

에러 로그

The server timezone is <???ѹα? ǥ?ؽ> that's unknown, trying to use system default timezone

ChatGPT에게 도움을 구하면 헛소리만 함.

개인적인 생각으로 dev.miku:r2dbc-mysql의 유지보수가 20년도가 마지막이라, 패키지 자체에 문제가 있을 것이라 생각함.
대안으로, io.asyncer:r2dbc-mysql을 사용하는 방법이 있음. 최근까지 유지보수가 되고, 심적으로 안정됨.
링크: https://github.com/asyncer-io/r2dbc-mysql

아래 버전을 참고해서 사용하면 됨.

spring boot	io.asyncer:r2dbc-mysql
3.0.* and above	io.asyncer:r2dbc-mysql:1.4.0
2.7.*	io.asyncer:r2dbc-mysql:0.9.7
2.6.* and below	io.asyncer:r2dbc-mysql:0.8.2

다만, 사내 방화벽으로 인해 io.asyncer:r2dbc-mysql의 사용이 어려웠고
dev.miku:r2dbc-mysql에서 발생하는 문제를 해결함.

해결책

serverZoneId를 입력하여 해당 문제를 해결할 수 있음.

spring:
  main:
    web-application-type: reactive
  application:
    name: test_app
  r2dbc:
    url: r2dbc:mysql://12.23.34.56:1000/?serverZoneId=UTC
    username: sga8
    password: sga8!

[React] React-leaflet rectangle gradient 적용 방법

sga8 — Thu, 9 Jan 2025 11:33:23 +0900

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, mapMarkers }) => {
    ....

    const addGradient = () => {
      const colorToGradient = ["RED", "BLUE", "GREY"];
      return colorToGradient.map((item) => {
        const { start, end } = getGradientColors(item)
        return (
          <linearGradient
            id={`grad-${item}`}
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
            key={item}
          >
            <stop offset="0%" stopColor={start} />
            <stop offset="100%" stopColor={end} />
          </linearGradient>
        )
      })
    }


    _.forEach(mapMarkers, (elem) => {
      ...
    })

    L.CRS.MyCRS = L.extend({}, L.CRS.Simple, {
      transformation: new L.Transformation(1, 0, 1, 0), // ax+b, cy+d
    })
    return (
      <MapContainer
        center={mapCenter}
        zoom={mapZoom}
        zoomControl={false}
        attributionControl={false}
        maxBounds={boundsMap}
        style={{ height: '100%', fontFamily: 'IBM Plex Sans', fontWeight: 500 }}
        crs={L.CRS.MyCRS}
        maxZoom={10}
        id="map"
        ref={mapRef}
      >
        <svg>
          <defs>{addGradient()}</defs>
        </svg>
        <Marker icon={icon} position={{ lat: 0, lng: 0 }}></Marker>
        <Marker icon={icon} position={{ lat: 0, lng: 1980 }}></Marker>
        <Marker icon={icon} position={{ lat: 360, lng: 0 }}></Marker>
        <Rectangle
          bounds ={[[100,0],[10,100]]}
          pathOptions ={{fillColor: 'url(#grad-RED)'}} />
      </MapContainer>
    )
  }
)

[React] React-Select 메뉴 클릭 시, 드롭다운 메뉴 뒤 클릭 이슈

sga8 — Tue, 7 Jan 2025 09:41:57 +0900

react-select를 사용해서 Select를 구현할 때, 드롭다운 메뉴 클릭 시 뒤에 있는 다른 부분이 선택되는 이슈
아래 예시는 Select 드롭다운 메뉴 뒤에 CheckBox가 있어서 드롭다운 메뉴 중 하나 선택 시, 뒤쪽 CheckBox가 선택되는 이슈임.

1. menuPortalTarget 설정 (react-select 전용)

react-select에서는 드롭다운 메뉴가 별도의 포탈로 렌더링되기 때문에 menuPortalTarget 속성을 document.body로 설정하면 문제를 해결할 수 있습니다.

<Select
  value={this.state.temp1}
  options={this.state.temp1List}
  onChange={e => this.setState({ temp1: e })}
  menuPortalTarget={document.body} // 포탈을 body에 렌더링
  styles={{
    menuPortal: base => ({ ...base, zIndex: 9999 }), // z-index 설정
  }}
/>

이렇게 하면 드롭다운 메뉴가 항상 최상단에 렌더링되어 뒤에 있는 CheckBox와의 충돌을 방지할 수 있습니다.

AS-IS

<div>
  <div>
    <Select
      value={this.state.temp1}
      options={this.state.temp1List}
      onChange={e =>
        this.setState({ temp1: e })
      }  
    />
  </div>

  <div>
    <FormLabel>Status</FormLabel>
    <FormGroup row>
      <FormControlLabel
        control={
          <CheckBox
            checked={this.state.test1}
            onChange={this.handleChkBox("Test1")}
            color="primary"
          />
        }
        label={consts.BABO}
      />
    </FormGroup>
  </div>
</div>

TO-BE

<div>
  <div>
    <Select
      value={this.state.temp1}
      options={this.state.temp1List}
      onChange={e =>
        this.setState({ temp1: e })
      }  
      menuPortalTarget={document.body} // 포탈을 body에 렌더링
      styles={{
        menuPortal: base => ({ ...base, zIndex: 9999 }), // z-index 설정
      }}
    />
  </div>

  <div>
    <FormLabel>Status</FormLabel>
    <FormGroup row>
      <FormControlLabel
        control={
          <CheckBox
            checked={this.state.test1}
            onChange={this.handleChkBox("Test1")}
            color="primary"
          />
        }
        label={consts.BABO}
      />
    </FormGroup>
  </div>
</div>

[webpack] webpack-dev-server config 설정 (esbuild-loader, babel-loader)

sga8 — Fri, 6 Dec 2024 13:39:08 +0900

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: '/',
    clean: true,
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    historyApiFallback: true,
    // compress: true,
    host: process.env.TEST_IP,
    port: process.env.TEST_PORT,
    https: {
      cert: process.env.TEST_CERT,
      key: process.env.TEST_KEY,
    },
    proxy: {
      '/test': {
        target: `${imsiurl}`,
        changeOrigin: true,
        secure: false,
      }
    },
  },
  cache: { type: process.env.NODE_ENV !== 'prod' ? 'memory' : 'filesystem' },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'esbuild-loader',
          options: {
            loader: 'jsx',
            target: 'es2015',
          },
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: require.resolve('sass-loader'),
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[contenthash].[ext]',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@src': path.resolve(__dirname, 'src/'),
      '@resource': path.resolve(__dirname, 'public/'),
    },
  },
  plugins: [
    (() => {
      return new Dotenv({
        path: `./.env.${process.env.NODE_ENV}`,
      })
    })(),

    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: 'index.html',
    }),
  ],
}

cache 옵션

true/false (default: true)
cache.type: memory(default) / filesystem
cache.compression: 압축 여부
cache.maxAge: 생명 주기

devtool 옵션

https://webpack.kr/configuration/devtool/

Devtool | 웹팩

웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.

webpack.kr

eval-sourc-map
- fast build / high debug quality
- 개발 환경 용도 / 빌드 속도가 중요하면서도 디버깅 품질을 유지하고 싶을 때 적합
- 빌드 시간: 빠름
- 디버깅 품질: 높음
source-map
- highest debug quality
- 프로덕션 환경 / 디버깅 품질이 중요할 때 사용
- 빌드 시간: 느림
- 디버깅 품질: 매우 높음
false
- fastest build / No Debug
- 프로덕션 환경 / 보안상 장점
- 빌드 시간: 매우 빠름
- 디버깅 품질: 없음

providedExports 옵션

true/false (Default: true)
Tree Shaking: 사용되지 않는 코드를 제거하는 기법. 최종 번들 크기를 줄여줌.
트리 쉐이킹 최적화: providedExports 옵션을 사용하면, Webpack은 해당 모듈이 제공하는 특정 내보내기(export) 항목들을 이미 알고 있기 때문에, 어떤 부분이 실제로 사용되지 않는지 추적하여 제거할 수 있습니다. 이를 통해 번들 크기를 더욱 최적화할 수 있습니다.
providedExports 옵션의 작동 방식:
1. 내보내기(export) 확인: Webpack은 모듈이 제공하는 내보내기(export) 항목을 알아냅니다.
2. 트리 쉐이킹: 이후 트리 쉐이킹을 통해 사용되지 않는 내보내기 항목을 제거합니다.
  - 예를 들어, 특정 함수나 객체가 실제 코드에서 사용되지 않으면, 이를 최종 번들에서 제거합니다.
3. 최적화: 트리 쉐이킹은 번들 크기를 줄이고, 불필요한 코드를 배제하여 로딩 성능을 향상시킵니다.
예시와 더 나아가:providedExports와 트리 쉐이킹:참고:
- providedExports 옵션은 트리 쉐이킹을 더 효율적으로 작동하게 만들어, 번들 크기를 최소화하는 데 기여합니다.
- 이 옵션은 ES 모듈 기반으로 최적화되므로, ES 모듈 시스템을 사용해야 효과적으로 작동합니다.
정리하면, providedExports는 모듈의 내보내기(export) 정보가 제공될 때, Webpack이 이를 활용해 불필요한 코드를 제거하는 데 도움을 주는 설정입니다.
이 옵션은 기본적으로 Webpack 4 이상에서 트리 쉐이킹을 지원하기 위해 활성화됩니다. providedExports가 true로 설정되면, Webpack은 해당 모듈에서 제공하는 export 항목을 알고 있게 되고, 실제로 사용되지 않은 코드들은 트리 쉐이킹을 통해 번들에서 제거할 수 있습니다.
만약 lodash와 같은 라이브러리를 사용하는 경우, providedExports를 설정하면 lodash에서 실제로 사용된 메소드만 번들에 포함시키고, 사용되지 않은 메소드는 제거할 수 있습니다. 이로 인해 최종 번들의 크기가 줄어들게 됩니다.

Trouble Shooting

ReferenceError: React is not defined
- esbuild가 암시적인 React 사용을 감지못해 발생하는 에러
- index.js / app.js 파일처럼 최상단 위치의 파일에서 아래처럼 global 선언해서 해결

import React from 'react';

global.React = React;

[NodeJS] MySQL2 Error: Can't add new command when connection is in closed state. 해결

sga8 — Mon, 19 Aug 2024 18:34:05 +0900

공식 답변

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-IS	TO-BE
{ "host": "aa.bb.cc.dd, "port": 100, "user": "test_user", "password": "test_password", "database": "100", "connectionLimit": 100, "queueLimit": 0, "waitForConnections": true, "dateStrings": "date", "multipleStatements": true, "charset": "utf8_general_ci" }	{ "host": "aa.bb.cc.dd", "port": 100, "enableKeepAlive":true "user": "test_user", "password": "test_passvword!", "database": "100,v "connectionLimit": 100, "queueLimit": 0, "waitForConnections": true, "dateStrings": "date", "multipleStatements": true, "charset": "utf8_general_ci" }

[NestJS] mysql connection pool Cannot read properties of undefined 이슈 조치

sga8 — Thu, 4 Jul 2024 07:08:18 +0900

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 };

[Javascript] Regex/Regular Expression/정규표현식

sga8 — Thu, 25 Apr 2024 14:26:06 +0900

RegExp.prototype.exec	String.prototype.match
문자열에 대해 정규식과 일치하는지 탐색 후 결과를 배열로 반환함. (일치하지 않을 경우, null 반환) example) 정규식.exec(문자열)	정규식으로 문자열에서 일치하는지 탐색 후 결과를 배열로 반환함. (일치하지 않을 경우, null 반환) example) 문자열.match(정규식)

차이점1. g 플래그 사용

Case1) 단순 정규 표현식

const execTest = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec("2024-04-15");
console.log(execTest)

// print log
// [
//   '2024-04-15',
//   '2024',
//   '04',
//   '15',
//   index: 0,
//   input: '2024-04-15',
//   groups: [Object: null prototype] { year: '2024', month: '04', day: '15' }
// ]

console.log(execTest.groups)
// print log
// { year: '2024', month: '04', day: '15' }

console.log(execTest.groups.year)
// print log
// 2024

const matchTest = "2024-04-15".match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
console.log(matchTest)

// [
//   '2024-04-15',
//   '2024',
//   '04',
//   '15',
//   index: 0,
//   input: '2024-04-15',
//   groups: [Object: null prototype] { year: '2024', month: '04', day: '15' }
// ]

Case2) g플래그 사용 정규식

- exec의 경우, 동일한 결과

const execTest = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g.exec("2024-04-15");
console.log(execTest)

// print log
// [
//   '2024-04-15',
//   '2024',
//   '04',
//   '15',
//   index: 0,
//   input: '2024-04-15',
//   groups: [Object: null prototype] { year: '2024', month: '04', day: '15' }
// ]

console.log(execTest.groups)
// print log
// { year: '2024', month: '04', day: '15' }

console.log(execTest.groups.year)
// print log
// 2024

- match의 경우, 결과 배열만 반환

const matchTest = "2024-04-15".match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g);
console.log(matchTest)

// [ '2024-04-15' ]

차이점2. 캡처 그룹(Capture group) 사용 시, 반복 검색 여부

- exec의 경우, 첫 매칭 정보만 반환함

const execTest = /(?<babo>\d{4})/g.exec("2024-2025-2026");
console.log(execTest);

// print log
// [
//   '2024',
//   '2024',
//   index: 0,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2024' }
// ]

- match의 경우, 모든 매칭 정보를 반환함.

const matchTest = "2024-2025-2026".match(/(?<babo>\d{4})/g);
console.log(matchTest);

// print log
// [ '2024', '2025', '2026' ]

차이점3. 반복문을 통한 exec 사용

- exec의 경우, 반복문을 통해 사용했을 경우 반환 값과 lastIndex를 계속해서 갱신함.
- 더 이상 찾을 수 없을 경우, null 반환 및 lastIndex 값을 0으로 초기화함.

const execRegex = /(?<babo>\d{4})/g;
while((result = execRegex.exec("2024-2025-2026")) !== null) {
    console.log(result)
    console.log(`Found ${result[0]}. Next starts at ${execRegex.lastIndex}`)
}


// print log
// [
//   '2024',
//   '2024',
//   index: 0,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2024' }
// ]
// Found 2024. Next starts at 4


// [
//   '2025',
//   '2025',
//   index: 5,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2025' }
// ]
// Found 2025. Next starts at 9


// [
//   '2026',
//   '2026',
//   index: 10,
//   input: '2024-2025-2026',
//   groups: [Object: null prototype] { babo: '2026' }
// ]
// Found 2026. Next starts at 14

장점: index, lastIndex, input 같은 데이터 활용 가능.
단점: 반복문을 통한 exec 사용해야 여러 반환값 탐색 가능.

exec와 match의 장/단점을 골고루 합친 String.prototype.matchAll 기능도 있음.

참고) https://bsscl.tistory.com/84

useRef Array로 사용하기

sga8 — Thu, 4 Apr 2024 17:16:46 +0900

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