Backbone.js

Primal Skill Programming 블로그의 요약/번역 글입니다

---

Backbone.js와 AngularJS

2010년 배포된 Backbone.js는 클라이언트 사이드 웹 앱이 구조적으로 가져가야 할 틀을 제시했고 Single Page Application (SPA) 이란 개념에 첫 시작을 끊었습니다. Backbone.js가 프론트엔드 개발에서 개념적으로 큰 변화를 시작한 것에 동의하는 개발자는 많을겁니다. 물론 그 원천은 YUI Library에서 시작했지만요.

Backbone.js가 생기기 전에는 대부분의 웹 사이트는 서버에서 HTML과 CSS를 클라이언트 브라우저로 전달하고 점진적으로 JS를 넘겨 UX를 입히는 방식이었습니다. 그래서 “점진적 향상”이라는 용어가 붙었죠.

웹 사이트들에 상호작용 요소가 많아지면서, 클라이언트 사이드 데이터 모델, 서버 사이드 모델, 그리고 DOM의 싱크를 맞추는 게 중요했습니다. Backbone.js는 이 문제를 Model View Controller (MVC)를 기반으로 한 설계로 풀어나가려고 했고 이는 컴포넌트 기반 웹 개발에 중요한 마일스톤이 되었습니다.

구글의 아이디어로 시작된 Angular.js도 2010년에 배포되었습니다. Angular.js는 Backbone.js와 달리 단순한 라이브러리가 아닌 수많은 기능이 탑재된 JavaScript 프레임워크였습니다. Angular는 “directives”라는 새로운 개념을 제시했고 이는 HTML syntax를 확장시켜 개발자들이 커스텀 HTML 요소들을 작성할 수 있게 해주었습니다. 이후 이는 컴포넌트 기반 웹 개발에 중요한 개념으로 자리 잡았습니다. Angular에 의하면 “Directives”는 재사용 가능한 컴포넌트에 대한 실마리를 제공했고 이는 구조적으로 더 유지 보수하기 좋고 가독성이 좋은 코드를 작성할 수 있게 해주었습니다.

이러나 저러나, Angular.js와 Backbone.js는 개발 커뮤니티에서 더 효율적이고, 유지 보수 가능하고, 확장성 있는 클라이언트 사이드 앱에 대한 논쟁을 불 붙였고 컴포넌트 기반 웹 개발에 대한 방향성을 제시했습니다.

CoffeScript로 트랜스파일링 하기

JS 프레임워크에서 CoffeScript가 기여한 점은 “transpiling” 기술을 선보인 것입니다. 기존 JS에 불만을 가진 개발자들은 JS보다 좀 더 개발하기 편하고 쉬운 새로운 언어를 만들어서 이를 JS로 다시 변환 시키는 방식을 고안냈습니다.

Syntax 이외에도 갖가지 기능들을 포함 시켜 웹 개발 과정을 좀 더 단순화 시켜주었으며 이중 몇 개의 기능들은 JS에 다시 흡수되기도 했습니다.

JS를 뒤집어 놓은 Node.js

현재 많은 JS 표준과 클라이언트 사이드 기술의 급진적인 발전은 Node.js가 크게 기여했다고 생각합니다. Node.js 이전에 클라이언트 사이드에서 JS는 단순히 웹에 상호작용 요소를 넣기 위한 개발 언어였습니다. JS 개발 툴 이라는 것이 전무했으며, 개발자들은 JS 런타임 실행 환경을 브라우저에 의존하고 필요 시 수동으로 서버사이드에서 코드 경량화 처리나 합성을 구현했습니다.

Node.js의 등장으로 개발자들은 JS를 브라우저가 아닌 다른 환경에서 실행할 수 있었습니다. Node.js는 JS를 아무 환경에서 실행 시킬 수 있고, 반복적인 일 자동화, 클라이언트와 서버에서 모두 같은 개발 언어로 개발 프로세스 단순화 등 여러가지 이점을 가져올 것이라고 약속했고 기대했던 것과는 다르지만 많은 Node.js를 사용하기 시작했습니다.

특히, Node.js 덕분에 JS 개발 환경에 도움이 되는 툴들이 많이 생겨났으며 Grunt, Gulp, Webpack, Babel 등 JS 생태계에 유용한 것들이 많이 개발되었습니다.

Node.js의 또 다른 업적은 NPM입니다. JS 패키지 매니저인 NPM은 개발자들이 JS 라이브러리와 툴을 좀 더 쉽게 설치하고 공유하고 배포할 수 있도록 해주었습니다.

React와 Tool 굴레에 빠져버린 웹 개발

풍부한 기능과 상호 작용 요소를 가진 완전한 SPA를 만들 수 있는 시대까지 왔고 이쯤 React가 등장했는데 따로 설명은 필요 없을 것 같네요.

오늘 날 복잡해진 프론트엔드 웹 개발 생태계에 선두주자는 아니었지만 확실히 React는 웹 개발에 “React 방식”을 전파했으며 많은 이들이 영향을 받았습니다. 성능이 뛰어나면서 상호작용 요소가 많은 웹 앱을 끊임없이 발전시키려는 욕구, 모듈 기반 JS 에서 무수히 많은 툴들, 최신 기술을 따라가지 않으면 안될 것 같은 테크 리드들의 선택들이 현재의 프론트엔드 생태계를 만들었다고 해도 과언이 아닙니다.

제가 처음 React를 접한건 2014년-15년 쯤 한 실리콘 밸리 클라이언트의 테크 리드들이 React의 Flux 아키텍처에 완전히 매료되어 있던 걸 봤을 때 입니다. 당시 저는 웹 개발 커뮤니티가 옹호하던 JSX에 반감을 가지며 “도대체 누가 JS에 HTML을 작성한다는거야?” 라고 생각했었습니다.

하지만 결국 HTML in JS는 현실이 되었고 이후 CSS in JS까지 등장했습니다. 늘 그렇듯 웹 개발 기술이 마음에 들지 않더라도 참고 사용하는 법을 익혀야 합니다. 요즘은 앱 상태를 브라우저에 관리하고 반응하는 것이 대세가 되었더군요.

JS 중심으로 개발 환경을 구축하는 것을 React가 시작했고 Vue가 이어가면서 markup과 style까지 한번에 작성해서 “한번 작성하고, 여러 곳에서 쓰는” 컴포넌트를 장려했습니다. 심지어 React는 React Native까지 만들며 모바일 환경에 까지 영향을 미쳤습니다.

추가적으로 많은 사람들이 React가, 정녕 해결하고자 하는 문제에 맞는 올바른 툴인지 고민하지 않고, 사용하면서 React를 포함한 메이저 프레임워크들을 고치기 위해 더 많은 툴과 JS 모듈들이 생겨나게 되었습니다.

---

다음 글에서 이어집니다! (TBC)

원글: https://primalskill.blog/a-brief-history-of-javascript-frameworks

Single Page Application 방식을

바닐라 자바스크립트로 일전에 구현해서

샘플 프로젝트를 통해서 공유한 적이 있는데

동적 스크립트 관리 및 MVC 패턴 컨트롤 공통화 작업

그리고 개발 및 운영 분리 관련 공통화 작업을 마쳤습니다

추가로 React의 상태관리 같은 기능을 구현하기 위해

backbone js를 내장시켜서 같이 올려놓았으니

혹시 필요하신 분들은 가져다가 활용해보시고

피드백 주시면 감사하겠습니다

https://github.com/heesu-ahn/commonWebService