전체 글 16

[Vite + Web3] process is not defined at node_modules/web3-core-requestmanager/node_modules/util/util.js

vite.config.ts import { defineConfig, loadEnv } from "vite"; //만일 vue라면 vue를 import하면 된다. import react from "@vitejs/plugin-react"; import path from "path"; export default defineConfig(() => { return { plugins: [react()], resolve: { alias: { //추가해주기 process: "process/browser", stream: "stream-browserify", zlib: "browserify-zlib", util: "util", }, }, }; }); // html(index.html) vite use web3.js th..

frontend/blockchain 2022.09.18

[React + Typescript + Web3] AbstractConnectorInterface import오류

커밋을 눌러보니 불러오는 라이브러리가 변경되었다. // import { AbstractConnectorInterface } from '@web3-react/types' import { AbstractConnector } from '@web3-react/abstract-connector' // const connectorsByName: { [name: string]: AbstractConnectorInterface } = { const connectorsByName: { [name: string]: AbstractConnector } = { kibosh AbstractConnectorInterface · Uniswap/web3-react@7e1851e bump torus version emit provid..

frontend/blockchain 2022.09.16

[React + TypeScript + StoryBook] 개발환경설정

npm i styled-components npm install --save-dev @types/styled-components styled-components: API Reference API Reference of styled-components styled-components.com [TS] TypeScript에서 Styled-component 사용하기 TypeScript에서 styled-component를 사용해보자. velog.io Storybook에서의 Typescript 공식문서의 일부 내용을 번역 및 재해석한 글입니다. Storybook에서 Typescript 사용하기 Storybook은 기본적으로 Typescript를 내장하고 있어, 별도의 설정 없이도 Typescript 프로젝트에 사용..

frontend/StoryBook 2022.09.14

[오류] Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'.

문제의 코드, children에 계속 밑줄이 그어짐 const TodosContextProvider: React.FC = (props) => { return ( {props.children} ) } 해결 type Props = { children?: React.ReactNode; }; children 정의. react 18 에선 children지원하지 않는다고 함. 리액트 18의 타입스크립트 타입 변경점 React(리액트) 18이 얼마 전에 출시했습니다. 개발하시는 프로젝트에 이미 업데이트 했거나 조만간 업데이트 하실 계획일텐데요. 리액트와 Typescript(타입스크립트)를 같이 사용했던 프로젝트라면 blog.shiren.dev

frontend/React 2022.09.04

[SCSS] css전처리기

sass(scss) : syntactically awesome stylesheet 코드의 재사용성, 가독성, 개발의 효율을 올리기 위한 css전처리기 SCSS로 작성 => 컴파일러가 CSS로 컴파일해 웹으로 동작시킴 # 컴파일 방법 node.js command npm install -g node-sass node-sass -v node-sass [옵션] node-sass -w scss/style.scss css/style.css --output-style compressed # -w (watch) 파일을 감시하여 저장시 자동으로 변경 사항을 컴파일 # 오류발생 시, npm rebuild node-sass # VScode formatter 설치 [참고] Sass 강좌 – 한 눈에 보기 | VELOPERT...

frontend/css 2022.08.23