Enact 컴포넌트의 호환

Enact 컴포넌트의 호환_20190220

Enact 컴포넌트의 호환

상호 운용성(Interoperability)은 Enact팀에게 매우 중요합니다. 오픈소스 프레임워크로서, Enact 컴포넌트를 다른 프로젝트에서 사용할 수 있다는 점과 광범위한 자바스크립트 생태계의 컴포넌트들을 Enact와 함께 사용할 수 있다는 점이 중요합니다. 결론은 Enact가 폐쇄된 생태계가 아니라는 것 입니다. 단순히 React 앱을 작성하는 통일된 방법일 뿐 입니다.

CodeSandbox 에서 구동중인 Enact Moonstone UI 라이브러리

이와같이, Enact는 다른 React 라이브러리와 잘 동작하며, npm에서 많은 컴포넌트들을 가져와 Enact 프로젝트에서 사용할 수 있습니다. 가장 일반적인 통합 시나리오 두 가지는, Enact CLI를 이용하여 외부 패키지를 사용하거나, create-react-app 같은 다른 빌드 시스템에서 Enacgt 컴포넌트를 사용하는 것 입니다.

Enact에서 외부 패키지 사용하기

Enact 개발을 처음 시작했을때 create-react-app은 존재하지 않았습니다. React를 사용하여 작업하는 것을 단순화하려는 우리의 목표를 위해 Enact CLI 도구를 만들게 되었습니다. 이 도구는 현재 create-react-app이 동작하는 방식과 유사합니다. Enact 프로젝트를 쉽게 생성, 테스트 및 유지관리 할 수 있습니다. Enact CLI는 앱 개발자가 구성해야 하는 Webpack, Babel, ESLint, Jest 등의 무수히 많은 도구를 모두 처리합니다. 우리는 이러한 모든 것들이 원활하게 함께 동작하기위한 노력을 기울였습니다.

CLI는 Typescript 템플릿을 포함하여 많은 수의 템플릿을 지원합니다. 템플릿으로 부터 작업하는 것은 새로운 앱을 시작하는 좋은 방법입니다.

간단한 npm install 만으로 대부분의 패키지를 Enact 에서 사용할 수 있습니다. Webpack과 Babel의 default는 다양한 오픈소스 소프트웨어에서 작동하도록 신중하게 선택되었습니다.

특별한 Webpack 플러그인이 필요한 패키지조차도 Enact와 함께 사용할 수 있습니다. CLI eject 명령을 사용하여 모든 configuration option을 App 디렉토리에 복사하고 CLI 환경에서 제거하십시오. 이 시점에서 앱은 완벽하게 여러분이 제어하게 됩니다.

다른 빌드 시스템에서 Enact 사용하기

기존 개발하고 있는 React 앱이 있는 경우 Enact를 추가하는 것도 간단히 할 수 있습니다. Enact를 pre-transpile 에 의존하지 않는 ES5와 CSS로 npm에 배포합니다. Enact 패키지는 npm의 @enact 네임스페이스에서 사용할 수 있습니다.

예를 들어 컴포넌트와 HOC 유틸리티가 포함된 core패키지를 설치하려면 다음을 수행하면 됩니다 : npm install @enact/core. 다른 패키지도 비슷한 패턴을 따릅니다.

Enact의 @enact/i18n 패키지가 올바르게 작동하려면 특별한 Webpack plugin이 필요합니다. Enact를 사용하여 국제화(i18n) 기능을 이용하려면 Webpack config에 플러그인을 추가해야 합니다. 또한, @enact/moonstone 이 의존적이므로 플러그인이 없으면 국제화 기능을 사용할 수 없습니다.

결론

위에서 언급했듯이 Enact는 React와 현재 자바스크립트 생태계를 구성하는 다른 모든 도구위에 구축된 프레임워크 입니다. 상호 운용성(Interoperability)은 Enact의 핵심 기능입니다. 더 넓은 React 커뮤니티와 언제나 함께 하고 싶습니다. Enact가 유용하다고 생각되면 언제든지 사용할 수 있습니다.

마지막으로 우리가 함께 일하는 가장 좋은 방법은 참여하는 것입니다. 우리의Gitter chat 이나 Enact on GitHub에 들러보세요. 우리는 여러분과 함께 개발하기를 기대합니다!

멋진 동료이자 Enact 개발자인 Roy Sutton 이 작성한 원문 Enact and Interoperability를 번역한 포스팅 입니다.

링크

댓글

이 블로그의 인기 게시물

Enact 프레임워크를 오픈합니다.

Enact 개발환경 설정

Hello Enact #1 - 기본