일관된 UI를 더 빠르게 구축하기 위해 UI 구성 요소를 공유 (Sharing UI Components to Build Consistent UIs faster)

이 글은 Jonathan SaringSharing UI Components to Build Consistent UIs faster글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

bit.dev를 사용하여 진정으로 재사용 가능한 구성 요소를 공유하여 UI의 일관성을 유지하고 보다 빠르게 구축할 수 있습니다.


presentation

The Bit workflow: UI 구성 요소를 빌드, 재사용 및 동기화합니다.
오늘날의 앱 개발 세계 UI 구성요소(React, Vue, Angular, Stencil 등)는 앱의 UI의 모듈 구성 요소입니다.
모듈형 유닛으로서, 구성요소는 개발 속도를 높이고, 버그를 줄이고, 코드를 보다 쉽게 유지 관리하며, 다양한 화면과 애플리케이션에 걸쳐 사용자에게 일관된 환경을 제공하기 위해 서로 다른 프로젝트(및 팀 구성원) 간에 공유될 수 있고, 공유되어야 합니다.
그러나 작업에 적합한 도구와 지식이 없어도 재사용 가능한 UI 구성 요소를 공유하는 것이 말처럼 쉬운 일이 아닙니다. 여러 애플리케이션에서 UI 구성 요소를 공유하고 재사용할 수 있는 유용한 방법의 예를 몇 가지 보여드렸습니다. 이것이 도움이 되기를 바라며, 아무 말씀이나 하고 물어보세요.
내용은 다음과 같습니다.
  • UI 구성 요소를 포장하고 재사용하는 것이 어려운 이유는 무엇입니까?
  • 구성 요소에서 Bit를 사용하여 재사용할 수 있는지 확인합니다.
  • 파일을 구성 요소로 추적하고 + 종속성을 자동으로 정의합니다.
  • 재사용 가능한 컴파일러 + 빌딩을 단독으로 적용합니다.
  • 버전 + 구성 요소를 내보냅니다.
  • 이트합니다.
  • UI 라이브러리를 점진적으로 구축합니다.

UI 구성 요소를 포장하고 재사용하는 것이 어려운 이유는 무엇입니까?

presentation
bit.dev와 공유되는 구성 요소 컬렉션입니다
지금까지는 구성 요소를 포장하는 작업으로 인해 개발자는 전송, 번들링, 레거시 브라우저 지원, 크기, 매핑, 유형 감지 및 기타 수많은 최적화 작업을 수행할 수 밖에 없었습니다. 이 정도면 아이디어를 차단할 수 있습니다.
기존에는 재사용할 수 있도록 구성 요소를 포장하는 작업에는 애플리케이션에서 다른 재구성으로 구성 요소를 분할해야 했습니다. 각 구성 요소는 수동으로 종속성 등을 정의하는 등 패키지로 보일러 도금해야 했습니다. 또한 프로젝트 외부에서 실행할 수 있도록 모든 구성 요소에 대해 빌드 및 테스트 단계를 구성해야 합니다. 모든 변경 사항은 공유되는 모든 구성 요소의 구성에 대한 리액터링을 필요로 합니다. 이것은 많은 작업입니다.
오늘날에는 Bit (GitHub)라는 공유 UI 구성 요소에 대한 새로운 테이크가 있습니다. Bit는 기존 구성 요소를 점진적으로 재사용할 수 있도록 지원하여 대부분의 프로세스를 자동화하고 필요한 다른 사항을 학습하고 팀이 공유 및 재사용할 수 있는 모듈식 컬렉션에서 공유할 수 있도록 지원합니다.
그런 다음 재사용 가능한 구성 요소를 배포하여 사용자가 코드에서 구성 요소를 쉽게 찾고, 시도하고 사용할 수 있도록 합니다. 마지막으로, 모든 사람이 자신의 프로젝트에서 구성 요소에 대한 업데이트를 제안함으로써 공동 작업을 수행할 수 있으므로 구성 요소를 채택하는 것이 간단한 선택이 될 수 있습니다.
아래에서는 이 워크플로우를 잠시 검토하여 직접 사용해 볼 수 있습니다. 이 워크플로우는 UI 라이브러리가 있든 없든 간에 작동하며, 비트는 구성 요소를 공유할 때 "상관"되지 않습니다.

구성 요소에서 Bit를 사용하여 재사용할 수 있는지 확인합니다

presentation
Bit는 다음과 같은 도구를 제공하여 재사용 가능한 구성 요소를 더 많이 구축할 수 있도록 지원합니다.
A) 자동 종속성 정의 및 쉽게 적용할 수 있는 빌드 구성과 같은 기능을 사용하여 구성 요소 패킹 작업의 대부분을 자동화합니다.
B) 프로젝트 외부에서 각 구성 요소를 테스트, 빌드 및 렌더링하여 각 구성 요소의 재사용 가능성의 실제 상태를 확인합니다.

짧은 설정

시작하려면 프로젝트의 작업 공간에 대해 Bit를 설치(install Bit)하고 초기화해야 합니다. 이는 두 가지 CLI 명령을 사용하여 상당히 직진적입니다.
$ npm install bit-bin --global $ cd project-directory $ bit init
그런 다음 bit.dev로 이동하여 빠르게 무료 계정을 만듭니다. 그런 다음 공유 UI 구성 요소를 호스팅할 수집을 생성합니다. 마지막으로 bit login을 실행하여 CLI를 bit.dev 컬렉션에 인증합니다.
$ bit login

재사용 가능한 구성 요소를 정의하고 추적합니다.

이제 bit add 명령을 사용하여 프로젝트에서 구성 요소로 track a set of files하겠습니다. 그러면 작업 공간에서 구성 요소 추적을 시작하는 "tell" Bit가 표시됩니다. 또한 각 구성 요소의 종속성을 분석하고 패키지를 자동으로 생성하기 위해 Bit를 "tell"합니다.모든 구성 요소에 대한 package.json입니다. 멋있죠?

hello-world 구성 요소 하나로 다음과 같은 앱 구조를 가정해 보겠습니다.
. ├── package.json └── src ├── hello-world.js └── index.js
bit add를 사용하여 Hello-world 구성 요소에 어떤 파일이 이 구성 요소의 일부인지 알려드리겠습니다.
$ bit add src/hello-world.js src/index.js --id hello/world tracking component hello/world: added src/hello-world.js added src/index.js
이제 빠른 bit status를 실행하여 구성 요소가 추적되고 프로젝트에서 추가 파일이 필요하지 않은지 확인합니다.
$ bit status new components > hello/world... ok
이제 구성 요소를 실행하기 위해 필요한 모든 파일이 꽉 차 있습니다. 그러나 아직 빌드 단계(compiling/transpiling)가 구성되지 않았습니다. 프로젝트 외부에서 실행하려면 이 단계가 필요합니다.

재사용 가능한 컴파일러를 적용합니다.

컴파일러를 컴파일러를 컴포넌트에 적용하여 승인 프로젝트의 컨텍스트 밖에서 독립 실행형 유닛으로 구축하도록 하겠습니다. Bit는 재사용 가능한 UI 구성 요소에 대해 구현된 모범 사례를 제공하는 사전 제작된 컴파일러(pre-made compilers)입니다.
Bit를 사용하여 React 표준 컴파일러(React standard compiler)를 작업 공간으로 가져와서 구성 요소에 적용하여 어디에서나 빌드하고 실행할 수 있도록 하겠습니다. React TypeScript로 작업하는 경우 일치하는 컴파일러 등을 선택합니다.
$ bit import bit.envs/compilers/react --compiler the following component environments were installed - bit.envs/compilers/babel@0.0.7
이제 bit build를 실행하여 구성 요소가 프로젝트의 컨텍스트와 완전히 격리되어 재사용할 수 있도록 합니다.
$ bit build
이 구성 요소는 독립 실행형 장치로 구축되며, 이제 모든 새 프로젝트에서 자체 정의된 빌드 구성을 사용하여 즉시 사용할 수 있습니다.
이제 구성 요소를 버전화하고 공유할 수 있습니다! 🎊

구성 요소를 버전화하고 내보냅니다.

다음으로 구성 요소의 버전에 태그를 지정합니다. 비트는 워크스페이스의 모든 구성 요소 간의 관계를 추적하고, 개별 구성 요소와 영향을 받는 종속 요소를 함께 버전(semver) 및 업데이트할 수 있도록 합니다.
이 경우 hello-world 구성 요소에 대해 0.0.1 버전을 설정하겠습니다.
$ bit tag hello/world 1 components tagged | 1 added, 0 changed, 0 auto-tagged added components: hello/world@0.0.1
이제 빠른 bit status를 실행하여 해당 구성 요소가 버전화되고 내보낼 준비가 되었는지 확인합니다.
참고: 구성 요소에 대한 세부 정보를 추가할 수 있습니다. Bit는 자동으로 추출되어 Bit.dev 컬렉션에 표시됩니다. 여기에서 자세히 알아봅니다.
마지막으로 구성 요소를 bit.dev 컬렉션으로 내보냅니다(publish).
$ bit export user-name.collection-name 1 component exported to collection user-name/collection-name
이제 컬렉션으로 이동하여 구성 요소를 확인합니다. 여기에 설명된 대로 구성 요소의 렌더링된 샌드박스(sandbox)에 예를 저장할 수 있습니다.

공유 UI 구성 요소를 재사용합니다.

presentation
구성 요소를 bit.dev에 공유하면 두 가지 방법으로 사용할 수 있습니다. 첫 번째 방법은 표준 npm/yarn 클라이언트를 사용하여 bit.dev 패키지 레지스트리의 다른 패키지처럼 구성 요소를 설치합니다.
presentation
예: bit.dev 레지스트리에서 npm을 사용하여 hero 구성 요소를 설치합니다.
특정 구성 요소에 대해서만 설치하고 업데이트를 받으므로 앱의 번들 크기를 가볍게 하고 신속하게 개발할 수 있습니다.
두 번째 방법은 구성 요소를 프로젝트에 비트 가져오는 것(bit import)입니다. 이렇게 하면 구성 요소의 소스 코드가 들어오는 동시에 Bit를 구성 요소로 추적합니다.
이 워크플로의 큰 장점은 이제 소모적 프로젝트(!)에서 구성 요소의 소스 코드를 수정하여 구성 요소를 쉽게 채택할 수 있다는 것입니다. 그런 다음 변경 사항에 새 버전으로 태그를 지정한 후 다른 프로젝트에서 변경 사항을 끌어와 구성 요소의 버전을 병합할 수 있도록 해당 변경 사항(사용 권한 부여)을 컬렉션으로 다시 내보낼 수 있습니다.

점차적으로 UI 라이브러리를 구축합니다.

이 워크플로우를 통해 구성 요소를 쉽게 분리, 포장 및 재사용할 수 있습니다. 또한 제공에 집중하지 않고 자신만의 모듈형 UI 라이브러리를 점진적으로 구축할 수도 있습니다. :)
애플리케이션에서 구성 요소를 지속적으로 재사용하고 짧은 피드백 루프에 반복하여 각 구성 요소가 프로젝트에서 격리된 상태로 빌드, 테스트 및 렌더링할 수 있는지 확인하고 이를 bit.dev 컬렉션에 공유할 수 있습니다.
다음 번에 사용자 또는 팀 구성원이 구성 요소를 필요로 할 때 해당 구성 요소가 있는지 빠르게 확인하여 재사용하거나 업데이트할 수 있습니다. 그렇지 않은 경우 구성 요소를 작성한 후 공유 UI 구성 요소 모음으로 내보냅니다.
짧은 시간 내에 재사용을 통한 제공 속도를 높이는 동시에 UI의 일관성을 높일 수 있어야 합니다. 또한 모듈화를 통해 유지보수를 간소화하고, 새로운 팀 구성원을 보다 쉽게 참여시키는 등의 부가 가치도 발견할 수 있습니다. 마음껏 시도해보세요.
읽어주셔서 감사합니다! 🍻

이 글은 번역 글입니다. 원본 링크입니다.



안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz