[JS] 3. 자바스크립트로 할 수 있는 작업

자바스크립트로 무엇을 할 수 있을까?

자바스크립트는 워낙 다재다능한 언어이기 때문에 여러 분야에 영향을 끼치고 다닙니다.

-프로그래밍 공부

다른 타 언어들과 비슷하게 공부할 수 있기 때문에 처음 언어를 접해도 어렵지 않게 배울 수 있습니다. if, for...in, for...of, while, switch, function등과 같이 여러 문법들의 사용법을 익히고, 기본적으로 간단하게 코드를 작성할 수 있습니다. 

이 글을 읽고 계신 분들은 자바스크립트에 관심이 있어서 공부하리라고 생각이 듭니다. 자바스크립트를 공부하는 것은 후회 없는 선택이 될 것 입니다...!

- 웹 프로그래밍 : Front-End

웹 개발은 프론트 엔드 개발과, 백 엔드 개발로 나뉩니다. 여기서 프론트 엔드는 HTML, CSS, JavaScript와 같은 MarkUP언어 및 JS를 사용하는 경우가 대부분입니다. 과거에는 JavaScript가 보편하 되지 않아서 HTML, CSS를 이용한 정적인 웹 페이지를 만들었습니다. 

하지만 지금의 Front-End 웹 페이지에서는 게임까지 개발할 정도로 UI개발이 이루어진 상태입니다. 또한 요즈음에는 Front-End관련 라이브러리나, 프레임워크에 대한 레포, 문서들이 대중화 되어있기 때문에 쉽게 정보를 획득 할 수 있습니다. 

어느정도의 지식이 있다면 Facebook이나, Naver같은 페이지도 만들 수 있겠죠. 하지만 이러기 위해선 정말 열심히 해야합니다. :D

Font-End 개발을 위한 라이브러리와 프레임워크에 대해 조금 추천해드리겠습니다.

• jQuery(제이쿼리) : 웹 초기부터 현대까지 쭉 인기있는 라이브러리 입니다. HTML, CSS의 Animation을 간단하게 JS를 이용해서 다룰 수 있다는 점이 매력적입니다. 하지만 요즈음에 들어서는 순수 자바스크립트를 이용한 코드를 다른 프레임워크 위에 얹어 사용하는 경우가 대반사이기 때문에 저는 개인적으로 굳이 공부하지 않아도 된다고 생각합니다.

• underscore(언더스코어) : 데이터 가공의 모든 것이 모여져 있는 라이브러리입니다. 알고리즘을 구현하지 않고, 라이브러리에 대부분의 알고리즘이 포함되어 있기 때문에 기본적으로 많이 사용되고 있습니다. 대표적으로 구현되어 있는 알고리즘에는 탐색알고리즘 등이 있습니다.

• momnet.js(모멘트제이에스) : 요일, 날짜, 시간과 관련이 있는 라이브러리입니다. 대부분의 언어에서 시간을 사용하기는 힘든일입니다. 하지만 momnet.js만 있다면 시간관련 기능들을 누워서 떡 먹기입니다. :D

• Anguler.js(엥귤러제이에스) : HTML, CSS, JS를 이용해서 서버와 통신을 하고, 매번 값이 바뀌는 코드를 짰다고 했을때 여러분은 매번 새로고침을 통해 값을 바꿀 것 인가요? 그렇지 않습니다. 자동으로 새로고침되는 것을 원할 것 입니다. Google에서 시작한 오픈소스로 화면을 새로고침 하지않고 UI나 데이터를 실시간으로 변경해 주는 라이브러리 입니다. 요즈음에는 Anguler.js의 불필요한 점과 단점들을 보완한 React.js나 Vew.js가 인기를 끌고 있어서 Anguler.js가 밀리는 추세입니다.

• React.js(리엑트제이에스) : 저는 개인적으로 리액트를 사랑합니다. 리엑트는 Component, JSX, VitualDOM로 크게 3가지 요소로 나눌 수 있습니다. Component는 UI를 구성하는 개별적인 View단위 입니다. React는 Component를 블럭쌓기 처럼 쌓아가면서 만드는 라이브러리입니다. 프레임워크보다는 컴포넌트기반의 라이브러리라고 흔히 말합니다. 또한 단일 웹페이지를 react-router를 이용해 간단히 만들 수 있기 때문에 유용합니다. JSX는 React를 위해 만들어졌습니다. React에서 순수자바스크립트를 이용해서 HTML코드를 작성할 수도 있지만 그렇게 하면 정말정말정말 불편한 코드가 완성됩니다. 하지만 훌륭한 JSX를 사용하면 정말 간편하게 코드를 쭉쭉 써 내려갈 수 있습니다. JSX는 빠르고, 간편하며, 안전합니다. 그렇기 때문에 React를 배우신다면 꼭꼭꼭 알아두셔야 합니다. 또 웹에는 DOM이라는 것이 있습니다. 이것에 변화가 생기면(컴파일이 되면) 렌더트리를 재생성하고, 레이아웃을 만들고, 페인팅 하는 작업이 반복됩니다. 복잡한 싱글페이지에서는 DOM의 작동이 복작하게 돌아가는데, 이로인해서 DOM이 느려지고, 웹 브라우저가 느려지게 되는 것 입니다. 하지만 React는 이러한 문제를 해결하기위해 VitualDOM을 만들었습니다! VitialDOM은 만약 DOM에 변경사항이 생기면 가상 DOM을 만든 후 그곳에 데이터를 저장하고, 컴파일해서 렌더링 한 최종 값을 DOM에 전달합니다. 이로인해서 실제 웹 페이지에서의 발생하는 연산양을 줄여서 성능을 개선하는 방식입니다. 더 깊이 파고들면 끝도 없는 것이 DOM입니다... 이러한 과정을 통해서 React가 돌아가는 것 입니다! Vue와 React에 대한 글을 읽어보시면서 둘 중 무슨 프레임워크 라이브러리를 사용할지 고르시는 것이 좋을 것 같습니다. 하지만 저는 개인적으로 React를 추천드립니다. React의 장점은 큰 규모에서 빛을 바랍니다. 또한 Web과 Native개발에 모두 이용될 수 있습니다. 그리고 Vue보다 더 큰 생태계에서 오는 레퍼런스의 도움을 받을 수 있습니다.

• Vue.js(뷰제이에스) : Anguler.js와 React.js의 단점을 보완한 프레임워크입니다. React는 render()를 이용한 컴파일을 하지만 Vue.js는 템플렛 기반의 프레임워크로 React와는 차이가 조금 있습니다. 먼저 React는 render()과정을 거쳐야 우리의 눈에 보여질 수 있습니다. 하지만 Vue는 render과정을 거치지 않아도 눈에 보일 수 있습니다. 그리고 버전이 업데이트 되면서 Vue에서도 render기능을 사용할 수 있게 되면서 다시한번 상승세를 타고 있습니다. 또 빠르고 경량화 된 앱을 만들 수 있습니다. 하지만 React는 큰 규모의 앱을 만들 수 있습니다. 큰 생태계를 가지기 때문이죠. Vue의 장점은 빠른 렌더링과 더 작은 용량, 간편한 Syntax와 프로젝트 설정, 템플렛과 Render Function을 모두 사용할 수 있는 옵션등이 있습니다. Vue에 대한 지식이 적어서 자세히 모르는점 죄송합니다. :(

React와 Vue

---

React.js라이브러리와 Vue.js프레임워크는 라이벌 관계이기도 합니다. React의 단점을 보완한 프레임워크가 Vue.js 이지만 아직까지도 React는 많은 프로그래머에게 사랑받고 있습니다. 

또 React와 Vue는 많은 점이 닮았습니다. 차례대로 나열해 볼까요? 먼저 Virtual DOM을 사용하는 점입니다. Virtual DOM을 이용해서 웹 페이지의 성능을 최대화 시키는 점이 닮았습니다. 다음은 경량 라이브러리라는 점 입니다. 

Anguler.js의 문제점을 해결해서 만들어진 경량 라이브러리 입니다. 다음으론 Reactive Component 체계를 갖추고 있다는 점 입니다. 

React나 Vue모두 Reactive 형식을 모티브로 만들어 져서 훌륭한 라이브러리, 프레임워크입니다! 그리고 라우터와 번들러, state의 결합이 쉽습니다. 라우터와 번들러를 이용한 서버통신 및 NewWebPage를 만들 수 있습니다. 또한 State라는 영역을 자유자제로 드나들며 결합할 수 있습니다. 

더 많은 공통점이 있겠지만 마지막으로 Server Side Rendeing이 가능합니다. 서버와의 쉽고 간편한 통신을 통해 데이터를 주고 받고 할 수 있습니다. 이렇듯 React와 Vue는 비슷한 라이브러리입니다. 만약 React를 먼저 공부했지만 Vue가 더 좋아보인다..! 해서 꼭 Vue를 공부할 필요는 없습니다. 

더 좋고 나쁨을 구지 가린다면 가릴 수 있겠지만 두개의 사용처가 확실하게 다르기 때문에 환경에 따라서 결정하시면 될 것 같습니다. 

둘 중 하나를 먼저 공부하고 있었더라면 공부하던 라이브러리와 쭉 함께하시는 것도 좋습니다.

- 웹 프로그래밍 : Back-End (node.js)

자바스크립트가 등장하기 이전에는 ASP나 PHP, JSP등의 언어로 웹 개발의 백 엔드부분을 개발했다면 이제는 JavaScript로 백 엔드를 만들 수 있게 되었습니다. 

node.js라는 플랫폼이 등장하면서 JavaScript로 모든게 가능해졌습니다. node.js뒤에는 C언어로 작성된 core들이 줄줄이 있기 때문에 처리속도또한 어느정도 빠르지만 싱글스레드로 처리되기 때문에 문제점이 자주 언급되기도 합니다. 하지만 개발방법을 달리하는 등의 해결책을 통해 극복하고 있습니다.

node.js에서 JavaScript로 서버개발을 하면서, 같이 사용되는 라이브러리도 셀 수 없을 정도로 많이있으며, npm이라는 기능을 제공하기 때문에 쉽고 간편하게 라이브러리를 import해올 수 있습니다. 

그렇기에 이제는 JS로 서버개발을 하지 않을 이유가 없습니다!

- 모바일 애플리케이션 (ios, andriod)

하이브리드라는 단어가 요즘 많이 들릴 것 입니다. IT와 모바일에서 하이브리드앱이라는 말이 있고, 이는 웹과 네이티브를 적적하게 섞어서 빠른속도로 비슷하게 모든 모바일 플랫폼의 결과물을 가르키고 있습니다.

 IOS는 Objective-c, swift언어를 사용하고, ANDRIOD는 Java, Kotlin, Scala등을 사용해서 개발하고있습니다. 하지만 JavaScript가 발전하면서 JavaScript를 이용하여 IOS, ANDRIOD를 개발할 수 있게 되었습니다! 

Core를 따로 파고, 그 위에 JavaScript를 작성하여 여러가지 모바일플랫폼으로 앱들을 제작할 수 있습니다. 하이브리드 앱을 개발할 수 있는 자바스크립트 라이브러리 및 프레임워크가 여럿 생겼습니다. 

몇가지를 소개시켜드리겠습니다.

• appcelerator : 과거에는 titanium studio라고 불렸던 것 같은데, 지금은 서비스명이 변경되었습니다. 하이브리드앱 개발관련된 서비스들 중에 꽤나 유명하고, 오래된 서비스입니다. 그래서 안정성은 어느정도 보장이 됩니다. 하지만 버전 업데이트가 잘 안되서 저는 비추하는 서비스입니다.

• phonegap : 기존의 하이브리드앱들은 대부분 이것으로 만든 앱일 확률이 가장 높습니다. 그만큼 대중화 되어있는 서비스입니다. 하지만 React를 공부하는 저는 적응이 힘들어서 사용하지 않고 있습니다.

• ionic : phonegap이후로 갑자기 뜨고 있는 서비스로 요즘은 ionic으로 많은 앱들을 개발하는 것으로 주변을 통해 많이 듣고 있습니다.

• react-native : Front-End에서 제가 React를 좋아하는 것 처럼 하이브리드 모바일 애플리케이션 개발에서도 React-Native를 가장 좋아하고 사랑합니다 ♡♡♡ 우선 먼저 React를 공부한 사람들에게는 익숙한 페이지에서 익숙한 코드를 사용할 수 있기 때문에 쉽게 적응 할 수 있고, Component 시스템또한 갖추고 있기 때문에 React의 장점을 여럿 포함하고 있습니다. Front-End를 공부하다가 앱을 만들어 보고 싶을때에는 React-Native를 사용해 보는 것도 좋을 것 같습니다.

- PC Program

각 PC의 OS들의 특성이 너무나도 다르기 때문에 각각의 OS맞는 언어로 개발을 진행하던 시대는 갔습니다! 이제는 이부분또한 JavaScript를 통해 3개의 PC플랫폼을 개발할 수 있습니다. 

과거에 조용하게 시작했던 node-webkit이 있었는데, 어느순간엔가 electron으로 옮겨갔고, 지금은 많은 PC서비스들이 electron으로 개발되고 있습니다. 

국내 스타트업들의 PC서비스또한 대부분 electron으로 개발이 되고 있습니다.

• electron : 오픈소스로 운영되고 있으며, 개발에 참여하기 위해 코드추가 요청을 하면 답변/처리가 바로 진행되서, electron메인개발자가 잠을 안잔다는 소문도 있을 정도로 업데이트가 활발히 진행되고있습니다. 또한 기존에 만들었던 웹 서비스를 통째로 얹을 수 있기 때문에 Front-End 개발을 하던 사람들은 간단하게 작업할 수 있다는 장점이 있습니다. HTML, CSS를 사용할 수 있습니다.

- DataBase (MongoDB, Realm)

IT쪽 개발관련업무를 하고 계시다면 꼭 한번쯤은 들어보셨을법한 단어입니다. DataBase인데요, 먼저 JSON이라고 하는 자바스크립트의 데이터형태처리를 하는 텍스트 기반의 데이터 교환 표준이 있는데요. 

좀 더 쉽게 데이터를 저장하고, 교환하기 위해 만들어졌습니다. JSON은 Java Script Object Notation의 약자로 직관적이고, 데이터를 전달하기 위해 쓰입니다. 그리고 JSON은 DataBase용도로 사용됩니다. 대표적으로 DocumentDB라고 불리는 MongoDB가 있는데, 정보를 전달받기 위해 질의를 요청하면 응답형태가 JSON형태로 옵니다. 

질의 조차도 javascript문법을 이용하고 있습니다. 기존 타 DB를 이용하게 되면 질의를 요청하기 위해 SQL문법을 새로 학습을 해야하는데, 이러한 부분에서 javascript는 장점을 가지고 있습니다. 

최근 node.js에서 Realm을 사용하는 방법의 대해서 몇몇 포스팅을 볼 수 있는데요. Realm은 모바일데이터베이스로 각 데이터들을 오브젝트 단위로 관리하는 플랫폼입니다.

node.js에서 Realm을 활용하여 데이터들을 관리할 수 있는데, 다른 언어를 학습할 필요없이 javasciprt를 이용하여 쉽게 사용이 가능합니다.

• MongoDB : 자바스크립트가 유명해지면서 같이 유명해진 데이터베이스입니다. 초기에 운영이 쉽기 때문에 어렵지 않게 시작할 수 있고, 실업에서 많이 쓰이는 DB중 하나입니다.

• Realm : 모바일쪽은 이미 Realm을 다 사용한다고 해도 될 정도로 많은 곳에서 사용하고 있습니다. 모바일개발을 이미하고 계시면서 간단하게 서버쪽을 진행하거나 node.js를 활용하여 데이터를 조작하고 저장해야한다면 Realm을 사용해보는 것도 하나의 방법이라고 생각합니다.

이것들을 제외하고도 IoT나, VR/AR등 여러 환경에 접목시킬 수 있습니다. 여러분이 JavaScript에 관심이 있고, 아주 작은 흥미만 있다면 원하는 모든 것을 만드실 수 있으실 것 입니다. :D

마무리

다음 포스팅 에서는 《자바스크립트의 기초 문법》에 대해 포스팅 하도록 하겠습니다.