React Native 컴포넌트 관리를 위한 Bit

해당 글은 2021년 11월 21에 작성된 글입니다.

우리는 컴포넌트 관리&공유가 필요할까?

• 컴포넌트 공유가 필요한 프로젝트는 몇 개입니까?
  - 3개 이상
• 컴포넌트를 공유해야 하는 프로젝트는 얼마나 유사합니까? 예를 들어, 모두 동일한 구성의 동일한 CLI를 기반으로 합니까?
  -모두 React Native로 개발 진행 중
  - 새로운 프로젝트를 시작할 때 마다 src/Components/* 를 복사 붙혀넣기 하고 있음
  -이전 프로젝트와 비슷한 기능 또는 디자인이 있다면 코드를 참고하고 있음
• 공용으로 사용되는 컴포넌트들을 관리하는 저장소가 있습니까?
  - 있지만 최신화가 잘 안돼있음
  - 컴포넌트의 사소한 기능이나 디자인이 바뀌어도 모듈의 버전을 업데이트해야됨
• 공유 구성 요소를 구축하는 전담 팀이 있습니까?
  - 없음
• 팀은 기능 또는 비즈니스 도메인에 따라 분할됩니까?
  - 분할 되어가는 중
• 프로젝트, 마이크로 프론트엔드 및 공유 구성 요소에 대한 CI(지속적 통합)가 마련되어 있습니까?
  - 도입 고민 중
• 프로젝트의 레포지토리와 공유 구성 요소의 레포지토리에서 Git 워크플로는 무엇입니까?
  - 고민중

현재 우리의 위치는?

- 2번과 3번 사이의 과도기 상태

1. 단일 제품에 대해 작업하는 단일 프론트엔드 팀이 존재합니다. 이 구조는 초기 단계의 비즈니스에 일반적 입니다.
2. 회사는 성장하고 별도의 제품 세트를 개발하고 있습니다. 여러 팀이 존재하며 각 팀은 자체 제품을 담당합니다.
3. 팀은 독립적으로 유지되기를 원하지만 프로젝트 전반에 걸쳐 UI와 UX를 표준화하고 모든 애플리케이션 간에 공유되는 중앙 집중식 UI 구성 요소 라이브러리를 제공하는 중앙 집중식 팀을 만듭니다.
4. 여전히 복잡성이 증가하는 단일 애플리케이션에 의존하는 조직은 모놀리식 애플리케이션을 중단하고 마이크로 프론트엔드 아키텍처를 사용하기를 원할 수 있습니다.

Bit.Dev Quick Start

1. bit 설치

npm i -g @teambit/bvm

bvm install

echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc
or
echo 'export PATH=$HOME/bin:$PATH' >> ~/.zshrc && source ~/.zshrc

2. bit.dev 로그인후 remote scope 생성

3. react-native 프로젝트 생성 후 bit init

npx react-native init [projectName] --template react-native-template-typescript

cd [projectName]

bit init --harmony

4. Bit Workspace 환경 셋팅 workspace.jsonc 편집

{
  "$schema": "<https://static.bit.dev/teambit/schemas/schema.json>",

  "teambit.workspace/workspace": {

    "name": "test",
   
    "icon": "<https://static.bit.dev/bit-logo.svg>",
 
    "defaultDirectory": "{scope}/{name}",
   
    "defaultScope": "duople.test"
  },

  "teambit.dependencies/dependency-resolver": {
  
    "packageManager": "teambit.dependencies/pnpm",
    "policy": {
      "dependencies": {},
      "peerDependencies": {}
    }
  },
  
"teambit.workspace/variants": {
    "*": {
      "teambit.react/react-native": {},
      "teambit.dependencies/dependency-resolver": {
        "policy": {
          "peerDependencies": {
            "react": "17.0.2",
            "react-dom": "17.0.2"
          }
        }
      }
    }
  }
}

5. bit install

6. local bit 에 컴포넌트 추가

bit add <component path> -n <component namespace>
or
bit add <component path>/*

bit compile
bit start

7. 태그 남기기 (git commit처럼 변경 내용을 남깁니다.)

bit tag <componentID> --patch --message "first version"
or
bit tag --all --message "first version"

8. remote bit에 컴포넌트 push

bit login
bit export

1. 다른 프로젝트에 import 해오기

npm config set '@YourUserName:registry' <https://node.bit.dev>
npm install @YourUserName/componentScopeName.componentID
import { Component } from ‘@yourUserName/componentScopeName.componentID’;

Bit 장점

• bit CLI 제공
• 컴포넌트 마다 버전 관리를 할 수 있습니다. npm으로 공용 모듈을 관리했을 때 사소한 기능이나 디자인이 변경되면 전체 모듈의 버전을 올려야되는데 bit을 사용하면 변경된 컴포넌트의 버전만 올 릴 수 있습니다.
• 공개된 모듈의 컴포넌트만 별도로 import 할 수 있습니다. 기존 material-ui의 button을 사용하고 싶으면 material 전체를 install 되는데 bit을 사용하면 bit import mui-org.material-ui/button 만하면 됩니다.
• 컴포넌트 문서화가 자연스럽게 이루어집니다.
• Composition 생성으로 컴포넌트 미리보기가 가능하며 코드도 볼 수 있습니다.
• bit에서 권하는 best practices 내용이 참고 할 만 합니다.

아쉬운점

• git flow와 bit flow를 통합해서 생각하기 어렵습니다.
• bitbucket pipeline 연동이 안되는 것 같습니다.
• 생각보다 공개된 컴포넌트가 많지 않습니다.
• 참고 자료 부족

---

마치며…

• 우리에게 컴포넌트 모듈화는 꼭 필요한가요? 필요하다면 우선순위는 어떻게 설정할까요?
• bit과 비교되는 다른 서비스는 없을까요?
• 우리는 이 현상들을 문제로 인식하고 있나요?

---

참고 링크

1. https://docs.bit.dev/docs/workflows/workflows — bit 워크 플로우
2. https://docs.bit.dev/docs/best-practices — bit 모범 사례
3. https://harmony-docs.bit.dev/ — bit 공식 문서
4. https://harmony-docs.bit.dev/essentials/what-is-bit — bit 서비스에 대한 이해도를 높여줍니다.
5. https://brandres.medium.com/introduction-to-bit-dev-bit-harmony-for-managing-our-react-native-components-d623517db0e0 — react-native에 bit 환경 구성하기 (1)
6. https://brandres.medium.com/using-bit-dev-for-react-native-component-management-f018213e354a — react-native에 bit 환경 구성하기 (2)