Moong

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

storybook에서 react-router-dom 을 포함한 컴포넌트를 불러오면 관련 설정들을 해주어야 합니다! 1. storybook-addon-react-router-v6 다운로드 관련 라이브러리를 다운받아줍니다. 🔗 storybook-addon-react-router-v6 Github 링크 # yarn yarn add -D storybook-addon-react-router-v6 # npm npm install storybook-addon-react-router-v6 2. addon에 router 추가하기 ( => main.ts) addon array에 storybook-addon-react-router-v6을 추가해줍니다. // .storybook/main.ts import type { Stor..

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

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에 프로젝트에서 사용하고있는..

storybook을 작성하다 이런 에러를 마주쳤다면 원인은 두 가지 중 하나입니다. 1. 컴포넌트 경로를 제대로 설정 하지 않은 경우 컴포넌트 경로가 잘못되진 않았는지 체크해주세요! ✅ export default로 내보내고 있는 component는 중괄호 없이 가져오고 있는지 확인할 것 => import Component from './Component'; ✅ export로 내보내고 있는 component는 중괄호를 포함하여 import 하고 있는지 확인할 것 => import { Component } from './Component'; 2. 스토리북에서 svg를 제대로 못 읽어오는 경우 아무리 봐도 컴포넌트 경로를 제대로 설정했다면, 스토리북 자체에서 svg를 제대로 읽어오지 못하는 것이 원인일 수 ..

프론트 코드를 짜다 보면 하나의 UI를 확인하기 위해 여러 동작을 수행해야 하는 경우가 있습니다. 예를 들어 회원가입 완료 모달을 보기 위하여 특정 변수를 조작하거나, 회원가입 과정을 직접 해보아야 하는 번거로운 과정을 겪어야 합니다. storybook은 이러한 번거로움 없이 독립적인 환경에서 UI를 테스트 할 수 있도록 하는 유용한 툴입니다. storybook 도입 이유 - 독립적인 환경에서 UI 테스트 - 더 나은 컴포넌트 설계를 고안하게 됨 - 리팩토링 효과 설치 방법 react 프로젝트 root 경로에 다음 명령어를 입력해줍니다. (storybook 버전 7.0.7 기준으로 작성된 글입니다) npx storybook@latest init storybook 실행 # npm npm run storyb..

오늘은 아이콘과 알림음을 포함한 알림을 보내줄 수 있는 React custom hook을 만드는 법에 대해 알려드리겠습니다! 🔔 Notification API Notification API를 사용하면 웹에서도 사용자들에게 알림을 보내줄 수 있습니다. 📎 Notification 관련 링크 Notification 객체를 사용하면 쉽게 구현이 가능합니다! const notification = new Notification("Hi there!"); Notification 허용 상태 아래 화면을 다른 사이트들에서 많이 보셨죠! 유저가 해당 웹 사이트의 알림 권한을 허용했는 지에 따라 notification permission의 상태가 달라지게 됩니다. 1️⃣ default : 유저가 허용하지도, 차단하지도 않은 ..

이번엔 React 와 Sass를 이용하여 다크모드 / 라이트 모드 테마를 적용하는 법에 대해 이야기 해보겠습니다 🌕 테마를 설정하는 데는 크게 1. theme object 사용하기 / 2. 함수 사용하기 두 가지 방법이 있습니다. 우선 두 가지 방법을 설명하는 데에 앞서, 테마를 적용하는 원리에 대해 알아보겠습니다! Scss에 테마 정보 알리기 - body 태그에 class를 넣었다 뺐다 하기 scss 파일에서 현재 테마가 어떤 것인지 알기 위해서는 class로 그 정보를 알려주어야 합니다. 따라서 상단에 존재하는 body 태그의 class에 테마 정보를 넣는 것이죠! 지금 현재 어떤 LIGHT 또는 DARK 테마인지에 대한 정보는 저는 기본 테마를 dark 모드로 할 예정이라 body 태그에 LIGHT..

Aptos 지갑을 만드는 가장 쉬운 방법은 Martian 지갑을 이용하는 것일텐데요, Martian을 이용하지 않고 React 코드로 프론트엔드에서 Aptos 지갑을 만드는 법에 대해 이야기 해보겠습니다. 랜덤 지갑 생성과, 니모닉 코드를 기반으로 지갑을 생성하는 부분을 다뤄볼게요! aptos ⚠️ npm 을 이용하여 해당 라이브러리를 다운 받으면 에러가 나더라고요! 꼭! ⭐️ index.html에 script 파일을 직접 불러오는 방식⭐️ 으로 라이브러리를 사용하세요! 지갑 생성 코드 script 형태로 불러온 라이브러리 모듈은 window.aptosSDK 로 가져올 수 있습니다. 랜덤 지갑은 AptosAccount class의 생성자를 이용하여 생성할 수 있습니다! const generateAptos..

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