모던 웹 개발 패키지로서의 형태 갖추기?

[synthresin]

#1. 여러 용도의 바리에이션(React, Jquery ...)이 한 패키지로 배포되어 사용될때 예상되는 문제.

아마 모든 확장 기능을 하나의 npm package 로 배포하면, 패키지가 설치될 때 필요 이상으로 디펜던시가 생길걸로 생각됨.
jQuery 용으로 쓰고 싶은데 React 가 dep 으로 걸려있다던가..
React 콤포넌트만 쓰고 싶은데 jQuery dep이 걸린다던가..

그래서 일단 핵심 로직 부분만 따로 패키지로 빼고, 추가로 그에 의존성을 가지는 jQuery, React 패키지를 만드는게 나을거 같다는 생각.
(아예 따로 만들어버리면 하드코딩으로 리엑트에만 맞게 편하게야 만들수 있겠으나, regex 로직이 업데이트 될때 그 변경점이 sync 가 되지 않아 별로 일거 같음.)
#2 React 에서 사용될때 변경되야 할점.

React 버전은, jQuery 처럼 셀렉터 뭉태기로 집어서 싹 다 바꾸는 방식이 아니라,
플레인 텍스트를 property 로 받으면, 그를 regex 로 검출해서 span 을 씌워준 다음에, 그 값을 렌더하는 방향이어야 함.
(다시 말해, dom 내용의 replace 개념이 아님)

대충 이런느낌?

export default class MultilingualComponent extends React.Component {

  createMarkup() {
    return new MultiLingual({
      text: text
    });
  }
  render() {

    return (
      <span dangerouslySetInnerHTML={createMarkup()}></span>
    );
  }
};

해당 콤포넌트의 사용은 이렇게

export default class Application extends React.Component {
  render() {
    return (
      <div>
        <MultilingualComponent text="섞어짜기 텍스트 abc" />
      </div>
    );
  }
};

따라서 현재 MuliLingual 가 어떤 텍스트를 받았을때 해당 텍스트를 span 으로 나누어감싸 리턴하는 기능까지만 가진다면. 리엑트는 그 상태에서 바로 적용이 가능할듯 하고.

jQuery 플러그인은, 그 기능을 사용해서 이케이케 알아서 dom 변경까지 해주도록 설계하면 되지않을까 라는 생각이 있음.