티스토리 뷰
발생일: 2015.09.30
키워드: backbone, 백본, react, 리액트, backbone to react
문제:
우리 프로젝트는 백본을 기반해 자체 제작한 프레임워크를 사용하고 있다.
프로젝트를 처음 시작한 때는 2년 전이었고,
당시에 백본은 안정화되기도 했고 트렌드에도 전혀 뒤쳐지지 않은 기술이었다.
최근에는 (백본은 여전히 안정적이지만) 트렌드가 많이 변했다.
리액트가 등장하면서, Virtual DOM 개념으로 MVVM 에서 단일 플로우를 갖는 방향으로 패러다임도 변경되었다고 생각했다.
우리 프로젝트도 리액트로 전환해야 할까... 고민이다.
해결책:
우리 프로젝트는 규모도 있고, 안정화 단계에 들어가서 서비스 중인 상태이다.
개인적으론 코드 품질도 좋은 편이라 생각하고,
거의 대부분의 코드가 리뷰되어 있어서 멤버들이 현재 코드에 많이 익숙해져 있는 상태다.
그 외, 개발 환경이나 빌드, 배포도 최적화되어 있다.
비용을 생각하면 굳이 현 상태를 바꾸면서까지 리액트를 도입하지 않아도 된다.
전환 시 장점이라고 생각되는 건,
개발자의 동기 부여, 리액트 서버 렌더링 처리 두 가지이다.
장점에 비해 비용이 크겠지만,
개인적으론 장기적인 관점에서 프로젝트는 트렌디한 기술 스택으로 유지하는 게 큰 장점이라 생각한다.
프로젝트를 매력적으로 유지해야 다음에 더 좋은 개발자를 유지할 수도 있을 것이고 말이다. :)
팀에 리액트로 전환하는 것을 제안했고, 단계적으로 적용해보기로 했다.
기존에 백본 기반의 프로젝트에서 리액트로 전환한 케이스를 몇 가지 검색해봤고,
그 중엔 칸 아카데미의 경험이 가장 인상깊었다. (현재는 모두 리액트로 전환했다고 한다)
특히, 업무 때문에 새 기술을 익힐 여유가 없는 기존 멤버들 대신,
인턴들이 새 기술을 도입하고 기존 멤버들은 리뷰를 통해 자연스럽게 익히도록한 접근 방식이 인상깊었다.
우리도 비슷한 상황이라서, (다들 업무와 육아에 바쁘다.ㅠ_ㅠ)
몇 가지 중요도가 낮은 페이지(예: 관리자 페이지 등)에 먼저 도입해보고, 팀원들에게 공유해봐야겠다.
아직 확정된 건 아니지만, 리액트도 전체 페이지에 도입하는 대신 점진적으로 접근해보려고 한다.
기존 백본 기반으로 자체 제작한 프레임워크와 기존 코드들은 그대로 두고,
신규로 작성하는 기능의 뷰 단의 컴포넌트만 리액트로 전환해볼 생각이다.
멤버들이 두 가지 스타일의 코드와 플로우를 동시에 익혀야 하는 부담이 생길 걸로 예상되긴 하는데,
전체 코드를 바꾸지 않고 적은 비용으로 전환할 수 있는 방법일 것 같다.
나머지 이야기를 다음에 공유해볼 기회가 생기면 좋겠다.ㅎㅎ
----
Khan Academy 에서 Backbone View + Handlebars 를 React 로 전환한 경험
- 리액트의 최적화된 렌더링이 칸 아카데미의 컨텐츠에 적합했음
- 기존 개발자들은 신규 기술을 받아드릴 여유가 많지 않아, 인턴들을 필두로 리액트를 도입
- 기존 멤버들은 코드 리뷰를 통해 리액트를 익히게 되었음
- jQuery, Backbone View, Handlebars 코드를 React 로 전환할 수 있었음
- 백본 모델은 그대로 사용하고 뷰 영역만 전환
- BackboneMixin 믹스인 사용
+ 인턴을 사용해 새 기술을 도입하는 방식이 참신했다. 적용해볼만한 접근 방식인 것 같다.
+ 기존에 우리 프로젝트와 동일한 구성이었고, 기존 구조를 유지한 체 뷰 단만 교체한 거라 우리도 충분히 도입할 만한 것 같다.
+ 온전한 리액트 엘리먼트 대신, BackboneMixin 으로 백본 뷰를 유지한 체 리액트 컴포넌트를 도입하는 게 비용 대비 적절한 선택이었다고 생각한다.
Integrating React with Backbone
- 백본을 유지한 체 리액트를 도입한 방법에 대한 가이드
- 백본 뷰의 render() 메서드에서 리액트 컴포넌트를 자신의 엘리먼트(this.el)에 렌더링하는 방식
+ BaseView 를 생성하는 코드를 보니, 같은 맥락으로 ReactViewAdapter 같은 클래스를 만들어 구현하면 될 것 같다.
+ 우리 프레임워크에 맞게 라이프사이클을 수정할 것들은 좀 있을 것 같다. 특히 엘리먼트 렌더링 시점.
+ 리액트 컴포넌트를 작성하고, 다시 백본 뷰를 중복으로 작성하게 될 것 같기도 하다. 요곤 개선이 필요할 듯.
백본에 리액트를 통합하기 위한 플러그인
- backbone-react-component
+ 좀 더 활발하게 운용되는 것 같다.
- react.backbone
- 리액트를 백본에 적용하기 위한 플러그인
+ 예제에서 사용하던 플러그인인데, 업데이트가 활발하진 않다. 안정된 건지, 다른 라이브러리가 더 잘 쓰이는지 확인해봐야겠다.
+ 두 라이브러리 모두 코드의 양은 많지 않아서, 직접 작성하는 게 더 나을 수도 있겠다.
반응형
댓글
공지사항