투자유의 개발 블로그

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

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) // 로컬 데이터를..

JWT, 로컬 스토리지에 저장 안전한가? 로컬 스토리지에 저장하는 방식은 xss 공격에 취약하다고 한다. (당연히 쿠키에 넣어서 관리하는 것보단 낫다...)아래 링크에서 jwt를 로컬스토리지가 아니라 인 메모리에서 관리함으로써 더 나은 보안을 구축할 수 있다. (당연히 손이 훨씬 많이 간다.) https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#login https://gaemi606.tistory.com/entry/React-JWT%EB%A5%BC-In-Memory-%EB%B0%A9%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0-localStorage-%EC%82%AC%E..

상태관리 web3.js 로 이것저것 시도해보는 와중에 상태관리가 필요해서 recoil과 zustand를 사용해보았다. recoil과 zustand에 대한 좋은 평가를 예전부터 듣고 있었다. `swr + recoil` 또는 `swr + zustand` 조합으로 많이 사용한다고 들어왔던 터라 사용해보고 싶었다. 이번에 사용해보니 둘 다 redux 보다 사용하기 좋았다. 사실 이번에 zustand 까지 사용해볼 생각은 없었다. react를 만든 facebook팀에서 recoil을 개발했기 때문에 recoil을 사용할 생각이었다. 결론적으로 web3 객체의 상태관리가 recoil에서 되지 않아 zustand도 사용해보게 되었다.(정확히 확인해보진 못했지만 이 당시 사용한 css 프레임워크 때문일지도 모르겠다. ..