docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
@@ -1,4 +1,4 @@
|
||||
# [[Storybook]]
|
||||
# [[Storybook|Storybook]]
|
||||
|
||||
## 📌 Brief 주Summary
|
||||
Storybook은 프론트엔드 개발 시 UI 컴포넌트를 주 애플리케이션과 격리하여 개발하고 문서화할 수 있도록 돕는 도구입니다 [1-3]. 특히 개발된 컴포넌트의 다양한 상태(스토리)를 기반으로 자동화된 시각적 회귀 테스트(Visual Regression Testing) 및 상호작용 테스트(Interaction Testing)를 수행하여 의도치 않은 UI 변경이나 접근성 위반을 방지합니다 [4-6]. Pull Request 과정에 결합되어 안전한 UI 업데이트와 리뷰를 지원하는 필수적인 플랫폼으로 활용됩니다 [1, 7].
|
||||
@@ -25,20 +25,20 @@ Storybook은 프론트엔드 개발 시 UI 컴포넌트를 주 애플리케이
|
||||
### Related Concepts
|
||||
|
||||
#### [테스트 및 검증 기법 (Testing Methods)]
|
||||
- [[Visual Regression Testing]]
|
||||
- [[Visual Regression Testing|Visual Regression Testing]]
|
||||
- 연결 이유: Storybook이 컴포넌트의 변경 사항을 픽셀 단위로 확인하기 위해 사용하는 핵심 테스트 방법론입니다 [4, 8].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: HTML 마크업을 비교하는 Snapshot Test의 한계점과 오탐(False Positive)의 원리, 그리고 픽셀 렌더링 기반 비교의 장점을 명확히 이해할 수 있습니다 [9].
|
||||
|
||||
- [[Interaction Testing]]
|
||||
- Interaction Testing
|
||||
- 연결 이유: 컴포넌트의 단순한 렌더링뿐만 아니라 유저의 행동(이벤트, 상태 등)을 시뮬레이션하여 다양한 UI 상태(로딩, 호버 등)를 검증하는 Storybook의 기능입니다 [5, 6].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 상태 전이에 따라 동적으로 변하는 UI를 어떻게 시각적 테스트와 결합하여 검증할 수 있는지 원리를 파악할 수 있습니다 [5].
|
||||
|
||||
#### [통합 및 자동화 도구 (Integration Tools)]
|
||||
- [[Chromatic]]
|
||||
- Chromatic
|
||||
- 연결 이유: Storybook 유지보수 팀이 만든 공식 클라우드 서비스로, 크로스 브라우저 시각적 테스트와 CI 통합을 네이티브로 지원합니다 [8, 15].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 클라우드 환경에서 베이스라인(Baseline) 이미지가 어떻게 저장, 비교, 동기화되는지 CI/CD 파이프라인 통합 과정을 이해할 수 있습니다 [7, 13].
|
||||
|
||||
- [[Happo]]
|
||||
- Happo
|
||||
- 연결 이유: Storybook과 통합되어 다중 브라우저 스크린샷 테스트 및 접근성 회귀 테스트를 병렬로 수행하는 시각적 테스트 도구입니다 [4].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: Flakiness 방지를 위해 애니메이션을 정지하거나 색상 오차 범위(color-delta tolerance)를 설정하여 시각적 노이즈를 줄이는 구체적 최적화 기법을 알 수 있습니다 [11, 14].
|
||||
|
||||
@@ -57,9 +57,9 @@ Storybook은 프론트엔드 개발 시 UI 컴포넌트를 주 애플리케이
|
||||
- **My Project Relevance:** 현재 유지보수 중인 애플리케이션의 리팩토링이나 새로운 디자인 시스템(UI 라이브러리) 구축 작업 시, 실수로 발생하는 CSS/레이아웃 깨짐을 사전에 방지하기 위한 안전장치로 도입할 수 있습니다.
|
||||
|
||||
### Adjacent Topics
|
||||
- [[Pull Request Workflow]]
|
||||
- Pull Request Workflow
|
||||
- 확장 방향: Storybook 시각적 테스트의 결과를 GitHub, GitLab 등의 리뷰 프로세스와 결합하여, 버그 없는 UI 코드를 배포하기 위한 협업 및 검증 파이프라인 구축 전략으로 확장합니다.
|
||||
- [[Feature-Sliced Design]]
|
||||
- [[Feature-Sliced Design|Feature-Sliced Design]]
|
||||
- 확장 방향: 프론트엔드 코드를 기능(Feature) 단위로 분리할 때, Storybook을 이용해 각 기능의 UI 컴포넌트들을 메인 앱에 의존하지 않고 독립적으로 작동하게 만드는 설계 원칙으로 확장합니다.
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user