소셜과 블로그에 올라오는 파이콘 소식들을 접하면서 파이썬을 미리 공부하지 못한게 못내 아쉬웠다. 자바스크립트로 그런 비슷한게 있나 찾아봤는데 이미 2014년 부터 모임이 있었고 올해로 3년째 열리는 JSCON이라는 모임이 있었다.

이번 JSCON은 자바스크립트 개발에서 아주 핫한 리엑트와 앵귤러를 중점적으로 다뤘다. 연사들도 대부분 이런 신기술에 대한 유명인이나 실제 서비스에 적용해본 분들이 나왔다.

Reactive, Component 그리고 AngularJS 2.0

최근에 시간을 내어 앵귤러 2 문서를 꾸준히 보고 있었던게 이번 세션을 더욱 유익하게 만들어 준것 같다. 문서로 봤던 애매모호한 개념들이 고재도 님의 설명을 통해 확실히 이해 되는게 즐거웠다. 앵귤러 문서에 있는 퀵스타트와 달리 Angular CLI를 사용해 코드를 만들어 내는 것이 인상적었다. 원래는 요맨(Yeoman)을 통해 제너레이터를 설치하고 제너레이터가 제공해 주는 스캐폴딩을 사용했다. 제너레이터마다 스케폴딩이 다양했으나 Angular CLI를 이용하면 하나의 통일된 스케폴딩을 사용할 수 있었다.

리엑티브 프로그래밍(Reactive Programming)이란 개념에 대해 처음 소개 받았다. 데이터가 변경함에 따라 그 결과가 지속적으로 변경되는 것을 말하는 것 같다. 예를 들어 프로그래밍에서 a = b + c 라는 코드가 있을 경우 b + c의 결과 값이 a에 할당되고 난 뒤 b나 c가 변경되어도 a 값은 변경되지 않는다. 하지만 리엑티브 프로그래밍이라는 것은 b, c의 변화에 따라 a가 변화되는 것을 의미한다. 엑셀에서 함수를 걸어놓으면 셀이 변경될 때마다 결과값이 변경되는 것과 비슷하다.

앵귤러의 양방향 데이터 바인딩(Tow Way Data Binding)이 떠오를 것이다. 앵귤러 2에서는 이를 구현한 ReactiveX를 사용하는 것에 대해 설명했다.

Webpack 실무 적용전략

우리 회사 대표는 개발자가 아닌데도 요즘 웹펙(Webpack)이라는 용어를 귀가 닳도록 들어 봤다고 했다. 올해엔 정말 웹펙이 엄청난 인기다. 그 배경에는 리엑트의 인기가 한 몫 한것 같다.

한 3년전에는 그런트(Grunt)가 자바스크립트 빌드 툴로 인기 있다가 2년 전에는 굴프(Gulp)가 치고 올라왔다. 그러다가 작년부터는 리엑트와 함께 웹팩이 빌드툴의 세계를 점령해 나가는 것 같다. 그런트/굴프에 비해 웹펙이 비교적 기능이 적어 부족한 부분은 NPM 스크립트로 대체하여 보완하는 방식이다.

발표하신 임형주님께서 어떻게 기존 빌드 시스템에서 웹펙으로 이동했는지 경험담을 들려 주셨다.

ECMA2015 Inside

노드 6 버전에는 ES6 스펙을 99% 지원한다. 그리고 LTS 버전인 4 버전에서도 클래스를 포함하여 웬만한 스펙을 구현해 놓았기 때문에 노드 서버를 만들때 새로운 자바스크립트 문법을 적극 활용하고 있다.

그러나 이준호 님의 발표를 듣고 보니 여전히 ES6의 강력한 기능이 있었고 이를 전혀 사용하지 못했다는 것을 깨닫게 되었다. 바로 제너레이터(Generator)다. 프라미스를 사용하는 것과는 전혀 다를 구조로 비동기 프로그램 코드를 짤 수 있었고 게다가 아름다운 코드를 만드는 것 처럼 보였다.

프라미스를 사용하는데도 주의해야할 것이 있는데 바로 이벤트 큐와 잡 큐를 구분할 줄 아는 것이다. 보통 콜백을 설정하면 그것은 다음 이벤트 큐에 들어가게 된다. 예를 들어 setTimeout() 함수를 이용해 콜백 함수를 등록하면 이것은 이벤트 큐에 푸시되어 다음 이벤트 루프에서 실행된다. 하지만 프라미스의 경우 이벤트 큐로 들어가지 않고 잡 큐에 들어가게 된다. 잡 큐는 이벤트 큐 다음에 위치하는 것이기 때문에 프라미스는 다음 이벤트 루프에서 수행되지 않고 그 전에 즉 잡큐에서 실행된다고 한다. 프라미스와 일반 콜백함수를 함께 작성할 때 유념해야할 점이다.

react.js 실 서비스 적용하기

리엑트를 적용한 해외 사례는 접한 적이 있지만 국내에서는 교육 자료나 개인 프로젝트에서 활용한 것이 전부였다. 쿠팡의 김태희 님께서 발표하신 이번 세션은 쿠팡 해외 여행 사이트에 리엑트를 적용한 사례에 대해 경험담을 위주로 진행되었다.

컴포넌트 재사용에 대한 이점이 기억에 남는다. 내가 작성한 컴포넌트를 누군가 아무 설명도 없었지만 쉽게 가져다 사용할 수 있었다는 내용이다.

컴포넌트를 만들게되면 쉽게 중첩 단계가 깊어 질수 있는데 그것에 대해 주의해야 한다고 했다. 데이터가 위에서 아래로 한 방향으로 흐르게 하는 것이 플룩스(Flux) 구조의 핵심인데 이 중첩 단계가 깊어지면 변경된 데이터가 전파되는데 시간이 오래 걸릴 수 있기 때문이다. 실제로 페이스북 사이트의 댓글 입력시 이러한 현상이 간간히 나타나는데 이러한 이유 때문이라고 한다.

React Native in Production

솔직히 아이오닉(Ionic)를 공부하면서 이게 네이트브 앱 수준이라고 생각했다. 왜냐하면 아이오닉으로 코딩하고 iOS 프레임웍으로 빌드하고 나면 Xcode 프로젝트가 생성되는데 이것이 네이트브 앱이라고 생각했기 때문이다. 아이오닉은 코르도바(Cordova) 위에서 돌아가는 웹 어플리케이션일 뿐이다. 쉽게 얘기하면 웹뷰 위에서 돌아가는 것이기 때문에 네이티브 앱에 비해 성능의 한계가 여전히 존재한다.

리엑트 네이티브(React Native)나 네이티브스크립트(NativeScrip)는 조금 다른 것으로 알고 있다. 하이브리드 앱과 네이티브 앱의 중간 단계라고 볼 수 있다 쏘카의 김석준 님이 리엑트 네이티브로 세 페이지짜리 모바일 어플리케이션을 단 3주만에 개발한 경험담을 공유해 주셨다.

리엑트 네이티브가 네이티브 앱보다 좋은점은 개발 속도 말고도 코드 푸시(Code push) 기능도 있는것 같다. 네이티브 앱은 애플스토어에 배포하기 위해 일이주 정도의 심사 과정이 필요하지만 코드 푸시를 이용해 리엑트 네이티브로 만든 앱을 배표할 때는 몇 시간 걸리지 않는다.

spring과 nodejs의 공존 <시즌2>

이번 발표자 분중에 가장 긱(Geek)한 분위기를 자아 내셔던 분인 장동수 님께서 노드에 대해 발표해 주셨다. 유일하게 백엔드 사이드에 대한 주제라 회사에서 백엔드 업무를 하는 내게는 흥미있는 주제였다.

노드가 인기라고 하지만 여전히 자바는 과거 만들어진 서버에, 현재 만들고 있는 서버에, 그리고 미래에 만들어질 서버에 많이 사용된다. 왜냐하면 그만큼 자바 개발자가 많기 때문이다. 이들은 노드 생태계에서 나오는 수많은 오픈소스를 보며 입맛만 다셔야 할 수 밖에 없는 상황이다. 이제는 자바 개발자들이 좀 더 공격적으로 노드 코드를 사용해 보자는 것이 주된 내용이었다.

Rhino, Nashorn, J2V8. 이러한 툴들이 자바 세상으로 자바스크립트 코드를 모실수 있는 초대장 역할을 한다고 했다.

마지막에 React Native를 다루긴 했지만 전반적으로 웹개발에 대해서만 관심있는 듯 하다. 자바스크립트가 브라우져 밖 세상으로 튀어나온것 만큼이나 내년에는 일렉트론, 미티어 등에 대해서도 다뤘으면 하고 기대해 본다.