목록에러 (4)

Moong

[React+Typescript] Storybook 자동화 배포하기 - Chromatic, Git Action CI

storybook을 팀원들과 공유하기 위해 배포를 진행해보도록 하겠습니다! 이를 위해 유용한 툴인 Chromatic을 사용해보려고 합니다. Chromatic Storybook을 위한 cloud 기반 도구 체인 chromatic은 크게 다음과 같은 기능을 지원합니다! ▪️ storybook 배포 ▪️ 문서화 - 컴포넌트 라이브러리화 ▪️ 공유 workspace - 팀원들과 UI 리뷰 편리 자세한 건 공식문서를 참고해주세요 ⭐️ 1. 프로젝트에 Chromatic 설정하기 크로마틱 페이지에 접속하여 회원가입을 합니다. https://www.chromatic.com/ Automatically review, test, and document Storybook Chromatic automates visual & i..
React 2023. 5. 5. 15:35
[React+Typescript] Storybook에 sass 설정하기(sass 에러 나는 경우)

storybook에서 sass 파일을 불러올 때 에러가 나는 경우 추가적인 설정을 해주어야 합니다! 1. 라이브러리 설치 (storybook/addon-styling, sass) @storybook/addon-styling 와 sass를 설치합니다. # yarn yarn add -D @storybook/addon-styling sass # npm npm install -D @storybook/addon-styling sass 2. main.ts addons에 sass 추가하기 .storybook > main.ts addons에 sass를 추가해주면 됩니다. // main.ts import type { StorybookConfig } from "@storybook/react-webpack5"; const ..
React 2023. 5. 4. 13:59
[React+Typescript] Storybook에 Redux 설정하는 법 - could not found react-redux context value 에러 해결

storybook에 별도의 redux 설정 없이 redux를 사용하는 컴포넌트의 story를 렌더링하려고 하면 해당 에러를 마주치게 된다. 해결방법 - storybook에 redux 설정하는 법 💡 Provider로 감싸기 redux를 사용하는 프로젝트에서 index.tsx 파일에 Provider로 감싸주듯이 모든 story 파일들을 Provider로 감싸주면 된다. .storybook 폴더에서 1. preview 파일의 확장자를 ts 에서 tsx로 변경 (⭐️중요⭐️ 이거 안하면 decorator가 안먹어요!) 2. decorators를 추가하여 Provider로 감쌉니다. (=> 모든 story에 설정되므로 global decorator라고도 합니다) 3. Provider에 프로젝트에서 사용하고있는..
React 2023. 5. 3. 18:05
[블록체인] Solana 기반 지갑 생성 - React

Solana 지갑을 만드는 가장 쉬운 방법은 Phantom 지갑을 이용하는 것일텐데요, Phantom을 이용하지 않고 React 코드로 Solana 지갑을 만드는 법에 대해 이야기 해보겠습니다. 랜덤 지갑 생성과, 니모닉 코드를 기반으로 지갑을 생성하는 부분을 다뤄볼게요! @solana/web3.js ⚠️ npm 을 이용하여 해당 라이브러리를 다운 받으면 에러가 나더라고요! 꼭! ⭐️ index.html에 script 파일을 직접 불러오는 방식⭐️ 으로 라이브러리를 사용하세요! bs58 solana에서 생성된 지갑의 private key를 bs58 형태로 인코딩하기 위해서는 bs58 라이브러리가 추가로 필요합니다 npm i bs58 지갑 생성 코드 script 형태로 불러온 라이브러리 모듈은 window..
Blockchain 2023. 3. 20. 20:28
Prev 1 Next