코드노트

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

현제 사이드프로젝트로 간단한 앱을 만들면서 TextInput으로 회원가입, 로그인을 구현하였다. 기능들이 기존 html input태그와 많이 달랐고 사용할 수 있는 속성들도 많았던거 같다. pwa도 진행을 해봤지만 역시 일반적으로 리액트로 진행하는것보다 네이티브가 좋은것 같다... 리액트 네이티브를 하면서 느낀거지면 모바일에 최적화되어있는것도 있지만 기본적으로 제공하는 속성들만 잘 활용하더라도 간단한 앱에서 사용하는것들은 구현하기가 쉬울것 같은 느낌..! onChangeText: 텍스트가 변경될 때마다 호출되는 함수를 설정 placeholder: 입력 필드에 표시되는 텍스트를 설정 placeholderTextColor: placeholder 텍스트의 색상을 설정 editable: 사용자가 텍스트를 입력..

리액트 네이티브를 공부하고 있는데 svg를 import하여 사용할 수 있게 설정을 하면서 문제가 생겼다. png를 사용하는 경로들을 못찾는 문제.. 다들 리액트 네이티브 svg를 구글에 검색하고 react-native-svg / react-native-svg-transformer 라이브러리를 사용할 것 같다. 나도 그랬고.. GitHub - software-mansion/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects. SVG library for React Native, React Native Web, and plain React web projects. - software-mans..