Front-end/스타일링 라이브러리

[storybook] storybook 컴포넌트 설계 및 문서화하는 법 (+ Emotion, Typescript)

Storybook 폴더 구조 스토리북을 설치하면 stories 폴더가 새로 생겨있을 것이다. 이 sotries 폴더 하위에에 문서화할 컴포넌트 명을 넣어 다음과 같이 stories 파일을 새로 생성한다. [컴포넌트명].stories.ts파일 '이미 components 폴더에 만들어놓은 컴포넌트 중 문서화를 해줄 컴포넌트를 stories 파일에서 import해온다 -> 그에 대해 서술하는 내용을 코드로 적는다'가 바로 스토리 작성이다. 컴포넌트 설계하기 Storybook을 실행하면 들어있는 예제 중 Button 컴포넌트를 뜯어보며 재사용하기 좋은 컴포넌트, 그리고 Storybook으로 문서화하기 좋은 컴포넌트는 어떻게 설계하면 되는지 알아보자. 1. 해당 컴포넌트의 특성 파악하기 이 버튼이란 녀석은 버튼 ..

Typescript + Emotion + Storybook 설치 및 환경설정

react typescript 프로젝트 생성 및 emotion 설치 npx create-react-app [만들 프로젝트 경로] --template typescript npm install @emotion/react React가 v17 이후에 emotion을 사용하려면 다음과 같은 pragma를 앞에 입력해줘야 한다. /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; npm install @emotion/react 이건 css prop 방식이고 만약 styled 방식도 사용하고 싶다면 npm install @emotion/styled 도 설치하기 emotion pragma 제거 방법 React 자체의 jsx가 아니라 ..

[React] emotion 설치 및 typescript에서 사용하기 (pragma 제거방법)

react typescript 프로젝트 생성 및 emotion 설치 npx create-react-app [만들 프로젝트 경로] --template typescript npm install @emotion/react React가 v17 이후에 emotion을 사용하려면 다음과 같은 pragma를 앞에 입력해줘야 한다. /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; 제거하는 방법은 바벨 설정을 건드리는 것인데 CRA로 만든 프로젝트에서는 eject(숨겨진 웹팩 설정 파일들을 보이게 하는 것)을 하면 되돌릴 수 없기 때문에 eject 하지 않고도 설정을 건드릴 수 있는 craco라는 패키지의 도움을 받을 것이다. pr..