코드노트

useTransition이란?useTranstion은 React18에서 도입된 Concurrent Rendering 기능의 일부로, UI 반응성과 성능을 개선하기 위해 "덜 중요한 작업을 늦춰서 처리" 하는 훅이다. 사용자가 빠르게 반응을 체감해야하는 작업이 있다면 가벼운 작업과 무거운 작업을 분리 할 수 있으며, UI의 지연(Lag)을 줄이는데 효과가 있다. - 가벼운 작업 예시 : 버튼 클릭, 입력 필드 타이핑 등- 무거운 작업 예시 : 목록 필터링, 차트 업데이트 등언제 사용할까?대량 데이터 필터링, 렌더링, 정렬애니메이션, 차트, 목록 등 복잡한 UI 업데이트사용자의 입력 반응은 빠르게 결과는 나중에 처리하고 싶을 때사용하지 않아도 되는 경우상태 업데이트가 가벼운 경우비동기 fetch 작업 위주로..

ethers.js- 이더리움 블록체인과 상호작용 하기 위한 javascript 라이브러리- 가볍고 모듈화가 되어있어 Node.js 브라우저 환경에서 모두 사용 가능하다.- Provider, Signer, Contract 등 유틸리티를 제공하여 블록체인 애플리캐이션 개발을 단순화할 수 있다.- DApp 개발 시 Ethereum 네트워크와 상호작용하려면 ethers.js 라이브러리의 Provider를 사용해야 한다. Provider의 개념과 역할- Provider는 이더리움 네트워크와 데이터를 교환화기 위한 인터페이스이다.역할: 네트워크 상태 조회, 블록 정보 가져오기, 트랜잭션 확인 등서명이나 전송은 직접 처리하지 않는다.ethers.js에서 여러 종류의 Provider를 지원하며, 가장 일반적으로 사용되..

Wagmi- react, typescript를 지원하는 라이브러리로 이더리움 어플리케이션을 구축할 때 지갑 연결 및 체인 데이터 관리에 있어서 직관적이고 효율적으로 처리할 수 있도록 도와주는 라이브러리이다. 주요 특징- React Hook 기반 설계를 통해 리액트에서 쉽게 사용 가능하다.- typescript로 구현되어 있다.- 다양한 지갑 지원 ( MetaMask, WalletConnect, Coinbase Wallet 등 여러 지갑 연동 )- 다양한 체인 지원 ( 이더리움 외에도 Polygon, Arbitrum 등 다양한 체인 지원 )- Type-safe API 지원Type-safe APIabi 기반으로 스마트 계약 함수 호출import { useContractRead, useContractWrite..

반응형 디자인을 하면서 생긴 문제를 해결하면서 알게된 tailwindCSS의 addvariant를 정리하려 한다.현재 사내 프로젝트에서는 네이티브로 작업을 하지 않고 있다. 그렇다보니 반응형으로 작업을 진행하면서 발생한 이슈이다. 많은 프로젝트에서도 hover를 줄텐데 모바일에서는 hover를 할 수 없기에 제외시키는 코드를 주어야했다.만약 hover를 제외시키지 않는다면 터치가 되었을때 hover에 주었던 css값들이 그대로 남아있게 된다. 위 이미지를 보게 되면 hover로 주었던 배경색이 그대로 남게 된다.이 문제를 해결하기위해서는 css 미디어쿼리를 사용해서 hover를 지원하고 있는 기기에서만 css가 적용되도록 지정할 수 있었다. screens raw Tailwind Hover 모바일에선 제외..

Race Condition?- 두 개 이상의 작업이 동시에 실행되거나 예상치 못한 순서로 완료될 때 발생하는 문제점이다. 리액트를 사용하면서 한번쯤은 만나본 문제이기도 하다. 이로 인해서 데이터 상태가 예측할 수 없는 상태로 변경될 수 있다. 특히 비동기 코드에서는 필수적으로 생각하고 코드를 작성해야한다! 그럼 Race Condition는 왜 일어나며 어떤 문제점을 가지고 있을까? - 여러 비동기 작업이 동시에 실행되면서 서로 경쟁하는 상황이 발생할 수 있다. 비동기 작업이 순차적으로 이뤄지지 않고 병렬적으로 실행되기 때문에 동시에 업데이트가 된다면 예상치 못한 상태 변경이 발생할 수 있다. - 리엑트를 사용할 때 컴포넌트가 비동기적으로 데이터를 가져오고 동시에 setState를 통해 상태를 업데이트를 ..

next.js 에서 jest를 설정하려면 바로 시작할 수 있는 방법도 있지만next를 설치하고 jest를 추가하는 방법을 기록해보려고 한다.  방법은 어렵지 않고 config, setup ... 등 세팅값만 맞춰주면 바로 jest를 실행하고 개발이 가능했다. Testing: Jest | Next.jsLearn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.nextjs.orgQuickstart$npx create-next-app --example with-jest with-jest-app$yarn create next-app --example with-jest with-jest-app$npm create next-app --ex..

디자인 패턴은 면접을 볼때 많이 물어보는 질문중 하나였다. 어떻게 보면 여러 디자인 패턴이 있지만 처음 디자인 패턴이라는 이야기를 들었을때에는 디자인이라는 단어 때문에 UI를 다루는 패턴인가? 라는 생각을 했던것 같다. 비전공자인.. 특히 나는 디자이너로 시작하여 개발자로 이직을 했다보니 더 그렇게 생각했었다. 그래서 첫 면접에서 당당히 나는 아토믹 패턴을 구구절절 이야기했었던 기억이 있다...ㅋ 그렇게 프론트엔드 개발을 공부하면서 디자인 패턴에 대해서 많이 알게 되었고, 현재 회사에서도 여러 패턴들을 적용하며 코드를 보다보니 내가 몰랐던 패턴들도 같이 정리를 해보려고 한다!생성 패턴 (Creational)- 객체의 생성 방식에 중점을 둔다. - 객체 생성 과정에서 복잡성을 줄이고, 코드의 유연성과 재사..

실시간 이벤트처리 및 웹소켓 연결을 하게 되면서 웹소켓을 바로 사용하는게 아니라 StompJS, SockJS를 사용하는 것을 알게 되었다.기존 서비스에서 사용되고 있는 코드들을 해석하면서 꼭 알고 넘어가야하는 것들을 정리 해보려고 한다. WebSocket- http의 단방향 통신(클라이언트가 서버로 요청을 보내고, 서버에서 응답을 받는)과 다르게 서버와 양방향으로 연결하는 것을 말한다.클라이언트가 서버로 요청을 보내게되면 서버의 응답을 받고 끝나는 것이 아닌 연결이 계속해서 유지가 된다.Rest API와 WebSocket 관련한 내용들은 따로 정리를 해둔 링크를 참고하면 좋을 것 같다. REST API vs WebSocket 차이점 정리 feat.Polling, LongPolling, Streaming,..

리액트에서 utils, 컴포넌트, 페이지 들을 작업하면서 모듈로 작업을 했을때 ../../../ 경로를 절대경로로 하는 방법을 알아보자. 먼저 바벨 플러그인을 설치 babel-plugin-module-resolver Module resolver plugin for Babel. Latest version: 5.0.2, last published: 2 days ago. Start using babel-plugin-module-resolver in your project by running `npm i babel-plugin-module-resolver`. There are 1423 other projects in the npm registry using babel-plu www.npmjs.com npm i ..

리액트를 하면서 useRef를 사용하며, 여러개의 Ref를 사용하게 된다면 어떻게 해야할까? 리액트 네이티브를 공부하면서 input을 컴포넌트로 관리하다가 Ref를 사용하여 다음 input으로 넘겨야했다. 하나의 refRef input컴포넌트 내에서 관리중이였고, 외부에서 컴포넌트에 Ref를 또 넘겨주어야했다. Ref를 2개를 사용할 수는? 있다. ForwardedRef를 사용하자. 더군다나 타입스크립트로 작업중이라면 머리가 더 복잡해질 수 있지만 이번에 컴포넌트를 만들면서 어느정도의 개념이 잡힌것 같다. mergeRefs 함수 function mergeRefs(...refs: ForwardedRef[]) { return (node: T) => { refs.forEach(ref => { if (ref &..