이 글은 스토리 북 공식 문서에서 링크 된 Component-Driven Development의 포스팅을 번역 및 의역한 글입니다.
더 나은 방법으로 컴포넌트를 만드는 방법: 작은 것부터 점점 크게
최근 몇 년 동안 웹(web)에서의 프론트엔드 유저 인터페이스(UI) 개발의 가장 큰 트렌드는 컴포넌트에 대한 것이었습니다. React 라이브러리가 최초는 아니지만, 잘 지정된 컴포넌트 요소의 UI를 구축하기 위해 확립된 패턴을 가지고 있습니다.
물론, 잘 기술된 역할을 수행하는 작은 조각들부터 만들어진 소프트웨어에 대한 트랜드는 전혀 새로운 것이 아닙니다. 모듈화는 제가 "커플링과 응집력"의 개념을 배우기 훨씬 전부터 소프트웨어 엔지니어링의 핵심 개념 중 하나였습니다.
컴포넌트 주도 개발은 무엇인가요?
컴포넌트 주도 개발(CDD)은 컴포넌트 주위에 개발 프로세스를 고정하는 개발 방법론입니다. 자세히 말하자면, 컴포넌트 수준에서 시작해 페이지나 화면 수준에서 끝나는 것으로 "바닥부터 끝까지"(bottom up) UI를 구축하는 과정을 말합니다.
지난 몇 년 동안, Chroma에서 IBM, Hubspot, AirBnB와 같은 회사의 동료들과 함께 이 접근법을 발견하여 개발 프로세스를 크게 가속화하고 개발자와 디자이너의 커뮤니케이션을 개선하며 지속적으로 높은 수준의 제품 품질을 달성할 수 있었습니다.
이점
그래서 일련의 고정된 상태를 가진 하나의 컴포넌트를 동작시킴으로써 가지는 장점은 몇 가지가 있을까요?? 제가 한번 세어보겠습니다.
- Focus development: 앱 전체를 특정 상태로 조작해 단일 컴포넌트로 작업하는 것은 고통스럽고 고된 일입니다. 전체 앱 컨텍스트 내에서 개발을 할 때, 특정 상태는 달성하기 어렵거나 불가능할 수 있습니다(특정 로딩 또는 오류 상태 고려).
- Increase UI coverage: 관련된 모든 상태를 열거하는 것은 여러분이 어떤 것도 빠뜨리지 않았다는 것을 확신할 수 있고 컴포넌트가 모든 가능한 시나리오에서 작동한다는 것을 의미합니다.
- Target feedback: 같이 작업하는 동료가 새롭거나 변경된 컴포넌트를 리뷰하는 훨씬 더 쉬운 방법이 될 수 있습니다. 에디터에서 작업한 컴포넌트를 한 번에 찾아볼 수 있으니까요. 한 번에 하나의 컴포넌트에 초점을 맞춤으로써 훨씬 더 높은 정밀도로 커뮤니케이션이 이루어질 수 있습니다. (특히 디자이너와 개발자 사이의)
- Build a component library: 당신의 앱과 조직 내에서 컴포넌트 재사용을 극대화할 수 있습니다.
- Parallelize development: 한 번에 하나의 컴포넌트를 작업하면 "페이지" 단위의 개발에서는 불가능한 방식의 작업을 서로 다른 팀 구성원 간에 공유할 수 있다.
- Test visually: 컴포넌트 익스플로러가 "시각적" 테스트를 하는 것을 허용합니다. 특히, TDD와 같은 장점을 가지고 있지만 UI 영역에서는 "Visual TDD"의 형태를 허용할 수 있습니다.
도구: 컴포넌트 익스플로러
CDD를 지원하기 위한 툴이 등장하고 있으며, 그중 으뜸은 컴포넌트 익스플로러 입니다. 컴포넌트 익스플로러는 앱의 컴포넌트를 다양한 테스트 "상태"에서 보여주는 별도의 응용 프로그램 입니다. 상태는 테스트 케이스의 필수 요소로써, 컴포넌트에 대한 일반적인 입력 값 입니다.
익스플로러를 사용하여 당신은 컴포넌트에 중요한 상태로 정의된 모든 상태에 대해서 컴포넌트를 시험할 수 있습니다. 한 번에 하나의 구성 요소를 생성하는 워크플로우를 가능하게 하는 중요한 열쇠는 고립(isolation)입니다.
익스플로러에 컴포넌트를 추가하는 것은 일반적으로 상태를 프로그래밍 방식으로 열거하는 것만큼 간단합니다.(React에서 이것은 컴포넌트의 props이며 context입니다).
이러한 사실은 당신에게 익숙할 수 있습니다. 상태를 열거하는 것이 스냅샷 테스트 또는 스크린샷 테스트를 수행하는 방법이니까요.
일단 컴포넌트의 익스플로러에 대해 자세히 설명하면 몇 번의 클릭만으로 컴포넌트를 완전히 시각적으로 테스트할 수 있습니다. 아래에서 컴포넌트 익스플로러에 대해 자세히 알아보십시오.
Getting Started
CDD의 좋은 점은 당신이 CDD를 시도하기 위해 당신의 팀 전체를 매수할 필요가 없다는 것입니다. 비록 설계 이후의 모든 사람들이 컴포넌트들에 대해 생각하고 일하는 것도 멋지지만(그리고 그것은 또한 설계의 트렌드이기도 하지만), 위에서 설명한 대부분의 이익이 단일 개발자에게도 발생할 수 있습니다.
Try it out
다양한 환경을 위한 컴포넌트 익스플로러가 있지만 React를 사용한다면 React Storybook을 사용해 보십시오. 아래 이미지에 표시되는 항목을 예로 든 컴포넌트 익스플로러가 미리 로드된 TodoMVC 예제를 확인하십시오.
결론
컴포넌트 주도 개발은 점점 더 많은 회사들이 고품질의 보다 복잡한 사용자 인터페이스를 구축하기 위해 채택하고 있는 개발 방법론 입니다.
UI 컴포넌트의 이점을 최대한 활용하려면 도움이 되는 프로세스와 도구가 필요합니다. 스토리북과 같은 도구와 짝을 이룬 CDD 과정은 그 목표를 향한 직접적인 길을 제공할 수 있습니다.
