투자유의 개발 블로그

CRA로 세팅한 리액트 프로젝트에서 test를 위한 eslint 설정입니다. eslint vscode 확장 플러그인 설치 테스트를 위한 플러그인 설치 npm i -D eslint-plugin-testing-library eslint-plugin-jest-dom .eslintrc { "plugins": [ "testing-library", "jest-dom" ], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 에러가 발생한 코드에 커서를 올려보니, render함수의 리턴을 destructing해서 쿼리함수(getByText)를 가져오는 것을 피하고 scree..

Chrome API extension과 현재 브라우저의 탭에서 방문 중인 웹 사이트 간 인터렉션을 위해 필요합니다. Content scripts 웹 페이지의 컨텍스트에서 실행되고 DOM 엘리먼트, 객체 및 메서드에 전체 엑세스 권한이 있는 js 파일입니다. Messaging passing API를 이용해서 react로 만든 extension과 컨텐츠 스크립트가 인터렉션할 수 있습니다. 메세징 API와 인터렉션하기 위해서 3가지 사항이 필요합니다. 1. Access to the Chrome API 2. Permissions 3. Content scripts Access to the Chrome API 타입스크립트에서는 @types/chrome 를 설치합니다. npm install @types/chrome ..

메타마스크 익스텐션 소스코드를 포크해서 실행해보려고 했는데, 실행환경을 노드 버전 14로 맞춰주어야 했습니다. M1 macbook에서는 node v16 미만 버전에선 패키지 인스톨 과정에서 종종 에러가 발생하는 것 같습니다. 메타마스크 안내에 따라 프로젝트 셋업을 진행하는데 아래와 같은 에러가 발생하였습니다. $ yarn setup error An unexpected error occurred: "https://registry.yarnpkg.com/cid-tool/-/cid-tool-0.3.0.tgz: incorrect data check". info If you think this is a bug, please open a bug report with the information provided in ..

global.d.ts declare global { interface Window { ethereum?: any; } namespace NodeJS { interface ProcessEnv { NEXT_PUBLIC_ERC721_CA: string; } } } export const ethereum = window.ethereum;tsconfig.json { ... "include": [ "global.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx" ], ... }

const decimal2Input = (e) => { e.target.value = e.target.value.replace(/(\.\d{2})\d+/g, "$1"); if (parseFloat(e.target.value) >= parseFloat(sellPrice)) { alert("참여 금액은 판매 금액보다 작아야 합니다."); e.target.value = ""; } }; export const isHangul = (value) => { const regExp = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g; return regExp.test(value); }; export const toInputAlphabetDecimal = (e) => { e.target.value = ("" + e.target.value..

Data fetching library DB가 가진 최신 데이터를 중복되지 않게(최적화하여) 가져오는 방법을 제공. docs가 워낙 잘되어 있어서 여기선 mutate에 관한 내용만 가볍게 남기겠다. 참고: https://swr.vercel.app mutate import useSWR from 'swr' function Profile () { const { data, mutate } = useSWR('/api/user', fetcher) return ( My name is {data.name}. { const newName = data.name.toUpperCase() // 데이터를 업데이트하기 위해 API로 요청을 전송 await requestUpdateUsername(newName) // 로컬 데이터를..

// keyof + generic + extends & type lookup interface IPerson { name: string; age: number; } const person: IPerson = { name: "Hyun", age: 33, }; const getProp = (obj: IPerson, key: string | number): string | number => { return obj[key]; // Error }; const getProp1 = (obj: IPerson, key: keyof IPerson): IPerson[keyof IPerson] => { return obj[key]; }; const getProp2 = (obj: T, key: K): T[K] => { retu..

// generic vs. any function hello(message: any): any { return message; } console.log(hello('Hyun').length); console.log(hello(33).length) function helloGeneric(message: T): T { return message; } console.log(helloGeneric('Hyun').length); // T는 string console.log(helloGeneric('Hyun').length); // T는 'Hyun' console.log(helloGeneric(33).length); // T는 number // any를 사용하면 못 잡던 error를 잡아 준다. console.lo..