티스토리 뷰
CDD를 지원하는 도구인 Component Explorer(컴포넌트 탐색기)
StoryBook
컴포넌트 탐색기의 UI 개발 도구 중 하나
컴포넌트들을 따로 볼 수 있게 구성하여 한 번에 하나의 컴포넌트에서 작업할 수 있음
특징
1. 재사용성을 확대하기 위해 컴포넌트를 문서화하고 자동으로 시각화함
- 다양한 테스트 상태를 확인할 수 있음
- 버그를 사전에 방지
- 테스트 및 개발 속도 향상
- 의존성을 걱정하지 않고 빌드할 수 있음
2. 독립적인 개발 환경에서 실행됨
- 다양한 상황에 구애받지 않고 UI 컴포넌트를 개발할 수 있음
회사 내부에서 UI 라이브러리로 사용하거나, 외부 공개용 디자인 시스템을 개발하기 위한 기본 플랫폼으로 사용
주요 기능
- UI 컴포넌트를 카탈로그화
- 컴포넌트 변화를 stories로 저장
- 핫 모듈 리로딩(자동업데이트)같은 개발 툴 제공
- 리액트를 포함한 다양한 뷰 레이어 지원(다른 라이브러리, 프레임워크에서도 사용가능)
설치
npx create-react-app 프로젝트명
npx storybook init
// 실행
npm run storybook
사용
기본 컴포넌트가 담긴 js파일과 storybook에서 사용할 js파일 작성
(Title.stories.js에서 컴포넌트를 구현해도 되지만 어차피 후에 재사용하려면 파일을 나눠줘야 함)
Title.js
// Title.js
export const Title ({title, textColor}) {
// 컴포넌트 구현
return <h1 style={{color: textColor}}>{title}</h1>
}
Title.stories.js
// Title.stories.js
import React from 'react'
import { Title } from './Title' // Title.js의 Title 컴포넌트 임포트
export default { // storybook에 알려줄 형식 작성
title: 'Example/Title', // 카테고리 지정(Example 내의 Title에서 확인 가능)
component: Title // 카테고리에서 확인할 컴포넌트 지정
};
// 템플릿 작성. 이 템플릿과 bind 메서드를 사용하여 아래에서 예시를 확인함
const Template = (args) => <Title {...args} />
// 위 템플릿 복사(export를 사용해 storybook으로 내보내기)
// 속성 지정
export const BlueTitle = Template.bind({});
BlueTitle.args = {
textColor: "blue",
title: "Blue Title"
}
+)
position
static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있나 부모 요소를 기준으로 위치가 결정됨
fixed : 원래 위치(상위 요소)와 상관없이 브라우저 화면의 상대 위치를 기준으로 위치를 지정.
화면이 바뀌더라도 고정된 위치를 설정 할 수 있음
position: fixed;
left: 0; // 요소를 왼쪽 끝에 위치시키기
right: 0; // 요소를 오른쪽 끝에 위치시키기
// left와 right를 동시에 0으로 설정하면 요소의 크기가 왼쪽 끝부터 오른쪽 끝까지 확장
top: 0; // 요소를 위쪽 끝에 위치시키기
bottom: 0; // 요소를 아래쪽 끝에 위치시키기
// top과 bottom을 동시에 0으로 설정하면 요소의 크기가 위쪽 끝부터 아래쪽 끝까지 확장
// left, right, top, bottom을 모두 0으로 설정하면 전체 화면으로 크기 확장
transition: [적용하고싶은속성,] 시간
부드럽게 나타나기(사라지기)
calc(표현식)
width: calc(100% - 80px);
// 100%에서 양쪽으로 40px씩 빼고 공간 차지
width: calc(100% / 3);
// 33.3%만큼 공간 차지
이벤트 버블링
상위 요소에 이벤트를 지정했는데
후손(자식포함) 요소에도 동일한 이벤트가 발생하는 현상
- 상위 요소와 후손요소를 분리하거나
- 동일한 이벤트에 stopPropagation을 호출해줌
<div onClick={(event) => event.stopPropagation()}> </div>
참고
https://electronic-moongchi.tistory.com/26
22.12.23
코스 S3U3
'코드스테이츠(SEB_FE_42)' 카테고리의 다른 글
[React] Redux (0) | 2022.12.28 |
---|---|
[React] 상태 관리 (0) | 2022.12.27 |
[JS] XOR 연산 (0) | 2022.12.22 |
[React] CSS in JS, CDD, styled-components (0) | 2022.12.22 |
[사용자 친화 웹] Figma (0) | 2022.12.20 |