[번역] Javascript를 이용하여 무엇을 할 수 있을까?

원문은 Nils Mehlhorn의 블로그 게시글(https://nils-mehlhorn.de/posts/what-you-can-do-with-javascript-today)입니다. 글에 대한 저작권은 원저자에게 있으면 번역 내용은 축약 및 의역이 다수 포함되어 있습니다. 처음 해 보는 번역이라 부족한 부분이 많습니다. 의미나 번역이 잘못된 부분이 있다면 코멘트 남겨주세요. 수정하겠습니다.

 

---

이 유명한 프로그래밍 언어는 1995년 이후 오랜기간 사용되어 왔습니다. 모두가 선호하는 언어는 아닐지 모르겠지만 시간이 갈수록 팬들이 많아져 스택오버플로우에서 가장인기 있는 언어에 올랐습니다. 처음에는 HTML, CSS와 함께 웹페이지에서 사용자와 상호작용을 하기 위해 사용되었지만 현재 자바스크립트는 당신이 생각하는(비록 긍정적인 생각이 아닐지라도) '컴퓨터로 할 수 있는' 거의 모든 것들을 할 수 있게 해 줍니다. 오늘날 자바스크립트가 할 수 있는 것에 대한 사례들을 알아보겠습니다.

웹 개발

놀랍지만(!) Javascript로 웹 페이지를 만들 수 있습니다. 최근 몇 년간 React(https://reactjs.org/), Angular(https://angular.io/), Vue.js(https://vuejs.org/)등을 이용한 SPA(Single Page Application)은 SSR(Server Side Rendered)와 jQuery(https://jquery.com/)를 이용하는 사이트들을 대체하면서 대세가 되어가고 있습니다.

웹 개발환경은 그 짧은 수명과 그로 인한 프레임워크의 잦은 변경으로 논쟁이 되어왔습니다. 여러가지 사건들이 있었지만, 실제 숫자로 확인하면 그렇지 않습니다.  React는 2013년에 릴리즈 되어 아직 사용 중입니다. Angular는 2010년 출시된 AngularJS(https://angularjs.org/)를 기반으로 새롭게 변경된지 이제 3년 되었고 Vue.js는 2014년에 릴리즈하여 이제 5년이 되었습니다.

하나의 어플리케이션 프레임워크에 종속되고 싶지 않다면 여러 웹 컴포넌트들과 함께 최신을 Javascript, 다양한 도구들을 활용하여 프레임워크 없이 개발할 수도 있습니다(Polymer프로젝트(https://www.polymer-project.org/)를 참고하세요)

Javascript를 사용하면 본격적인 웹 앱을 구축할 수 있을 뿐만 아니라 정적인 사이트를 만들 수도 있습니다. Eleventy(https://www.11ty.io/)와 같은 실용적인 솔루션을 이용하거나 프레임워크를 사용할 수 있습니다. React기반의 Gatsby(https://www.gatsbyjs.org/)나 Next.js(https://nextjs.org/) 또는 Vue.js기반의 VuePress(https://vuepress.vuejs.org/)나 Nuxt.js(https://nuxtjs.org/) 를 이용하면 Gatsby블로그와 같은 가벼운 정적 페이지를 좀 더 수월하게 만들 수 있습니다.

데스크톱 앱

데스크톱 앱은 일반적으로 Electron(https://electronjs.org/) 프레임워크를 이용하여 Javascript로 개발합니다. 프로그램은 Chromium브라우저의 인스턴스로 패키징 되며, Node.js Javascript를 이용하여 유려한 사용자 화면(유명한 코드 편집기인 Visual Studio Code(https://code.visualstudio.com/)와 같은)을 제공합니다. 다만 Electron프로그램은 최소 번들 크기가 100MB 이상입니다.

프로그램이 너무 무겁게 느껴진다면 Vuido(https://vuido.mimec.org/)또는 Proton Native(https://proton-native.js.org/)와 같은 솔루션을 사용해 볼 수도 있습니다(반드시 그럴 필요는 없습니다)

PWA(Progressive Web Apps, https://developers.google.com/web/progressive-web-apps)에 의한 새로운 시대가 형성되면서 웹은 점점 더 강력해지고 있습니다. 웹을 사용자의 데스크톱이나 홈 화면에서 바로 실행할 수 있는 것처럼 일반적인 어플리케이션과 유사해지고 있습니다. 최신의 웹 API를 사용하면 사용자에게 알림을 보내거나, 블루투스 장치를 연결하거나, 오프라인 환경에서 웹을 사용할 수 있습니다.

모바일 앱 개발

PWA(Progressive Web Apps)만으로는 원하는 프로그램을 만드는데 부족할 수 있습니다. 하지만 Javascript를 이용하면 모바일용 네이티브 앱을 개발할 수 있습니다 NativeScript(https://www.nativescript.org/)나 React Native(https://facebook.github.io/react-native/)와 같은 프레임워크를 이용하면 플랫폼에서 제공하는 사용자 환경(네이티브와 동일한)을 제공하면서 Javascript로 앱을 제작할 수 있습니다. 이러한 프레임워크는 iOS나 Android 환경과의 사이에서 브릿지 역할을 하면서 Javascript엔진에서 코드를 실행합니다.

한편 React Native를 사용하거나  NativeScript를 Angular 또는 Vue.js 등을 이용, 프레임워크를 변경하여 사용할 수 있습니다. (React 관련 프로젝트는 이미 진행 중입니다). 이 두 솔루션은 모바일과 웹 사이에서 코드를 공유할 수 있고 그렇게 함으로써 하나의 Javascript코드를 기반으로 다양한 플랫폼 환경을 만들 수 있습니다.

개인적으로, Javascript로 만든 네이티브 앱을 얼마나 쉽게 실행할 수 있는지 NativeScript Playground(https://play.nativescript.org/)를 사람들에게 보여주고 싶습니다.

서버와 API

많은 앱들이 Back-end를 필요로 합니다. 그리고 Back-end 또한 Javascript로 만들 수 있습니다. Node.js(https://nodejs.org/en/)를 이용하여 빠르고 확장 가능한 서버 실행 환경을 만들 수 있습니다. 오랫동안 Express(http://expressjs.com/)는 서버사이드 어플리케이션과 API를 제작하는 프레임워크로 사용되어 왔습니다. Express는 여전히 인기 있는 프레임워크이지만, 다른 프레임워크들의 추격을 받고 있습니다. Koa(https://koajs.com/)는 작지만 다양한 기능을 가지고 있고, hapi(https://hapi.dev/)는 보안에 중점을 두고 있습니다.  Nest.js(https://nestjs.com/)와 같은 프레임워크를 사용하면 견고한 아키텍처를 만들 수 있습니다.

Rest API나 GraphQL API를 만든다면 웹 소켓을 열거나 HTML을 렌더링해야 하는데, 이때 Javascript와 Node.js를 사용할 수 있습니다. 이러한 방법을 통해 생산성 앱, 실시간 협업도구, 채팅 프로그램, 스트리밍 서비스 구현하기 위한 기반을 마련할 수 있습니다.

게임 개발

Javascript는 시작부터 UI지향적이었습니다. 따라서 Javascript, HTML, CSS를 이용하면 간단하게 브라우저에서 동작하는 게임을 만들 수 있습니다. 좀 더 복잡해진다면 2D 렌더링을 위해 HTML Canvas를 이용할 수 있습니다. Phaser(http://phaser.io/)나 PixiJS(https://www.pixijs.com/)와 같이 게임 개발을 위한 프레임워크도 있습니다. 하지만 좀 더 그래픽에 특화된 도구가 필요하다면 SceneLab(https://scenelab.io/)에서 사용하는 Konva(https://konvajs.org/)와 같은 프레임워크를 선호할 수도 있습니다.

3D 게임을 만들고 싶다면? 다행히 브라우저에는 WebGL이라고 하는 자체적인 3D 그래픽 인터페이스가 있습니다. WebGL을 직접 이용하면 엄청난 결과물을 만들 수 있지만, 프레임워크를 이용하여 생산성을 높이는 것이 좋습니다. Babylon.js(https://www.babylonjs.com/)와 Tree.js(https://threejs.org/)는 웹에서 3D와 관련된 작업을 하기 위한 도구들입니다. 게임에 좀 더 초점을 맞추고 싶다면 브라우저 기반 에디터가 함께 제공되는 Playcanvas(https://playcanvas.com/)를 좋아할 것입니다. 그렇지 않다면 Javascript를 바인딩한 Cocos2d.x(https://cocos2d-x.org/cocos2dx)와 같은 기존 게임 엔진을 이용하여 크로스 플랫폼 게임을 개발할 수 있습니다.

하지만 여기서 끝이 아닙니다. WebXR Standard(기존 WebVR)은 가상현실 및 증강현실 장치에 접근할 수 있도록 합니다. 이것은 Javascript로 VR/AR 게임을 개발할 수 있다는 말입니다! 위에서 언급한 3D프레임워크 중 하나를 선택하거나 A-Frame(https://aframe.io/)을 확인해 보세요 

기계학습

맞습니다. 기계학습을 위해 Python을 배울 필요가 없습니다. Javascript로 가능하니까요. TensorFlow.js(https://www.tensorflow.org/js)를 이용하면 이미지 분류, 음성인식, 예측 분석과 같은 기계학습 모델을 개발할 수 있습니다. 가장 좋은 것은 이러한 작업을 Node.js나 브라우저에서 바로 할 수 있다는 것입니다!  기계학습은 GPU를 많이 사용하는 작업입니다. 하지만 WebGL를 통해 브라우저에서 하드웨어 가속을 실행할 수 있습니다. 이 방법을 사용하여 프라이버시 문제를 완화하면서도 값비싼 서버가 필요 없이 클라이언트 환경에서 실행되는 기계학습 권장 시스템을 구성할 수 있습니다.

만일 Tensorflow를 좋아하지 않는다면 신경망 학습을 위해 brain.js(https://github.com/BrainJS/brain.js)를 사용하거나 다양한 기계학습 알고리즘을 가지고 있는 ml.js(https://github.com/mljs/ml)를 좋아할 수도 있습니다. 둘 다 브라우저에서 알고리즘을 학습하고 실행할 수 있습니다.

사물 인터넷

하드웨어 비용이 점차 합리적이 되면서 쉽게 마이크로 컨트롤러의 세계로 들어갈 수 있습니다. 일반적으로 스마트 시스템을 위해서는 C나 C++을 배워야 하지만 Javascript로도 가능합니다.

Johnny-Five(http://johnny-five.io/) 플랫폼은 다양한 아두이노 보드를 위한 API를 제공합니다. 로봇에 좀 더 관심이 있다면 Cylon.js(https://cylonjs.com/)를 이용할 수 있습니다. 둘 다 Javascript로 작성된 코드를 기계가 이해할 수 있는 코드로 변환해 줍니다. 다만 필연적으로 Node.js로 동작하는 기기가  옆에 있어야 컨트롤러에 배포할 수 있다는 제약이 있습니다. 

하지만 마이크로 프로세서를 위한 런타임인 JerrySript(https://jerryscript.net/)에는 이러한 제약이 없습니다. 단지 64KB의 램만 있으면 됩니다. 주의해야 할 것은 사례에 따라 각각 다른 도구들이 필요할 수 있다는 것입니다. 결국 사물인터넷 기기에 직접 Javascript를 사용하는 것은 다소 실험적인 영역일 수 있습니다만 MQTT(https://github.com/mqttjs/MQTT.js)를 사용하는 백엔드 서비스에는 종종 활용되고 있습니다.

마무리

지금까지 커다란 커뮤니티와 견교한 프로젝트가 진행되고 있는 Javascript의 다양한 활용 사례들을 둘러보았습니다. 이미 알고 있는 언어를 다양한 방법으로 활용하여 창의성을 발휘하는 것은 멋진 일입니다. 제가 다루지 않는 흥미로운 사례가 있을까요? 제가 알 수 있도록 코멘트를 남겨 주세요!