카
카카오엔터테인먼트FE
June 9, 20221회
스토리북 작성을 통해 얻게 되는 리팩토링 효과
간단 소개
스토리북 작성을 통해 컴포넌트의 문제점을 발견하고 리팩토링하여 코드 구조를 개선하고 재사용성을 높일 수 있다.
AI Summary
- 스토리북의 장점
- UI 컴포넌트를 독립적인 환경에서 시각적으로 확인 가능
- 컴포넌트 재사용성 및 설계 개선 유도
- 개발, 리뷰, 수정 용이
- 스토리북 작성 중 발견되는 문제점 및 해결 방안
- 과로: 컴포넌트의 다중 역할 분리 (Presentational 컴포넌트 분리, 데이터 fetching 로직 분리)
- 발작 증세: 컴포넌트의 과도한 유연성 제한 (Date 타입 사용, 유연성 높은 컴포넌트 기반으로 조립)
- 피터팬 증후군: 컴포넌트의 의존성 제거 (부모 스타일 의존, 특정 문맥 의존, 전역 환경 의존 제거)
- 결론
- 스토리북 작성은 컴포넌트 설계 및 리팩토링에 긍정적인 영향
- 테스트 용이성, 설계 우수성과 스토리북 호환성은 양의 상관관계
- 컴포넌트 분리 및 책임 범위 설정에 대한 해답 제시
Next Feeds
Elasticsearch 검색에서 확률 사용하기
Elasticsearch에서 확률 기반 검색을 구현하는 다양한 방법(Script, Function Score)을 비교하고, 성능 최적화 방안을 제시합니다.
Elasticsearch확률검색Function ScoreScript Query
2022. 6. 7.
버즈빌
Android SDK 자동화 테스트 환경 구축기 1화 - 자동화 테스트 환경 소개
Airbridge SDK의 자동화 테스트 환경 구축 배경, 구성 요소, CI/CD 파이프라인 구축 과정을 소개합니다.
Android SDK자동화 테스트AppiumCucumberCI/CD
2022. 6. 2.
AB180
Lighthouse CI를 알아보고 Github Actions에 적용하기
Lighthouse CI와 Github Actions를 연동하여 웹 성능 측정 및 보고서 생성을 자동화하는 방법을 소개합니다.
LighthouseLighthouse CIGithub Actions성능 측정자동화
2022. 6. 2.
카카오엔터테인먼트FE
Lighthouse CI를 알아보고 Github Actions에 적용하기
Lighthouse CI와 Github Actions를 연동하여 웹 성능 측정 자동화 및 PR 코멘트 상세 보고서 생성을 구현합니다.
LighthouseLighthouse CIGithub Actions성능 측정자동화
2022. 6. 2.
카카오엔터테인먼트FE
웹 접근성이란?
웹 접근성의 개념, 웹 표준과의 관계, 그리고 웹 접근성 준수 방법에 대해 설명하고, 개발자가 고려해야 할 요소들을 제시합니다.
웹 접근성웹 표준WAI-ARIA스크린 리더시멘틱 태그
2022. 5. 31.
비브로스
무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?
빠른 인터넷 환경에서 스켈레톤 UI가 항상 긍정적인 사용자 경험을 제공하는지 분석하고, React Suspense와 성능 모니터링을 통해 개선 방안을 제시합니다.
스켈레톤 UI사용자 경험React SuspenseFirebase Performance MonitoringProgress Indicator
2022. 5. 30.
카카오페이