React & webpack 관련해서 컴포넌트를 CDN 으로 제공할때 관련하여 질문 좀 드립니다.

안녕하세요. 현재 Go 라는 언어로 서버를 구성하고

화면단에서는 React를 사용하고 있습니다.

현재는 webpack 을 사용하고 있지 않지만 도입을 원하는 상황인데 문제점이 있어서 관련하여 질문 드립니다.

예를들어 React 컴포넌트 "C"를 "B서버"에서 사용할때 "A서버"의 babel로 컴파일 한 js 파일을 불러와서 사용하고 있는데요.

A서버의 Ccompoent.js

import Dcomponent form Dcomponent

class Ccomponent extends React.Component {
 render(){
   return(
      <Dcomponent/>
   )
 }
}

B서버 자바스크립트에서 Ccomponent render

ReactDOM.render(React.createElement(Ccomponent , null), document.getElementById('domnode'));

Ccomponent , Dcomponent 모두 각각 기능을 하는 컴포넌트 일때

webpack 으로 번들링 하면 캡슐화 때문에 Dcomponent를 바로 호출 할수가 없더군요.

webpack option에 Dcomponent까지 따로 entry파일로 지정해서 별로 파일로 만들어 주는것 말고는 방법이 없을까요?

다른 서버에 컴포넌트를 올려서 불러와야하는 이유가 궁금합니다. ^^

그리고 다른 서버의 js를 어떤 방법으로 불러오셨나요?

일단 requirejs 로 동적으로 불러오구요.

동일한 컴포넌트로 여러 서비스에서 사용하기 때문에 서버 한곳에 있는 컴포넌트 js를 호출해서 사용하고 있습니다. ^^

저는 동일한 컴포넌트를 여러 프로젝트에서 재사용할 경우, npm으로 패키징해서 사용합니다.
이렇게 하는 이유는 유지보수도 간단해지고, 버그나 네트워크문제 등이 끼치는 영향을 isolate할 수 있습니다.
버전관리를 통해서 통제도 쉽구요.
그리고 이렇게 해야 webpack을 통해 중복을 제거해서 bundle사이즈를 최소화하는것을 제대로 사용할 수 있다고 생각해요.
컴포넌트의 테스트와 개발도 용이하구요.

공개되면 안되는 코드라면 npm private를 사용해보세요.
https://docs.npmjs.com/private-modules/intro

1개의 좋아요

@hangru1106 님, 여러 프로젝트 재사용의 목적이면 저도 @DongWoo_Gim 님 답변에 동의합니다. :thumbsup: