logo
logo
프론트엔드
EmberJS
MVV (모델-뷰-뷰모델) 패턴에 기반을 둔 오픈 소스 자바스크립트 웹 프레임워크
StackOverflow 질문 수: 23979
사용 기업
직장
techstack-logo
드라마앤컴퍼니
기술 블로그 글
네이버
2016년과 이후 JavaScript의 동향
웹 프락시 도구인 Fiddler의 개발사 Telerik은 JavaScript 기술의 현재 경향과 전망을 살펴보는 보고서인 "THE FUTURE OF JAVASCRIPT-2016 AND BEYOND"(JavaScript의 미래 - 2016년과 그 이후)를 발표했습니다. 보고서는 JavaScript 커뮤니티를 대상으로 진행한 설문 조사의 결과와 저자들의 의견을 바탕으로 최신 JavaScript 기술과 JavaScript 프레임워크, 웹 이외 영역의 JavaScript 기술이 2016년과 그 이후에 어떻게 쓰이고 어떤 방향으로 변화할지 예상합니다. 이 글은 보고서의 저자 가운데 한 명인 TJ VanToll의 허락을 받아 몇 가지 의견과 내용을 추가해 보고서를 정리한 글입니다. 보고서의 전체 내용을 확인하고 싶으시면 다음 링크에서 파일을 다운로드하세요. * THE FUTURE OF JAVASCRIPT2016 AND BEYOND ECMASCRIPT 2016 웹 개발자가 아니더라도 소프트웨어 개발에 어떤 식으로든 참여하고 있다면, 최근 몇 년간 JavaScript의 진화는 물론 JavaScript가 세상을 집어삼키고 있다는 사실도 아마 잘 알 것이다. 보고서는 이미 발생한 과거나 현재의 상황을 다루기보다는 JavaScript의 언어적 특성과 커뮤니티의 미래를 전망한다. 좀 더 합리적인 전망을 위해 커뮤니티를 대상으로 진행한 설문 조사 결과를 바탕으로 저자들의 의견을 종합한 내용을 담았다. ECMASCRIPT 2015에 추가된 기능 가운데 어떤 기능이 2016년에 가장 주목할 만한 기능인가? 최신 JavaScript 명세인 ECMAScript 2015(이하 ES 6)에 추가된 기능 가운데 2016년에 가장 많은 주목을 받을 것이라 예상하는 기능은 '모듈'이다(그 다음으로 꼽은 것은 Promise 객체다). > 참고 > > ES 6의 모듈에 관한 더 자세한 내용은 "ES6 In Depth: Modules"를 참고한다. 네이티브 모듈 시스템은 JavaScript에서는 새로운 것이겠지만, 모듈이나 의존성 관리, 모듈 로딩은 새로운 개념이 아니며 많은 개발자가 기본적인 필요 사항으로 여기는 것이다. ES 6의 모듈 문법은 CommonJS의 콘셉트와 유사해 문법을 배우기는 쉽다. 그러나 모듈을 실제 서비스에 적용하는 작업은 복잡하다. ES 6의 모듈을 사용하려면 트랜스파일러(예: Babel)나 트랜스파일러를 사용할 수 있는 도구(예: webpack, SystemJS 등)를 사용해 코드를 변환해야 한다. 이런 번거로움 때문에 ES 6의 모듈을 사용하지 않았던 개발자도 2016년에는 모듈을 많이 사용할 것이라 예측한다. Angular 2와 같은 주요 프레임워크와 도구가 ES 6의 모듈을 채택해 사용하기 때문이다. > 현실적인 ES 6의 모듈 적용 방법 > > ES 6의 모듈은 다음과 같은 도구를 사용해 적용할 수 있다. > > * 트랜스파일러를 사용하는 도구 > > * Babel > * webpack > * SystemJS > > * Polyfill을 사용하는
angularjs
electron
emberjs
github
java
javascript
meteor
nodejs
reactjs
reactnative
스포카
Backbone 적용기
Backbone이란?Backbone은 자바스크립트 프레임워크로 MVC 패턴을 적용하여 웹 애플리케이션 개발할 수 있도록 돕는 유용한 프레임워크입니다. MVC 패턴에 대해서는 밑에 더 자세히 설명하기로 하고 간단히 Backbone을 적용한 후의 장점을 소개하 면 깔끔하게 뷰와 로직을 분리할 수 있어 코드를 유지 보수하는데 드는 시간이 줄며 기능 수정 혹은 기능 확장이 쉬워진다는 점 등을 들 수 있습니다.또한, Backbone에서는 Underscore 라이브러리를 사용하는데, 이 라이브러리에서 제공하는 템플레이트 기능 을 통해 뷰의 재사용과 설계를 쉽게 할 수 있다는 점도 장점입니다.만약 서버 측에서 RESTful한 URL을 제공한다면, Backbone을 사용하여 얻을 수 있는 이점이 더 확실해집니다. 모델에 RESTful한 URL을 제공하면, 간단하게 서버와 동기화하면서 그에 따르는 뷰의 변화 따위를 손쉽게 구현할 수 있습니다.RESTful한 인터페이스 설계에 대해서 궁금하시다면 이전에 올라온 글을 참조해보세요. Backbone 기반으로 설계된 여러 웹 애플리케이션 중에는 여러분이 잘 알고 있을만한 서비스들도 있을 것입니다.MVC 패턴?이 미 MVC라는 용어에 익숙하신 분들도 많겠지만, 생소하신 분들을 위하여 간단히 정리해보면 MVC 패턴은 디자인 패턴 중의 하나로 모델(실제 쓰일 데이터)과 모델을 보여줄 뷰(인터페이스) 그리고 사용자로부터의 입력을 받아 모델과 뷰를 중재하는 컨트롤러로 나누어서 구현을 해나가는 방식을 말합니다. GoF 책에도 이 패턴이 소개되어 있지요.모델은 뷰나 컨트롤러와 무관하게 작성되는 데 그런 모델을 뷰가 관찰하고 있다가 모델의 변화에 따라 적절히 뷰의 모습을 바꾸게 되므로 서로 투명하게 작동하게 됩니다. 즉 모델만 잘 설계해서 만들어주고 그에 따르는 뷰의 모습만 정의하면 그다음부터는 지저분하게 모델의 상태에 따르는 코드를 직접 처리할 필요가 없다는 장점이 있습니다.Backbone이 MVC 패턴을 적용하기 위한 프레임워크라고 하였지만, 실제로 Backbone에서는 MVC 패턴의 변형인 MVR 패턴을 사용합니다. 컨트롤러 대신 Router가 쓰이는 형식인데, 이 링크에서 Backbone의 Router에 대한 자세한 설명을 제공하고 있습니다. 하지만 Router가 컨트롤러의 역할을 대행하는 것은 아니고, 대부분의 Backbone 예제를 살펴 보면 실제로 컨트롤러가 담당하는 업무들을 뷰에 이관하여 처리하는 것을 볼 수 있습니다. MV* 패턴 중에는 MVP 패턴이나 MVA 패턴 같은 MVC 패턴의 변형들이 존재합니다만 그 바탕을 이루는 Model-View의 관계는 변하지 않는 것을 볼 수 있습니다.Simple code snippet간단한 예제를 통해 실제 코드 상에서 어떤 식으로 Backbone을 적용하는지 알아보겠습니다.모델먼저 모델을 정의해야 합니다. 가령 밑의 코드에서는 사각형 모델을 정의하고 있는데요, 기본값을 지정해 줄 수 있고, 사각형 모델과 관련된 함수들을 정의해놓은 것을 볼
backbonejs
emberjs
연관 기술 스택
techstack-logo
ReactJS
techstack-logo
VueJS
Copyright © 2025. Codenary All Rights Reserved.