2014년 웹 개발 현황(State of Web Development 2014)

THE EVOLUTION OF WEB APPLICATIONS

전통적인 웹사이트는 HTML, CSS 그리고 가끔 약간의 javascript로 구성되어 있습니다. HTML은 브라우저에 컨텐츠를 보여주기위해 필요한 것들을 이야기합니다..CSS는 어떻게 컨텐츠들이 보여져야 하는지 그리고 보기좋게 하기위해 필요한것들을 말해줍니다. 그리고 javascript는 주로 작은 동작들을 추가하는데 사용되었습니다. 팝업을 띄운다든지 이미지 클라우져를 보여주는 것 말이죠.WebXebiCon.016

 

물론 이런 정적인 웹사이트들은 유지하기가 매우 힙들었습니다. 컨텐츠의 변경이 생기면 매번 html파일을 바꾸고 그것을 또 웹서버에 FTP로 올려야 했으니까요.

 

운이 좋게도 우리에게 숙제였던 이런 문제들을 풀어줄 몇 가지 기술들이 있었습니다. PHP, JSP 또는 ASP와 같은 기술을 사용함으로써 우리는 운영중인 웹사이트에 동적으로 컨텐츠를 만들어 낼수가 있었습니다. 이러한 웹사이트들은 보통 데이타베이스에 연결이 되어졌습니다. 그리고 html을 수정하는것 대신 데이터베이스에 컨텐츠가 저장이 되었습니다. 우리가 쉽게 할수 있던 방법은 데이테베이스의 컨텐츠 내용을 변경함으로써 웹사이트를 변경하도록 하는것이 였습니다. 이것은 사용자가 만든 컨텐츠를 저장하는 것과 같이 이미 우리가 만들어낸 복잡한 웹 어플리케이션을 가능하게 해주었습니다. 블로그나 전체 웹사이트에 저장되어있는 컨텐츠들 처럼 말이죠.

우리는 우리의 웹 사이트를 만드는 데 필요한 서버 측 기술을 가지고 있었지만 클라이언트 쪽에서의 새로운 변화기가똑같이 필요했습니다.  특히 우리는 모바일 환경에서 살고있기 때문에 위치기반 서비스, 웹저장소 그리고 터치이벤트들과 같은 새로운 기능이 있는 브라우져가 필요하였습니다.
따라서 새로운 HTML과 CSS 표준은 개발자들이 모바일과 데스크탑에 더 풍부한 웹어플리케이션을 만들수 있도록 해주는 웹브라우져를 좀 더 강력하고 풍부하게 만들수 있게 많은 요소들이 포함되었습니다.

이러한 것들을 모두가 매우 쉽게 만들수 있도록 하기 위해 트위터는 모든 것을 자동으로 반응할수 있게 다룰수있는 Bootstrap을 릴리즈 하였습니다. 여전히 요즘도 bootstrap은 많은 반용형 웹사이트에 많이 사용되어 지고 있습니다.

완전 새롭고 파워풀한 기능을 가진 스타일시트인 CSS3는 점점 복잡해 지고 지루하게 바뀌어 갔습니다.
이러한 문제점들을 극복하기위해 Sass와 Less같은 기술들이 개발되었습니다.  이 기술들은 지루한 스타일링작업을 좀더 쉽게 할수 있도록 만들어주는 기능을 제공하는 CSS전처리기 입니다. 두 기술은 CSS를 만들것이고 같은 문제를 해결해 줄것입니다. 개인 성향이나 취향에 따라 하나를 선택해서 사용하면 됩니다.

WebXebiCon.021

웹사이트 이용자들은 단지 모든 디바이스에서 사이트가 잘 동작하고 잘 보이기만을 원하지는 않습니다. 그들은 좀 더 인터렉트브한 웹사이트들을 원합니다. 그들은 그들에 액션들에 반응 하는 웹사이트를 원합니다. 예를 들면 이미지를 줌한다거나 장바구니에 상품을 드래그해서 넣는것들 말이죠. 이러한 것들이 오래전부터 자바스크립트로 가능 했었음에도 불구하고 JQuery는 이러한 것들을 매우 쉽게 만들수 있도록 해 주었습니다. JQuery는 쉽게 DOM조작을 할수 있게 만들어 주는 자바스크립트 라이브러리 입니다. 특히 다양한 브라우져에서 동작을 하게 만들어줍니다. jQuery의 인기와 함께 웹은 작은 부분들까지 jQuery plugin으로 만들어지게 되었습니다. 아래를 보시면 jQuery plugin으로 등록된 plugin의 갯수를 스크린샹으로 보실수 있습니다. 물론 모바일용 라이브러리도 릴리즈가 되었습니다.

WebXebiCon.026

jQuery의 가장 중요한 기능중에 하나는 AJAX requests를 쉽게 만들수 있도록 해주는것 입니다. AJAX는 Asynchronous Javascript And XML(비동기 자바스크립트와 XML)의 약자입니다. AJAX는 웹브라우저에서 페이지를 벗어나거나 리프레쉬가 되지 않고 backend로 부터 데이터를 가져올수 있게 해 줍니다. 그리고 전체 페이지를 생성하지 않고 단지 데이터만 backend에서 client로 가져옵니다. 데이터를 한번 가져오면  jQuery의 DOM 생성기능을 사용하여 다이나믹하게 화면에 뿌려줄수 있습니다. AJAX란 이름안에 XML이 있음에도 불구하고 오늘날에는 좀더 가볍고 데이터포맷에 대한 유연성이 있는 JSON울 XML보다 많이 사용합니다.

AJAX requests는 단일 웹페이지 프로그램(SPA)의 핵심이기도 합니다.

 

WebXebiCon.027

이러한 웹 프로그램들은 한번에 모든 HTML, CSS 그리고 javascript를 불러옵니다. 한번 페이지를 불러오면 원하지 않는 다른 페이지의 로딩을 하거나 리프레쉬를 합니다. 모든 렌더링이나 네이게이션은 실제페이지를 떠나지 않고 클라이언트 측에서 실행됩니다. 물론 사용자는 다른 페이지 간 이동이라고 느낄지도 모르지만, 이것에 대한 모든 javascript는 클라이언틍서 처리됩니다. 단일 페이지 웹 프로그램(SPA)은 일반적으로 더 나은 사용자 경험을 제공한 이후부터 점점 인기를 끌고 있습니다. 단일 페이지 웹 프로그램은 서버에서 데이터를 가져오기 위해 위에서 우리가 본 AJAX requests에 크게 의존하고 있습니다. 페이지가 처음 로드되면 이러한 request로 가져온 데이터들은 서버와 클라이언트 사이에 커뮤니케이션할수 있는 유일한 형식중 하나입니다.

SPA로 인해 서버에서 클라이언트로 많은 로직과 복잡함이 클라이언트로 이동하였기 때문에 가장 복잡한것을 대부분 처리하는 프레임웍을 사용하는것이 편리합니다.
가장 인기있는 프레임웍중 세가지는 Backbone.js, Ember.js 그리고 AngularJS입니다. 당신의 성향이나 환경에 따라 이것들중 아무거나 하나를 쓰면 됩니다.
AngularJS가 가장 인기있는 프레임웍중 하나임이 분명하지만, 가장 크고 활성화되어 있는 커뮤니티를 가지고 있습니다. 사람들은 Backbone.js에서 Angular.js와 Ember.js로 갈아타고 있는것 같습니다. 우리 역시 우리 스스로 Angular를 사용하고 있고 우리는 사용함으로써 행복합니다. 구글 Angular팀은 큰 개선을 해야하는 다음 메이저 버젼을 작업하고 있습니다. 이러한 것이 우리가 Angular가 좋고 안전한 선택이라고 하는 이유입니다.

이전 문단에서 우리가 보았듯이 더 많은 기능과 복잡성이 서버측에서 클라이언트쪽으로 이동하고 있는것은 분명합니다. 그리고 Bootstrap, jQuery 그리고 Angular같은 프레임웍이나 라이브러리를 사용함으로써 client 측에 의존하는것이 늘어났습니다. 이것은 우리 개발자들의 포커스와 노력들이 서버에서 클라이언트쪽으로 이동하였다는걸 의미하기도 합니다. 프론트엔드 개발을 심각하게 해야할 때가 왔습니다. 그러면 이것이 우리 개발 프로세스에서 무엇을 의미하는지 보도록 하겠습니다.

WEB APPLICATION DEVELOPMENT

앞에서 보았듯이 우리는 간단하게 HTML, CSS 그리고 javascript파일을 일부 만들면서 시작합니다. 그럼 우리는 우리 스타일시트에 Less나 Sass의 파워를 이용하고 싶습니다. 그리고 우리가 rich 또는 단일웹프로그램을 만드는 동안 우리는 많은 자바스크립트 파일을 만들어야 할것입니다. 그리고 아마 자바스크립트 대신 CoffeeScript나 Dart를 쓸지도 모릅니다. CoffeeScript나 Dart를 모르는 사람들 위해 말씀드리자면 CoffeeScript나 Dart는 둘다 javascipt로 컴파일 되는 대체 언어입니다. CoffeeScript는 javascript와 대부분 비슷하지만 문장형식이 살짝 다릅니다. Dart는 매우 다르지만 여가시간이 있을때 체크해볼 가치는 있습니다.

물론 우리는 앞서 이야기했던 많은 서드파티 라이브러리들을 사용하길 원합니다. 이러한 라이브러리들은 종종 다른 라이브러리들을 의존하기 때문에 우리는 결국 많은 그외 라이브러리와 함께 할 것입니다.

WebXebiCon.033

이 그림처럼 우리는 우리의 웹 어플리케이션을 위해 가지고 있는 리소스로 부터 많은 다양한 아이디어를 가지게 됩니다. 그러나 단지 이러한 파일들을 만들기위해 라이브러리들을 다운받고 우리의 웹서버에 올리는것만으로는 부족합니다. 우선 웹브라우저는 Less, Sass, CoffeeScript 또는 Dart를 이해하지 못합니다. 우리는 브라우져가 이해할수 있게 무언가를 만들어 줘야 합니다. Less와 Sass를 위해 Less와 Sass의 CSS가 필요하고, CoffeeScript와 Dart는 일반 javascript 컴파일되어지는 것이 필요합니다.

WebXebiCon.034

자 이제 우리는 이파일들을 우리의 웹서버에 배포하는 스테이지에 있습니다. 하지만 여전히 우리가 어플리케이션울 개발하기 좋아하는 방법이 아닙니다. 그래서 우리는 몇가지 과정을 진행할 겁니다. 우리는 우리의 모든 파일을 소형화 할 겁니다. 이러한 모든 파일들을 잡아 결국 더욱더 작게 파일을 만들겁니다. 이러한 작업은 다운로드시간을 적게해 사용자에게 안전하고 나이스하게 전달될것입니다.

WebXebiCon.036

우리는 우리가 만든 파일들에 어떠한 구문오류가 없기를 분명히 하고 싶습니다.. 우리가 syntax validator를 이런 파일위에 올려놓는 것이 그런 이유에서입니다.

물론 테스트는 필요합니다.그래서 우리는  우리의 모든 자바스크립트 펑션들을 커버하기 위해 많은 단위테스트를 사용합니다. 그리고 우리가 만든 뷰들이 사용자들에게 정확한 정보를 보여주는지에 대한 확신을 가지기 위해 뷰테스트를 하고 있습니다. 디커플링의 장점으로 우리는 유닛테스트와 뷰테스트를 분리해서 돌리고 있습니다. 이렇게 하는것은 테스트가 실패했을때 쉽게 문제가 되는 부분을 파악할수 있고 유지를 하거나 코드를 리팩터링할때 좋은 방법이 되기 때문입니다.
그러나 모든 것들이 잘돌아가는지를 확실히 하기 위해 끝까지 연결되는 테스트를 함으로서 전체 테스트를 종료합니다.

WebXebiCon.042

여기서 이러한 모든 과정을 거침으로써 우리는 우리가 쓰는 것들이 꽤 퀄리티 있는 코드라고 확신합니다.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.