✨ 소프트웨어 설계에서 기능단위로 분해하고 추상화되어 재사용 및 공유가능한 수준으로 만들어진 단위를 모듈이라고 하고, 소프트웨어의 성능을 향상시키거나 시스템의 디버깅, 시험, 통합 및 수정을 용이하도록 하는 소프트웨어 설계 기법을 모듈화라고 한다.
문제
티니박스 프로젝트 중 진행 기간이 점점 늘어나고, 팀원도 교체되면서 공통 컴포넌트나 함수들이 적절히 사용되지 못하고 있었다. 특히 공통 컴포넌트를 만들어도 문서화가 되지 않아서 한 번 통보 후에 다들 잊어버리기 일수였다.
해결
그래서! 새 프로젝트에서는 재사용성을 더 고려하고 조금 더 신중하게 작업해서 문서화 하는 것이 좋겠다고 생각했다.
전에 StoryBook에 대해 들은 적이 있어서 해당 기술을 사용하고 싶었으나, 이번엔 React Native라서 사용성이 좋지 않을 것으로 보였다. 그래도 호기심에 살짝 해보려고 했으나 install 과정부터 에러나서 안되겠다 싶었음
그래서 이건 티니박스 기능 완료 후 리팩토링하면서 적용하는걸로 미뤄두고... 이번 미치 프로젝트에서는 노션에 정리하기로 했다.
고생했다 나 자신
이렇게 각 페이지를 만들고 페이지 안에는 사용 예제와 설명, props 등을 적어뒀다.
가장 신경 쓴 부분은 Example 및 Description.
Alert같은 경우 항상 제일 화면 앞단으로 실행되기 때문에, 굳이 각 페이지마다 컴포넌트를 불러오지 않고 App.tsx에 컴포넌트 하나만 두고 내용만 바꿔도 괜찮겠다는 생각이 들었다. 로딩 스크린도 마찬가지. 그래서 커스텀 훅을 통해 Alert를 사용하도록 했다.
또, Toast 같은 경우 라이브러리를 사용하여 show를 조절하기 때문에 팀원들을 위해 반드시 사용법을 잘 정리해야겠다고 생각했다.
Alert 명세서
후기
- 라이브러리나 커스텀 훅 등 사용법이 다양하다보니 직접 만든 나도 헷갈리고 사용법을 까먹기 쉬운데, 정리해둬서 코드 뒤지지 않고 빠르게 적용할 수 있었다.
- 사용하기 위해 코드를 분석하고 테스트해보지 않아도 돼서 작업 시간 단축
- 코드 찾아봐도 모르겠으면 물어보고 답할 때까지 기다려야했는데(코어시간 없음), 물어볼 일이 줄어 시간 단축
- 팀원들의 칭찬은 덤
- 팀에서 공통 모듈 빼는 일은 거의 나만 했었는데 다른 팀원이 "이 부분은 제가 공통 컴포넌트 제작해볼게요!" 하고 참여해주셨다. 같이 성장하는 것 같아서 뿌듯
여러모로 문서화의 중요성을 알았고, 모듈화 하는 과정에서도 재사용성 고려, 의미론적 접근 등 여러가지 경험을 하며 많은 도움이 됐다.
참고자료
