Home SD 커뮤니티 Easy Tech

Easy Tech

Easy Tech

자바스크립트(JavaScript)로 클라이언트&서버사이드 개발하기

2019-06-04


자바스크립트 JavaScript

자바스크립트는 객체지향 스크립트 프로그래밍 언어로 웹 브라우저 내에서 주로 사용한다. 자바스크립트는 처음에 모카(Mocha)라는 이름으로 시작해서 다음에는 라이브스크립트(LiveScript)라는 이름으로 개발되었고 최종적으로 자바스크립트가 되었다. 라이브스크립트가 자바스크립트로 된 것은 넷스케이프가 넷스케이프의 네비게이터 웹 브라우저에 자바 기술 관련 지원을 시작할 즈음으로 1995년 12월 릴리즈된 넷스케이프 2.0B3부터 채택되었다. 참고로 ECMA 스크립트는 자바스크립트의 표준화된 버전으로 이 표준화를 위해 자바스크립트 기술규격을 ECMA 인터내셔널에 제출하여 ECMA-262에 의해 표준화 되었다. 자바스크립트와 J스크립트는 모두 ECMA 스크립트와의 호환을 목표로 하면서 ECMA 규격에 포함되지 않은 확장 기능을 제공한다. 

 
 
웹 개발을 위한 자바스크립트

프론트엔드(Front End)개발을 위해서 필요한 기술들은 기본적으로 HTML, CSS, 자바스크립트(JavaScript) 정도가 있다. 물론 그 밖에도 백엔드 개발자가 갖추기 힘든 디자인적 감각이나 UI/UX에 대한 이해도 중요하다. 그러나 흔히 프론트엔드 개발을 말한다면 가장 핵심이 되는 기술이 바로 자바스크립트를 꼽는다. 자바스크립트 없이 웹 프로그래밍을 한다는 것은 거의 불가능한 일이 되었고 언어가 가진 수많은 한계에도 불구하고 다양한 프레임워크와 라이브러리에 힘입어 자바스크립트는 클라이언트와 서버사이드를 아우르는 프로그래밍의 표준으로 자리잡았다고 해도 과언이 아니다.

기존에 브라우저의 언어로만 여겨졌던 자바스크립트는 V8 자바스크립트 엔진의 오픈소스화 이후 Node.js를 활용해 서버 사이드 개발까지 가능하게 했고, 이제는 자바스크립트 개발자 한명이 프론트엔드부터 백엔드까지 모든 영역을 소화할 만큼 그 영역이 포괄적이고 방대해 졌다. 예전에는 기술수준이 백엔드 개발자보다 낮다고 평가되었지만 최근에는 고급 프론트엔드 수요가 늘며 백엔드 개발자와 거의 동등한 대우를 받고 있는 수준이다.
 
 

주요 자바스크립트
프레임워크 & 라이브러리

1. 제이쿼리(jQuery)
현재까지 가장 인기있는 자바스크립트 라이브러리. 순수 자바스크립트로 코딩하는 것보다 10배 이상의 생산성을 보여주며 표준에 가까운 점유율을 보임. 'write less, do more'을 모토로 하여 비 프로그래머들도 어렵지 않게 이해할 만큼 쉽고 간단하다는 점이 가장 강력한 장점.
2. 백본(Backbone.js)
웹 서비스의 서버페이지 개발 패러다임을 벗어나 자바스크립트를 활용해 프론트엔드에서 웹페이지 전체를 구현해 내는 프레임워크. 여타 프레임워크와 비교해 백본은 용량이 매우 작고, 프레임워크 자체로 가벼워 속도가 빠른 것이 특징. 다만 서비스 구조를 직접 설계해야 하므로 서비스 확장에 따른 고급 설계 기술이 필요함. 템플릿 엔진을 포함하지 않아 Handlebars와 같은 템플릿 라이브러리를 같이 조합해서 사용해야 하는 번거로움이 있음.
3. 앵귤러(Angular.js)
구글의 오픈소스 프로젝트인 앵귤러는 현재 가장 대중화된 싱글 페이지 프레임워크. 투웨이 바인딩 기술이 구현되 강력한 템플릿 엔진이 장착되어 있음. 손쉽게 싱글 페이지 애플리션 개발이 가능해 초급 개발자부터 고급 개발자까지 폭 넓게 활용하며 템플릿 엔진 자체가 너무 강력해 초급자의 경우는 성능 저하 문제를 파악하는데 어려움이 있음.
4. 엠버(Ember.js)
국내에서는 대중화 되지 않은 프레임워크. 초기에 CLI(Command line interface)를 제공하여 콘솔명령어로 쉽게 초기 파일을 자동구성하며 addon 시스템 도입으로 설치 명령어를 통한 서비스 추가가 쉬움.
5. 리액트(React.js)
최근 가장 큰 관심을 받고 있는 페이스북 오픈소스 프로젝트 라이브러리. 빠른 성능과 가벼운 용량이 특징임. 프레임워크라기 보다는 뷰(view)라이브러리에 가까우며 리덕스(Redux)라고 하는 React + Flux 데이터 처리 라이브러리를 활용하여 데이터 전송 및 관리를 함.

 
 

2018년 올해의 자바스크립트
라이브러리와 프레임워크 트렌드

전 세계적으로는 작년까지만 해도 표준으로 불릴 만큼 점유율이 높았던 제이쿼리가 최근 앵귤러와 리액트의 꾸준한 인기로 비슷한 수준의 관심도를 보이고 있으며, 이는 제이쿼리의 인기가 떨어졌다기 보다는 앵귤러와 리액트에 대한 관심이 그만큼 증가 되었음을 보여주고 있다. 대한민국 타깃의 트렌드 지표에서는 여전히 제이쿼리가 압도적인 관심도를 보이며 앵귤러와 리액트, 뷰는 세계 지표보다 훨씬 못 미치는 수준이다.

트렌드 지표에 대한 자세한 내용은 https://trends.google.com/trends/explore?cat=13&q=angular,react,vuejs,polymer,jQuery 에서 확인 할 수 있다.
 

자바스크립트 주요 프레임워크와 라이브러리에 대한 상세한 내용은 다음 포스팅에서 다루기로 하겠다. 

 

자바와 자바스크립트의 차이
Java & JavaScript


자바와 자바스크립트는 이름만 비슷할 뿐 완전히 다른 프로그래밍 언어이다. 자바의 경우는 1995년에 썬 마이크로시스템즈에서 제임스 고슬링과 연구원들이 개발한 객체지향 프로그래밍 언어로 다른 언어들과 가장 큰 차이점은 컴파일된 코드가 플랫폼 독립적이라는 점이다. 이는 자바로 개발된 프로그램의 경우엔 CPU나 어떠한 운영체제를 쓰는지와는 상관없이 어디서나 실행 가능하다는 의미이며, 예를 들어 C나 다른 언어들은 플랫폼에 따라 각기 다르게 개발을 해야하지만 자바로 윈도우에서 개발했다고 하면 이 프로그램은 추가적인 개발 없이 리눅스에서도 구동 가능하다는 것이다.

또 자바로 만들지 못할 프로그램은 없다고 말해질 정도로 자바는 거의 대부분의 프로그램을 만들 수 있는 범용언어이며, 특히 한국에서 정부나 기업의 시스템 통합(System Integration)프로젝트들이 대부분 자바를 기반으로 했기 때문에 자바가 국내에서는 더욱 많이 쓰이고 있다. 안드로이드 앱 개발시에도 자바를 이용하여 개발을 하게 되는데 모바일 시장에서 안드로이드의 점유율이 높기 때문에 자바 역시 그 중요성이 커지고 있다.
 
자바스크립트는 넷스케이프와 썬마이크로시스템즈의 공동 수행 프로젝트에서 개발한 클라이언트용 객체지향 스크립트 언어이다. 자바스크립트는 사용자와 웹사이트의 상호작용에 도움을 주며, 특정 운영체제에 제한이 있는 것이 아니기 때문에 클라이이언트단 언어의 표준으로 사용되고 있다. 따라서 두 언어의 가장 큰 차이를 보자면 자바는 서버사이드의 개발언어, 자바스크립트는 클라이언트의 개발언어라고 이해하면 되겠다. 하지만 자바스크립트도 서버사이드에서 사용이 가능하게 되었는데 그 부분은 아래에서 좀 더 자세히 알아보자.

 
 

자바스크립트를 활용한 서버사이드 개발
Node.js


기존에 웹 브라우저 내에서 활용되던 클라이언트용 자바스크립트를 Node.js 활용을 통해 서버 상에서도 사용 가능하게 되었다. Node.js는 2009년 라이언 달이라는 프로그래머가 개발한 서버 개발 환경으로 구글에서 개발한 V8 자바스크립트 엔진을 기반으로 한  매우 빠르고 고성능인 소프트웨어 플랫폼이다. Node.js 사용으로 웹 애플리케이션이 더욱 발전하였고, 정적인 홈페이지 뿐 아니라 쇼핑몰과 티켓 예매사이트, 블로그처럼 데이터가 변하는 사이트 구현이 가능하며 많은 개발자들이 만든 프로그램과 게임을 웹상에서 구동시킬 수 있다. 또 안드로이드 폰, 아이폰, 윈도우, 맥 할 것 없디 플랫폼 제약없는 실행이 가능하게 한다. 
 

Node.js를 이해하려면 자바스크립트에 대한 이해가 선행되어야 하며, 스크립트 언어의 특성상 특정한 프로그램 안에서 동작하는 언어이기 때문에 웹 브라우저 프로그램 안에서만 작동하고 단순한 작업은 자바스크립트만으로도 구현이 가능하나 좀 더 진화댄 프로그램으로 개발, 관리, 데이터 베이스 관련 기능은 Node.js를 통해 만들 수 있다.

 
 
 

Node.js 의 특징

1. V8 Engine
 끈임없이 발전되는 오픈소스 응용 프로그램 프레임워크로, 웹 브라우저를 만드는데 기반을 제공한다. 자바스크립트를 직접 기계어로 컴파일하여 대부분의 것들보다 빠르게 만들며 지금도 충분한 성능을 보이고 있으나 앞으로도 강력하고 훌륭한 퍼포먼스를 나타낼 것으로 예상한다.
2. Event - driven 방식
유저가 이벤트를 발생해 입력장치로 데이터를 전송했을 때만 작동하기 때문에 자원을 최소화 할 수 있다. 대부분의 웹 서버는 유저가 이벤트를 만들때까지 기다리며 시간과 메모리를 소비하게 된다는 점과 비교하면 큰 장점이다.
3. Non - blocking 패러다임
 Blocking 방식의 비효율성을 극복하고자 만든 것이 Non-blocking 방식이며 I/O (input/output : 데이터나 정보를 가공하는 프로세스의 전처리와 후처리를 의미)를 진행하는 동안 유저가 작업하는 프로세스를 중단시키지 않는다. 이는 Read/Write 이벤트가 시작하자마자 모듈을 변환시켜 다른 작업을 준비할 수 있게 하기 때문에 속도가 동기식 보다 빠르며 메모리도 덜 차지하게 된다. 따라서 적절하게 사용하면 굉장히 빠른 퍼포먼스를 보인다.
4. Single Thread
 적은 양의 자원으로 처리가 가능하기 때문에 일반적으로 서버 다운이 거의 일어나지 않는다.

위의 네가지 장점과 더불어 Node.js가 가진 가장 큰 장점은 클라이언트 사이드와 서버 사이드에서의 언어가 동일하다는 점일 것이다.

그러나 Node.js 자체로 서버단 모두를 개발하려면 많은 부분을 자체 제작해야하므로 여러 프레임워크와 라이브러리를 활용해 개발한다. 또 Node.js 서버의 성능은 파일을 쓰고 읽는데서 취약하기 때문에 기존의 자바(Java)로 만들어진 서버를 대체하는 수단으로 쓰기에는 부족하기 때문에 채팅 서버와 같은 가벼운 서버구성에서 주로 활용된다.