컴포넌트 주도 개발(CCD)과 Storybook 사용하기

컴포넌트 주도 개발이란?

나는 첫 웹 프로그래밍부터 react를 활용하여 typescript로 웹 프로그래밍을 하기 시작했고 같이 작업하는 팀원의 조언으로 자연스럽게 **컴포넌트 주도 개발**을 하고 있었다. 컴포넌트 주도 개발은 CDD ( component driven development )라고 불리고 react를 대부분이 사용하는 요즘 다들 컴포넌트 주도 개발을 하고 있다고 생각된다. 컴포넌트 주도 개발은 말 그대로 컴포넌트를 중심으로 UI를 개발하는 것을 말한다. 특정 기능을 하는 요소를 컴포넌트로 만들고, 여러 개의 컴포넌트를 조립하여 페이지를 만드는 형식의 개발을 말한다.

그래 컴포넌트 주도 개발이 뭔지는 알겠다. 근데 컴포넌트 주도 개발이 있으면 다른 개발도 있을거 아니냐?!? 하시는 분들을 위해 test driven development도 소개하겠습니다.

테스트 주도 개발

테스트 주도 개발은 기존의 디자인 -> 코드개발 -> 테스트의 방식과 달리 작은 단위의 기능을 테스트 케이스를 먼저 작성하고, 이를 통과시키기 위해 코드를 작성하면서 개발을 진행하는 방법을 말한다. 보통은 테스트 작성 -> 테스트 실행 -> 코드 작성 -> 리펙토링 의 과정으로 진행이 된다. 테스트 주도 개발은 테스트를 통해 소프트웨어 품질을 개선할 수 있다는 장점이 있지만, 테스트 케이스를 작성하는 데 시간과 노력이 필요하므로 보통은 나의 개발에 자신이 없거나, 요구사항이 확실히 정해지지 않은 경우 ( 코드를 많이 수정해야 하는 경우 ) , 회사 같은 경우는 내가 작성한 이 코드를 누가 유지보수할지 모르는 경우 등이 테스트 주도 개발을 선호하는 상황일 거라고 생각한다.

컴포넌트 주도 개발의 장점

답정너 같지만 나는 컴포넌트 주도 개발을 사용하게 되었고, 컴포넌트 주도 개발을 하면서 이 방식의 장점을 몸으로 경험하여 이 방식의 장점에 대해서 좀 작성해보자고 한다.
- 재사용성과 모듈화: 작은 단위의 컴포넌트를 개발하여 재사용성과 모듈화를 높일 수 있다. - 일관된 UI: 비슷한 형태의 UI를 하나의 컴포넌트로 구현하는 경우가 많아 일관된 UI스타일과 패턴을 유지할 수 있다. - 효율적인 협업: 컴포넌트 단위로 개발하기 때문에 작업의 순서가 없는건 아니지만 여러 사람이 함께 협업을 하는데 효율적이라고 생각한다.

그래서 나는 품질 개선과 유지보수성을 높이는데 도움을 주는 TDD 방식보다는 두 명의 팀원에서 주어진 기간내에 모든 기능을 구현해야 했으므로 CDD방식을 택함으로써 성공적으로 프로젝트를 마칠 수 있었던 거 같다.
그리고 사실 요즘 많이 사용하는 react는 컴포넌트 기반의 개발을 지원하므로 CDD방식을 해본것을 후회하진 않는다.

Storybook?

storybook을 알게 된 것은 그냥 채용공고를 뒤져보다가 우연히 접할 수 있었다. 집과 가까워 가고 싶었던 회사의 공고를 보던 중 storybook 경험자를 우대한다고 공고를 낸 걸 보고 storybook에 대해 찾아보다가 나 같은 초보 개발자에게 꼭 필요한 라이브러리임을 알 수 있었다. storybook은 컴포넌트 주도 개발에 적합한 도구로 개발자들이 컴포넌트를 개별적으로 테스트하고 문서화하는데 도움을 주는 라이브러리이다! 이 라이브러리를 사용하면 굳이 내가 test화면에 나의 컴포넌트를 띄워서 하나하나 실험할 필요 없이, 이 라이브러리의 도움을 받으면서 나의 컴포넌트를 수정해 가면 되는 것이다.

Storybook 튜토리얼

나는 storybook 사용법을 익히기 위해 공식 문서를 적극 활용했다.

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/

Storybook Tutorials

이 방법은 내가 stotybook을 처음 접했을때 익숙해지기 위해 사용했던 튜토리얼이다. storybook을 바로 프로젝트에 다운로드하여서 사용해 봐도 좋지만 나는 사용법이 어려웠어서 이 튜토리얼이 많이 도움이 되었고, 다들 처음이라면 이 튜토리얼을 꼭 해보기를 권한다.

 

Storybook 사용법

나는 component.tsx 와 component.style.ts를 한 폴더에 넣고 사용했는데 이 폴더에 component.stories.ts를 만들면 storybook화면에 해당 컴포넌트가 표시가 된다. args에 검사를 원하는 값을 넣어보고 이 컴포넌트가 어떻게 나오는지 확인하면 된다.

 

storybook을 사용해서 컴포넌트를 잘 설계하고 이 컴포넌트를 잘 조립하여 페이지를 만들면, 규모가 큰 프로젝트의 경우 아주 효율적으로 개발을 진행할 수 있다!