생각하다 생각하다

TypeScript를 사용하는 리액트 컴포넌트의 스토리 작성하기 🗒 story book이란? story book이란, UI 컴포넌트를 독립적으로 분리해 개별적으로 관리하고 테스트할 수 있도록 도와주는 도구입니다. UI 테스트뿐만 아니라 컴포넌트 문서화의 도구로도 사용할 수 있습니다. 스토리북은 React와 Vue, Angular 등의 다양한 프레임워크와 사용할 수 있습니다. 🗒 스토리북 사용하기 아래 버튼 중에서 선택 완료 버튼 컴포넌트를 만들고 스토리를 작성해 보면서 UI 테스트를 해 볼겁니당 📁 SaveBtn.tsx import React, { useState } from "react"; import Button from "@mui/material/Button"; export interface Sav..

🗒 story book이란? story book이란, UI 컴포넌트를 독립적으로 분리해 개별적으로 관리하고 테스트할 수 있도록 도와주는 도구입니다. story book 템플릿 사용해보기 # 스토리북 템플릿 clone하기 $ npx degit chromaui/intro-storybook-react-template taskbox $ cd taskbox # dependencies 설치하기 $ yarn story book으로 Task 컴포넌트 생성하기 title – task를 설명해주는 문자열 state - 현재 어떤 task가 목록에 있으며, 선택되어 있는지의 여부 먼저 src/components/Task.js와 src/components/Task.stories.js의 두 파일을 생성합니다. 📁 src/com..