내 세상

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

Error: PostCSS received undefined instead of CSS string npm install node-sass@4.14.1

Click 후 tooltip 사라지지 않는 이슈 조치 방법 1. ClickAwayListener https://mui.com/base/api/click-away-listener/ ClickAwayListener API - MUI Base API reference docs for the React ClickAwayListener component. Learn about the props, CSS, and other APIs of this exported module. mui.com ClickAwaayListener로 외부 컨텐츠 click을 detect하고, tooltip을 conditional rendering으로 제거하는 방법

// 흐음 1. if (navigator.clipboard) { // (IE는 사용 못하고, 크롬은 66버전 이상일때 사용 가능합니다.) navigator.clipboard .writeText(text) .then(() => { alert("클립보드에 복사되었습니다."); }) .catch(() => { alert("복사를 다시 시도해주세요."); }); } else { // 흐름 2. if (!document.queryCommandSupported("copy")) { return alert("복사하기가 지원되지 않는 브라우저입니다."); } // 흐름 3. const textarea = document.createElement("textarea"); textarea.value = text; textar..

https://sungtae-kim.tistory.com/24

EX) [2021-12-10][16:04:32] 와 같은 Date에 대괄호가 쳐져있을 때의 처리 대괄호를 제거 하여 내부의 값을 빼어내기 위함. let splitDate = exampleDate.match(/\[[^\]]*\]/g); const startDate = splitDate[0].replace(/[\[\]]/g, ""); const startTime = splitDate[1].replace(/[\[\]]/g, ""); 위의 예시 [2021-12-10][16:04:32] 를 적용할 경우, splitDate = [ "[2021-12-01]", "[16:04:32]" ]; // Array startDate = "2021-12-01"; startTime = "16:04:32";

React 기반 프로젝트에서 Context Menu를 사용하기 위해 기존에 react-contextmenu(github.com/vkbansal/react-contextmenu)를 사용하였다. 그러나, 속도 및 기타 이슈 등으로 인해 개선을 위해 react-contexify(github.com/fkhadra/react-contexify)로 변경하게 됨. npm trends를 통해 react-contextmenu와 react-contexify를 비교해보았을 때, react-contextmenu가 월등히 높음. (www.npmtrends.com/react-contexify-vs-react-contextmenu) 사용해본 결과로, react-contextmenu의 경우 depth가 1인 메뉴를 보여주는데는 딜레..

ko.reactjs.org/docs/react-dom-server.html ReactDOMServer – React A JavaScript library for building user interfaces ko.reactjs.org ReactDOMServer – React A JavaScript library for building user interfaces ko.reactjs.org renderToString() ReactDOMServer.renderToString(element) React 엘리먼트의 초기 HTML을 렌더링합니다. React는 HTML 문자열을 반환합니다. 빠른 페이지 로드를 위해 초기 요청 시에 서버에서 HTML을 생성하여 마크업을 보내거나, 검색 엔진 최적화를 위해 검색 엔진이 ..

React Dialog에서 Pop-up(sweetalert2 사용)을 띄웠을 때, focus를 잡지 못해 text/textarea 입력이 불가능함. Dialog에서 sweetalert2/swal에 대한 focus를 위해서는 Dialog의 Option을 제어해야함. disableEnfoceFocus={true} 로 설정해줌으로써 해결 가능. sweetalert2 뿐 아니라 그 외의 toast/popup/alert 관련 모듈에서 공동적으로 발생할 수 있는 문제로 보임. 구글링했을 때 특정한 결과는 나오지 않지만, bootstrap에서 유사한 문제가 발생하는 것으로 유추됨. 해당 옵션을 알지 못하고 Swal/Sweetalert2에서 option을 통해서 해결하려고 했으나 해결 안됨. Swal.getContai..

Browser 별로 fetch/Ajax 요청에 대한 Connection 제한이 있다. 이러한 이슈는 SPA 형태의 앱에서 문제를 일으킨다. (크롬 기준) 최대 6개의 API만 연결이 되기 때문에 10개의 API를 요청했을 때, 6개의 API를 먼저 처리하고 남은 4개의 API를 처리한다. 여기서 문제가 발생하는 부분은 먼저 요청한 6개의 API가 응답이 없을 때, 무작정 Max Time out (정확히 어디서 설정하는지 현재 확인 중/크롬 기준 default 120초로 추정/20.05.14)을 대기한다. 그런 다음, 남은 4개의 API 요청이 처리된다. IE 7: 2 connections IE 8 & 9: 6 connections IE 10: 8 connections IE 11: 13 connection..

React Official Reference에서는 Function Component + Hooks 사용을 권장함. Class component Function component 장점 render 함수 필수 선언이 편리함. 메모리 자원 덜 사용함. Build/Deploy 후 결과물 파일 크기가 더 작음. 단점 state / Lifecycle API 사용 불가능. → React v16.8 이후 Hooks 도입으로 해결됨. 화살표 함수(Arrow Function) - ES6 문법에서 함수를 표현하는 새로운 방식. - 기존 function과 사용 용도가 조금 다름. 주로 함수를 파라미터로 전달할 때 유용함. 일반 함수(Normal Function) 화살표 함수(Arrow Function) 샘플 코드 functi..

JSX - Class Component에서 Render를 통해 return하는 코드 또는 Function Component에서 return하는 코드를 의미함. - Javascript의 확장 문법/XML과 유사 - 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 babel을 사용하여 일반 Javascript 형태로 변환됨 - babel을 통한 변환 전 code (Before) function App() { return ( Hello react ); } - babel을 통한 변환 후 code (After) function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } ..