sytled-components에서 Pseudo selector로 사용되는 &을 생략한 코드들의 css가 적용되지 않는 오류를 발견했다. "styled-components": "^6.0.4" 버전은 다음과 같이 사용하고 있었다. 일단 아래에 있는 코드들을 찾아서 급한대로 모든 코드에 &을 붙여 임시적으로 해결한 상태이다. :nth-child :first-child :last-child ::before ::after :focus styled-components github issues 첫 이슈 - v5 에서 v6 으로 마이그레이션 문제 Migration problems from v5 to v6 · Issue #4096 · styled-components/styled-components Hi! Found a..

React 최적화 - React.memo 모든 코드는 github에 있습니다. React는 부모가 렌더링 될때마다 자식들도 렌더링 되는 특징을 가지고 있다. 이러한 렌더링을 최적화하는 방법은 여러가지가 있다. 그 중 React.memo, useMemo, useCallback등이 있지만 React.memo를 소개하려고 한다. React.memo React.memo는 props가 변하지 않으면 리렌더링을 스킵한다. memo로 감싼 컴포넌트는 메모이제이션으로 이전 props와 새로운 props를 비교하여 같은 값이라면 리렌더링을 하지 않고 기존 컴포넌트를 반환한다. 여기서 props를 비교하는 함수로는 Object.is 를 사용하기 때문에 Object를 props로 넘기는거 보단 primitive 타입을 넘기..

React-CSV-Download + React recoil 모든 코드는 github에 있습니다. react-csv를 선택한 이유 여러 라이브러리중 react-csv를 선택한 이유는 사용이 간편해보여서이다. react-csv의 마지막 업데이트는 2022년 1월이지만 지금도 문제없이 사용된다. react-csv 사용 Install npm install react-csv --save; Import import { CSVLink, CSVDownload } from "react-csv"; CSVLink : 클릭시 다운로드 CSVDownload : 마운트시 다운로드 보통 다운로드 버튼으로 구현을 하기 때문에 CSVLink만 사용할 것이다. Import 후 해당 컴포넌트를 사용하면 끝이다. Download me ;..

cmd + option + v : return 값 빼주기 cmd + shift + t : test 코드 바로 만들기 cmd + alt + p : 변수로 바꿔주기 f2 : 오류난 부분으로 바로 이동 pvsm : public void static main method 만들기 iter : for문 생성 cmd + option + m : 메소드로 추출 shift + shift : 하위 파일들 안에서 검색 cmd + o : 클래스 조회 cmd + b : 해당 메소드로 이동 cmd +l : 라인으로 찾기 cmd + shift + option + f7 : 변수나 메서드가 사용된 위치 전부 보기 cmd + option + [ : 괄호 시작지점으로 cmd + option + ] : 괄호 끝지점으로 cmd + 7 : 현재..

Klaytn에서 WebSocket을 연결하여 스마트컨트랙트에서 발생하는 이벤트를 구독하려고 했다. 문제는 웹소켓 연결이 시간이 지나면 계속 끊겼다. 이 문제를 정의하고 해결하려고 한다. 1. 문제 1분간 별도의 request가 없으면 끊긴다. 클레이튼 데브포럼에서 클레이튼 팀에서 직접 단 댓글이다. 하지만 나는 1분간 별도의 request가 없어도 정상적으로 연결되다가 몇 시간 후에 갑자기 끊겨 버린다. 21년 6월에 작성한 글이라 오래되서 뭔가 바꼈나 하고 다시 찾아봤다. 그랬더니 위와 같이 최근에도 같은 답변이 있었다. 주기적으로 getblocknumber를 호출하는 방법보다 더 효율적인 방법을 찾고 싶었다. 그래서 WebSocketService의 connect가 끊겼을때를 감지해서 다시 connec..

1. 문제 및 해결 클라이언트(flutter)에서 트랜잭션 사인 -> 백엔드(nodejs)에서 트랜잭션 해시값 send 위 과정에서 evm에 트랜잭션을 보내는 처리가 실패했다. 처음엔 flutter에서 트랜잭션을 잘못 생성했다고 생각하여 abi등 꼼꼼하게 확인했지만 이상이 없었다. 문제는 type2 트랜잭션의 문제였다. evm 트랜잭션의 타입 (1) type1 gas price를 설정하여 네트워크가 바쁠때는 높은 gas price부터 빠르게 처리한다. 트랜잭션 예시(nodejs) const tx = { to: to, value: parsedEthAmount, gasPrice: ethers.utils.parseUnits("20", "gwei"), gasLimit: ethers.utils.parseUnits..