[한빛 네트워크] 풀스택 자바스크립트로 만드는 차세대 웹 앱

출처 : http://www.hanbit.co.kr/network/view.html?bi_id=1968

제공 : 한빛 네트워크
저자 : Patrick Mulder
역자 : 이대엽
원문 : Next-generation Web apps with full stack JavaScript 

100% 자바스크립트로 만드는 확장성을 갖춘 웹앱 

자바스크립트는 그것이 처음 만들어진 이래로 "안 좋은" 부분이 많은 제한된 객체 지향 언어로 자주 비쳐줬다. 

자바, C#, 루비와의 경쟁 구도에서 오늘날 자바스크립트는 웹 애플리케이션을 위한 커다란 생태계 중 하나를 만들어가고 있다. 왜 자바스크립트가 서버 측 차세대 웹 애플리케이션 제작에 알맞는, 웹 브라우저에 안성맞춤인 언어일까? 

사실 여기서 파괴적 혁신이 작용하는 또 하나의 예를 볼 수 있다. 클레이튼 크리스텐슨(Clayton Christensen)이 혁신 이론에서 설명한 바와 같이 수용 가능성과 접근성은 기술 변화를 이끄는 중요한 동인이다. LAMP 스택과 루비, 파이썬, 자바, C#이 오늘날 여러 서버 측 웹 애플리케이션의 토대를 제공하는 반면 자바스크립트는 웹 브라우저에 기본으로 탑재돼 있는데, 이로써 훨씬 더 많은 디지털 인구가 웹 개발을 실험해볼 수 있다. 낮은 인프라스트럭처 비용 및 손쉬운 설치뿐 아니라 기업에서는 더욱더 큰 웹 개발자 풀에 접근할 수 있다. 

풀스택 자바스크립트 애플리케이션 

풀스택 자바스크립트 웹 애플리케이션의 태동은 구글이 2008년에 V8 자바스크립트 엔진을 출시하고 2009년에 Node.JS가 탄생하면서 이뤄졌다. 둘의 차이점을 간략하게 설명하자면 V8은 서버에서 태블릿과 스마트폰에 이르기까지 전 세계에서 가장 중요한 컴퓨팅 플랫폼에 사용되는 기계어 컴파일러에 대한 자바스크립트 엔진이다. Node.JS는 V8을 기반으로 하며, 다양한 운영체제에 높은 성능을 보이는 자바스크립트 인터프리터다. 

V8과 Node.js는 모두 신세대 프로그래머들, 즉 풀스택 자바스크립트 애플리케이션 개발자를 만들어내고 있다. 웹 개발 분야에서 처음으로 웹 브라우저와 서버 양측에서 동일한 자바스크립트 코드가 실행될 수 있다. 

풀스택 자바스크립트 웹 애플리케이션이 주류가 되기까지 얼마나 오래 걸릴까? 이 질문의 답은 애플리케이션의 규모에 따라 다를지도 모른다. 근래에 그루폰(Groupon), 월마트(Walmart), 페이팔(PayPal) 같은 전자상거래 회사가 풀스택 자바스크립트 애플리케이션을 배포하고 있다. 

대기업 외에도 여러 규모가 작은 에이전시와 스타트업에서는 개발 도구 및 고급 웹 인터페이스부터 풀스택 자바스크립트 웹 애플리케이션을 위한 기반을 마련하고 있다. 

그럼 이러한 영역에서 자바스크립트 개발의 현주소를 좀 더 가까이에서 들여다보자. 

더 나은 웹 인터페이스 

개발자에게 사용자와의 인터랙션 수준을 높여달라고 요청하는 업무 요구사항이 많다. HTML과 jQuery는 처음 시작하기에는 좋지만 자바스크립트 코드의 양이 늘어나면 금방 문제가 발생한다. 

다른 프로그래밍 언어와 달리 자바스크립트 코드의 상당수는 패키징되고 HTTP로 전송되어 원격 브라우저에서 실행된다. 그리고 규모가 큰 자바스크립트 프로젝트를 관리하는 일은 예전부터 어려운 일이었는데, 자바스크립트 모듈을 재사용하는 괜찮은 방법이 없었기 때문이다. 

요즘은 자바스크립트 모듈과 새로운 종류의 빌드 도구를 통해 자바스크립트 애플리케이션을 구조화하기가 훨씬 쉬워졌다. 게다가 포매팅과 코드 유효성 검증을 목적으로 프런트엔드 소스 파일을 자동으로 전처리하는 것은 개발자들이 자바스크립트의 "좋은" 부분들을 활용할 수 있게 만들어줬다. 그것의 한 가지 괜찮은 부수 효과는 노드(Node) 기반 웹 도구의 성능이다. 다른 프로그래밍 언어를 기반으로 한 프런트 엔드 빌드 도구와 달리 노드로 만들어진 도구는 굉장히 빠르다. 

자바스크립트 프런트 엔드 커뮤니티가 비중을 두고 실험하는 분야는 도구 분야 뿐만이 아니다. 인간-컴퓨터 상호작용의 핵심 사상은 MVC 패턴이며, 지난 몇 년간 웹 브라우저와 자바스크립트의 MVC 패턴에 관한 수많은 다양한 아이디어가 제안되고 있다. 

그 대척점에는 곧바로 쓸 수 있는 수많은 UI 추상화를 제공하는 자바스크립트 프레임워크가 있다(Angular나 Ember). 다른 한편으로 DOM 노드의 이벤트를 조직화하는 것과 같은 기본적인 브라우저 요소에 초점을 맞춘 저수준 자바스크립트 라이브러리가 있다(Backbone.js나 Exoskeleton). 

프레임워크를 선택하든 저수준 자바스크립트 라이브러리를 선택하든 상태와 DOM 노드를 관찰하는 것에 관한 기본적인 개념은 시작하는 데 필수다. 한 가지 꼽자면 사용자로부터 발생하는 비동기 이벤트가 애플리케이션에서 중요한 역할을 수행한다는 점을 알아둬야 한다(여러 서버 측 웹 프레임워크와 달리). 아울러 브라우저에서 상태를 표현하는 것과 Ajax 요청을 통해 상태 변화를 확인하는 방법을 익혀야 한다. 

풀스택으로 향하는 길 

브라우저에서 자바스크립트를 사용하는 비율이 점차 증가하는 가운데 풀스택 자바스크립트로 나아가는 것은 추가적인 코드 재사용과 애플리케이션 확장성을 보장한다. 

예를 들어, 클라이언트와 서버 측 환경이 자바스크립트를 기반으로 실행되고 있는 경우 뷰 템플릿은 클라이언트와 서버 측에서 재사용될 수도 있다. 게다가 풀스택 자바스크립트 환경에서는 국제화나 데이터 시각화를 위한 로직을 결합하는 데도 이점이 있을 것이다. Airbnb의 Rendr 프로젝트는 이미 이러한 아이디어를 실제로 보여주고 있다. 아울러 다음 달에 흥미롭게 지켜볼 만한 그루폰의 i-tier와 월마트의 FruitLoop 프로젝트도 있다. 

지금 당장 풀스택이 부리는 마법을 조금이라도 경험해보고 싶은가? 아래의 자그마한 Underscore.js 코드 예제를 브라우저 콘솔과 Node 콘솔에서 시험해 보라.

_.filter(['js', 'java', 'ruby', 'python'], function(language) { if (language === 'js') return true } )

힌트: Undescore.js 프로젝트 웹사이트를 방문하면 기본적으로 Underscore.js 라이브러리가 로딩된다. 서버에서 코드를 실행하려면 반드시 Node가 실행 중이고 "node"를 입력해야 한다.