내 세상

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

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

환경 - Backend: NodeJS (Express) - Frontend: React - Database: MySQL 문제 - Update Query를 각기 다른 여러개의 where 조건으로 매우 많이 진행해야하는 상황이 생김. - 개별로 진행할 경우, Update Timing이 다르기 때문에 실시간 정보를 가져옴에 있어 Delay가 생김. 해결 - Update의 경우 여러개의 where 조건을 사용하여 일괄적으로 사용이 어렵다. - 이때, INSERT INTO 구문을 UPDATE 구분처럼 사용할 수 있는 방안이 있음!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! - INSERT INTO를 했을 때, 기존에 Primary key가 겹치는 데이터가 있을 때 특정 칼럼을 업데이트하는 방식임. 만약..

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을 생성하여 마크업을 보내거나, 검색 엔진 최적화를 위해 검색 엔진이 ..

개발환경 Server NodeJS(Express) socket.io : 2.3.0 Client ReactJS socket.io-client : 2.3.0 socket.io document - socket.io/docs/v3 Client Side - ReactDOM에서 Root에 해당하는 부분에 아래와 같은 설정값으로 client side websocket 선언함. this.socket = socketIOClient(webSocket_Info, { query: { userId: "sga", part: "tistory", }, transports: ["websocket"] }); - 그 외의 Component에서 일시적으로 WebSocket 관련 동작이 필요할 경우, 파라미터로 넘겨서 사용함. - Ex) R..

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")); } ..