[javascript/react] 리액트 리스트(테이블) 항목 드래그하기(with react-beautiful-dnd) #오픈소스 - 잘만든 드래그 라이브러리 https://github.com/atlassian/react-beautiful-dnd GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React Beautiful and accessible drag and drop for lists with React - GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with Reac..
[javascript/react] React.lazy / Suspense에 대하여 이해하기 lazy는 지연로딩이란 의미로, 데이터를 모두 한번에 로드시키는 것이 아니라, 현재 보이는 화면만 로드 시켜주면서 성능을 향상 시키는 것을 의미한다. import './App.css'; import { BrowserRouter, Route,Switch } from 'react-router-dom'; import React, { lazy, Suspense } from 'react'; const loading = () => Loading; const History = lazy(() => import('./views/History')); const Test = lazy(() => import('./views/Test')..
#react-sortablejs를 이용하여 구현하였다 https://github.com/SortableJS/react-sortablejs GitHub - SortableJS/react-sortablejs: React bindings for SortableJS React bindings for SortableJS. Contribute to SortableJS/react-sortablejs development by creating an account on GitHub. github.com #설치 npm install --save react-sortablejs sortablejs #구현 import React, { useState } from "react"; import { ReactSortable } fr..
#html #javascript var player = videojs("myPlayer", { sources: [{ src: "/resources/01.mp4", type: "video/mp4" }], poster: "/resources/poster.png", controls: false, playsinline: false, fluid: true, // fit preload: "metadata", }); //events player.on("loadedmetadata", () => { console.log("loadedmetadata"); }); player.on("loadeddata", () => { console.log("loadeddata"); }); player.on("canplay", () => ..
[html/css/canvas] 캔버스 사이즈 조정하기(width/height) html에서 width height의 의미와 css를 통한 width height의 의미가 다르다 1차적으로 html값으로 설정이 된 후, css를 통하여 리사이징 된다 예를들어 html에서 2560x1440으로 설정 한 후 css에서 1920x1080으로 설정하였다면, 실제 사이즈는 1920x1080이지만, 컨텐츠 사이즈는 2560x1440일것이다
크롬에서는 기본 기능이 동작하지 않아서, 스크린 사이즈와 브라우저사이즈를 체크하여 확인하였다 addEventListener('resize', (event) => { if(window.innerHeight == window.screen.height){ console.log("full screen : o"); } else { console.log("full screen : x"); } }); #fullsize #full screen #풀스크린 #전체화면 #javascript #자바스크립트
[css/javascript] 애니메이션 연속으로 실행하기 @Keyframes에서 css에 연결된 애니메이션 실행 시 클래스를 remove / add 를 통해 애니메이션을 제어하면 한번 실행 후 더 실행이되지 않는다. 그럴때 다음과 같이 하면 문제가 해결 된다 .test { animation: fadein 2s; } @keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } #offsetWidth를 통하여 해결가능하다 const body = document.getElementById("body"); body.classList.remove("test"); body.offsetWidth; body.classList.a..
[파이썬/python] 간단한 메크로 구현 with pyautogui #pyautogui.locateOnScreen - 해당 이미지 좌표 가져오기 #pyautogui.center - 해당 이미지의 중앙 좌표 가져오기 #pyautogui.press - 특정 버튼을 누른다 #pyautogui.moveTo - 특정 좌표로 이동한다 #pyautogui.scroll - 해당 좌표만큼 스크롤링 한다 #pyautogui.click - 마우스 클릭한다 #pyautogui.mouseUp - 마우스 up #pyautogui.mouseDown - 마우스 down import pyautogui as pag from datetime import datetime # 특정 시간에 진입 while True: now = datetim..
[파이썬/python] Topmost 구현(어플리케이션 최상단으로 가져오기)
[파이썬/python] Topmost 구현(어플리케이션 최상단으로 가져오기) #타이틀 이름 확인하기 아래 어플을 받아서, 프로세스 이름 확인하기 #정의 def setFocus(title_reg): app = pwa.application.Application() t = title_reg try: handle = pwa.findwindows.find_windows(title_re=t)[0] app.connect(handle=handle) except: window = app.window(handle=handle) try: window.set_focus() except Exception as e: print('[error]setFocuse : ' + str(e)) return window #구현 setFocu..
[spring/스프링부트] 드라이버가 ssl secure sockets layer 암호화를 사용하여 sql sever로 보안 연결을 설정할 수 없습니다. 오류: unexpected rethrowing . 발생 시 해결 방법 해결방법은 설정파라미터 jdbc-url 에서 SQL Server TLS 인증서의 유효성을 검사하지 않아도 되는 인증된 서버라는 값(encrypt=true;trustServerCertificate=true)을 설정해주면 된다. # encrypt 및 trustServerCertificate를 설정 # application.yml or application.properties url: jdbc:sqlserver://127.0.0.1:1433;DatabaseName=dbname;encrypt..