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를 번역한 포스팅 입니다.

링크

댓글

  1. 안녕하세요
    저는 라이언로켓이라는 스타트업에 다니는 정승환이라고 합니다.

    블로그 내용들을 보다가, 제안드리고 싶은 부분이 있어서
    이렇게 댓글 남깁니다.
    혹시나 "온라인 강의" 에 대해서 관심이 있으시면
    hwan@lionrocket.ai로
    메일 한 번 주실 수 있으실까요?
    메일로 자세한 내용 나누고 싶습니다

    감사합니다.
    좋은 하루되세요 :)

    답글삭제
  2. 안녕하세요! 리액트로 webOS기반의 티비앱을 만들려고 하고 있습니다.
    enact cli로 만들어진 프로젝트를 빌드하여 실행해보면 잘 나오는데, 제가 만든 react 프로젝트를 enact 추가하여 enact pack을 통해 빌드하여 실행하면 검은 화면으로 아무것도 나오지 않습니다.

    혹시 어떤 부분을 손보는게 좋을까요?
    웹팩 설정등을 따로 다뤄보고 싶은게 많아서 enact cli를 이용하지 않고 사용해보려 하는데 잘 안되네요...

    답글삭제
    답글
    1. 안녕하세요. 검은 화면이라 하심은 실행이 되었는데, 렌더가 안되었다는 이야기 인가요? 에러로 인해서 실행이 되지 않았다는 이야기 인가요? 에러 메시지가 뭐라고 나오나요? 콘솔 로그등에 정보를 알아야 답변을 드릴 수 있을것 같습니다.
      참고로, 웹팩 설정등을 따로 수정해서 사용하고 싶으시다면, 꼭 eject를 하고 수정하시기 바랍니다.
      https://enactjs.com/docs/developer-tools/cli/ejecting-apps/

      enact 관련 질문은 위 포스팅 마지막에 걸어놓은 gitter 에 하시면, 저 말고도 다른 전문가 분들이 답변을 주실 수도 있습니다 :)

      삭제
    2. 작성자가 댓글을 삭제했습니다.

      삭제
    3. 디버깅 하는 방법을 몰랐는데 말씀주셔서 찾다보니 알게 되었습니다 감사합니다!
      아직은 영어가 부족해서 좀 더 공부하면서 gitter에다가 다음에 여쭤보도록 하겠습니다

      삭제

댓글 쓰기

이 블로그의 인기 게시물

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

Enact 개발환경 설정