JSCONF:16 URBAN JAVASCRIPT 후기

자바스크립트 컨퍼런스 사진

개인적인 욕구로 인해

부산에서 개발을 하다 보니 자바스크립트에 대해 대화를 할 기회는 사실상 적다. 물론 팀원들과 대화를 할 수 있지만 팀원이 아닌 타인들과 대화를 하고 싶다는 욕구는 항상 존재해왔다. 마침 JSCONF:16가 열린다는 것을 이상한 모임 슬랙을 통해 접하게 되었고 회사의 지원으로 신청하게 되었다. 회사에 들어오고 나서 처음으로 자발적으로 요구한 컨퍼런스이며 회사 내에서 혼자 가게 되어 설렘 반 걱정 반은 무슨 설렘 백으로 행사 전날에 올라와 컨퍼런스 장소 주변에서 하룻밤을 잤다.

세션에 대해 내 생각은

개인적으로 제삼자에게 얻게 되는 개발과 관련된 정보는 비판적인 자세로 보게 되며 직접 경험해보지도 못했거나 개발해보지 못한 사람이 전달해주는 정보는 잘못된 관점을 가질 수 있어서 너무 위험하고 시간은 더 들지만 당연하게 표준 스펙은 기본이며 github을 issue, pull request를 참고 또는 활용하는 게 더 나은 방법이라고 생각해왔다. 이번 JSCONF:16 컨퍼런스 세션 타임 테이블을 봤을 때 처음 든 생각은 하나하나 버릴 것 없이 자신의 경험을 기반으로 실제 현업의 개발자분들이 발표를 진행하기에 더 좋았고 특히 아래 2가지 세션을 가장 기대했다.

Reactive, Component 그리고 AngularJS 2.0
ECMAScript Inside

그 이유로는 angular.js 1.XX를 회사 서비스 프론트엔드 프레임워크로 사용하고 있었고 서비스의 복잡도가 높아지고 있는 상황에서 힘겨워하는 모습을 보며 “내가 잘못 이해하고 사용하는 부분이 있나?”라는 생각이 들었고 모바일을 지원해야 하는 상황과 HTML 웹 컴포넌트 표준 그리고 angular.js 2와 react.js에서 지향하고 있는 컴포넌트 기반 아키텍쳐를 보면서 지금 짜는 코드가 마지못해 짜는 건가? 답이 아닌 걸 답이라 주문을 외우고 있나? 라는 생각이 조금씩 들었다. 그리고 순수하게 프로그래밍 언어 자체에 대한 이해도를 높이고 싶은 욕심도 존재했기 때문이다.

Reactive, Component 그리고 Angular.js 2.0

angular.js 1에 가지고 있던 문제점들이 화면에 나올 때 하나같이 피부로 느끼고 있었기에 엄청난 공감을 했다. $scope 그리고 지옥의 디렉티브를 이해하려고 머리를 싸맸던 시간이 생각났다. (~~디렉티브를 처음 공부할 때는 정말 얼마나 지옥 같은 하루였는지.. 근데 아직도 디렉티브는 어려운 게 함정~~)

RC6 버젼이기에 곧 정식버젼 릴리즈가 임박한 것 같으며 CLI는 편해 보이지만 beta 버젼이라서 편하려고 사용하는 도구가 오히려 불편하게 만들어주는 아이러니한 상황이 나타날 가능성이 높아 보이고 발표자분도 만약 실제 제품에 도입하려고 할 때 지금 상황으로는 너무 고생하면서 사용할 것까지는 없으며 사용 여부를 검토해보고 선택적인 활용이 권장된다고 한다. 스캐폴딩, 빌드, 번들링 등 알아서 해주는 작업이 많지만, 발표 데모 진행 시 타입스크립트 버젼 때문에 터지는 것을 보고 아주 무서운 도구라 생각됐다.

발표가 끝나고 머릿속을 맴돌았던 사실은 다음과 같다.

직접 DOM을 조작했던 방식의 변화
Universal을 통한 서버 사이드 렌더링 가능

DOM에 대한 악명은 높은데 (생각해보니 너무 안 좋다는 소리를 많이 들어서 DOM에 대한 비판적인 관점을 가지는 것은 당연하다고 생각해서 찾아볼 생각도 안했는 데 관점 없는 관점을 가지고 있는 것을 깨달았다. 왜 악명이 높은지 조사해봐야겠다.) 이 녀석을 angular.js 1은 직접 건드리다보니 성능 저하의 원인이 되는데 react.js가 접근했던 방법과 비슷하게 메모리상에 AST를 만들어 처리하며 Universal을 활용하면 서버사이드 isomorphic 렌더링도 가능하다. 즉, 런타임이든 컴파일 타임이든 렌더링에 대한 선택이 가능하다. react.js에 대한 스펙을 대충 훑고 튜토리얼을 손수 다 해본 리액트 개발 경험이 없는 초보자인 내가 느끼기에는 뭔가 리액트스럽게 변화한다는 느낌적인 느낌을 지울 수가 없다. angular-eact.js (?)

마지막 파트로 Reactive Programming에 대해 발표를 했었는데 앞부분 파트 발표 데모 때문에 시간상 급하게 설명해 주셨는 데 정말 정말 굉장히 아쉬웠다. ReactiveX가 소개됐고 프로그래밍 패러다임의 하나이며 Observables와 Promise를 비교하면서 multiple, single에 대한 언급을 했고 연속적인 stream 데이터를 비동기적으로 처리가 가능하다는 나의 에버노트에 적힌 노트가 내 이해도의 한계였다. 차후에 따로 공부해봐야겠다. (발표 자료)

Webpack 실무 적용 전략

grunt에서 점차 webpack으로 넘어갈 때 경험했던 것들을 발표해주셨다. 간단히 정리해본다면 *.js만이 아닌 다른 assets까지 번들링 가능하며 grunt, gulp를 사용하지 않고 webpack과 npm script로 기존의 테스크 자동화가 가능하며 캐싱을 통해 빠른 번들링이 가능하지만, 러닝 커브가 크며 웹팩 내부적으로 진행하는 최적화 때문에 골치 아파질 가능성이 존재한다. config 설정을 통해 다양한 상황에 맞춰 번들링을 진행할 수 있으며 의존성에 대한 시각화, 최적화가 가능하다. 웹팩에 활용할 수 있는 모듈이 많이 존재한다.

현재 grunt를 사용하고 있는데 웹팩으로의 마이그레이션을 고려해봐야겠다. (~~먼산…~~) 발표 이 후 사운드 플레이로 들었던 피드백은 “활용할 수 있는 모듈이 저렇게 다양한 줄 몰랐다.”가 다수였으므로 webpack 도입 시기에 초기 러닝 커브를 극복하고! 스태미너를 불태워 활용할 수 있는 바퀴에 대해 조사가 필요하다고 생각된다.

그리고 발표 도중 문득 든 생각은 package management 도구 중 bower에 대해 몇몇 문제점이 제기되다 보니 npm으로 프론트엔드 의존성까지 모두 관리하는 추세인 것은 알고 있었는데 무슨 문제가 있는 건지, bower와 npm의 차이는 무엇인지를 조사해서 한번 정리해봐야겠다. 바퀴를 관리하는 방법에 무지했다니 반성해야겠다. 느낌상 recursive dependency에 대한 내용과 관련 있을 거 같은데 앞의 질문들을 이해하고 나서 프론트엔드는 bower 백엔드는 npm으로 의존성을 관리하는 현재 서비스에서 프로덕션 과정을 거쳐 유저에게 딜리버리되는 script의 용량을 비교, 분석해봐야겠다. (발표자분의 webpack sample github 저장소는 여기에, 발표자료)

ECMAScript 2015 Inside

사실 프로그래밍 언어 자체에 대한 관심이 많아 표준 명세, 컴파일러의 구조 및 처리 과정 등을 틈틈이 공부하고 있는데 해당 세션도 기대가 되었다.

간단히 정리해보면 ECMAScript 6가 아닌 ECMAScript 2015로 정식 명칭으로 수정되었으며 ES5의 상위 집합으로 점진적인 적용이 가능하지만, 하위 호환성으로 인해 예전 버젼의 단점을 그대로 가진다. 비동기 제어와 관련하여 Promise, Generator를 설명했고 최종적으로 Generator + Promise를 설명했다. Promise는 “약속”이며 한 문장으로 요약하면 “내가 값이 생기면 넘겨 줄게. 그러면 실행해줘”로 표현할 수 있으며 ES2015에 추가된 Job Queue를 알아야 제대로 활용할 수 있으며 예외 처리, 단일 귀결, 취소 불가에 대한 문제점이 존재한다. 또한 Generator는 “호출하면 이터레이터를 반환한다. “로 표현할 수 있으며 새롭게 추가된 Symbol.iterator 프로퍼티, Function 이름 앞의 *, 제어권을 넘기는 yield 예약어가 활용된다. 예외처리가 강력한 기능 중 하나다. Generator + Promise를 통해 비동기 제어시 콜백이 아닌 try ~ catch를 통해 예외 처리를 할 수 있다.

Promise는 대체로 다 알던 내용이었는 데 Generator는 추가되었다는 사실만 알았지 정확히 어떤 기능인지 전혀 파악하지 못했었는데 처음으로 자바스크립트에서 쓰레드가 존재한다는 느낌을 받았다.

1
2
3
4
5
6
7
8
9
10
11
12 function* idMaker(){
    var index = 0;
    while(true)
        yield index++;
}

var gen = idMaker(); // "Generator { }"

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// ...

출처 - Mozilla Developer Network: Generators

yield 예약어가 나오기 전까지 로직이 실행되며 만날 경우 컨텍스트는 유지된 채로 제어권이 넘어가고 (컨텍스트 스위칭) Generator 인터페이스에 의해 로직이 미세하게 제어된다. (쓰레드 스케줄링) 지금 다시 보니 뭔가 끼워 맞춘 듯한 느낌이 드는데 발표를 들을 때는 정말 그랬다. Generator + Promise 발표의 경우 제대로 이해하지 못했는데 Promise의 약점을 Generator가 채워줄 수 있을 것 같다는 느낌이 든다. 차후 다시 공부를 해봐야겠다.
(발표자분의 비동기 제어에 대한 저장소는 여기에, 발표자료)

Lets with Lunch

혼자 가는 컨퍼런스였고 90분이라는 긴 점심시간 동안 뭐 하고 놀지 고민하던 찰나에 주최 측으로부터 동일한 주제를 선택한 사람끼리 이야기를 할 수 있도록 기회를 제공해주길래 자바스크립트의 미래에 바로 신청을 했었다. 놀라운 사실은 그냥 이야기하고 밥을 먹겠다고 선택한 사람들이 너무 압도적으로 많았다는 사실. 이렇게 적은 인원이 신청했을 것이라고는 예상하지 못해 당황스러웠지만, 초면인 사람들과 특정 주제에 관해 이야기를 나누기 위해서는 7~8명의 소수도 괜찮다고 생각됐다. angular.js 1.XX와 react.js를 실제 사용해본 개발자분의 경험담, 조언 그리고 타입스크립트에 대한 생각, 이미지 프로세싱에 대한 패턴, 각자 회사의 이야기까지 내년에 열리게 될 JS:CONF에도 Lets를 신청할 가치가 있어 보인다.

React.js 실서비스 적용하기

동일하게 정리해본다면 angular.js 1과 비교했을 때 react.js는 그 자체만으로 사용할 수 없으며 babel과 같은 도구들이 필요하다. CDN으로 외부 의존성 라이브러리를 처리하여 필요한 코드만을 번들링했으며 react.js에 대한 Dev tools가 있어 손쉬운 디버깅이 가능하다. 컴포넌트별 재사용성을 높였으며 트리 형태로 컴포넌트를 구성하니 어디서 코드를 고쳐야 할 지가 명확해졌다.

angular.js 1.5.X, 2버젼에서 컴포넌트 아키텍쳐를 지원, 채택한 상황에서 MVW와 비교했을 때 어떤 장점 때문에 결정을 하게 되었을 지 감이 잡히질 않았다. 하지만 발표를 보고 난 후에는 어떤 컴포넌트를 수정해야 할 지 명확해서 어떤 코드를 수정해야 할 지도 명확해졌다는 점이 좋았다. 그리고 컴포넌트별로 정리된 사내 문서를 보고 문서화에 대해 깊은 고민을 해볼 필요가 있다고 생각했다. (발표자료)

React Native in Production

2명의 개발자가 주어진 기간 3주 안에 안드로이드, iOS 앱을 개발해야 하는 상황에서 시작해서 지금까지 React Native를 통해 개발하면서 겪고 느꼈던 부분들에 대해 발표를 해주셨다.

Cordova + React.js
NativeScript
React Native

위 3개의 선택지가 있었으며 Cordova는 느렸고 NativeScript는 공룡이 아니라 믿음직스럽지 못했고 react.js 경험이 있는 개발자라 React Native를 선택했다고 한다. 하지만 아직 0.XX 버젼이라 각 버젼별로 바뀌는 부분이 많고 그냥 다 breaking changes라고 말씀하시는 모습이 얼마나 고생을 했을까 하는 측은한 마음이 생겼다. (발표자료)

spring과 node.js의 공존 <시즌2>

세션 중 백엔드와 관련된 유일한 세션이었는 데 “서버사이드에서 주류가 되기 힘든 상황에서 자바에 빌붙혀 살아보자”가 컨셉이었다. J2V8을 사용해서 Java에서 V8을 바인딩시켜 사용할 수 있으며 Java 8에 기본적으로 자바스크립트를 돌릴 수 있는 모듈이 존재한다. J2V8을 사용함으로써 얻는 효과는 npm에 존재하는 수많은 모듈을 require를 통해 그대로 사용할 수 있다는 점이다.

백엔드에 대한 지식이 부족하다 보니 “아 저렇게 생각할 수도 있겠다.”라며 구경하듯이 봤다. (발표자료)

끝으로

angular.js 1.XX과 grunt를 통해 개발해본 경험이 존재하고 react.js 및 백엔드에 대한 개발 경험이 부족하다 보니 오전, 오후 세션에 대한 후기가 나뉘는 것 같다. 피로도 누적과 오전 세션까지는 발표 자료 공유에 대한 불확실함 때문에 에버노트에 정리했지만 공유를 해준다는 소식을 듣고 개인적인 감상만을 적었다고 핑계를 대본다.

사람을 만나면서 서로를 소개하고 명함을 주고받고 알아가는 것들이 익숙하지 않다 보니 많은 사람을 만나보지는 못했지만 새로운 지식, 관점을 얻을 수 있고 현재 개발에 대해 반성을 할 수 있다는 것에 만족할 수 있었다. 발표 자료가 공유되는 대로 해당 후기를 조금씩 업데이트해봐야겠다.