개발

[JPA] N+1의 모든 것

JPA N + 1의 모든것 모든 코드는 github에 있습니다. JPA를 사용하면 한번쯤 접하게 되는 N+1 문제에 대해서 다양한 해결책을 공부하려고 한다. 1. N + 1 문제란? 연관 관계가 설정된 엔티티를 조회(1)할 경우 조회된 데이터의 갯수(n)만큼 연관관계의 조회 쿼리가 추가로 발생하여 1 + n개 만큼의 쿼리가 발생하는 현상이다. 2. 프로젝트 기본 세팅 (1) Member.java @Entity @Getter @NoArgsConstructor(access = AccessLevel.PROTECTED) @ToString(of = { "id", "username" }) public class Member { @Id @GeneratedValue(strategy = GenerationType.IDE..

[React] styled-components에서 Pseudo selector &을 생략하면 오류

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 최적화

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] react-csv + recoil 로 csv다운로드 구현

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

[Blockchain] Klaytn WebSocket 끊김 후 재연결 (spring boot)

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

[Blockchain] 언어별 web3 차이로 트랜잭션 해시값 차이

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