VanillaJS > ES6 > ReactJS > TypeScript

최근에 알게 된 신기한 생물이 있다. 바로 곰벌레이다.

곰벌레는 물곰이라는 이름으로도 불리는데 영어로 Water bear라고도 불리기 때문이라고 한다. 이 생물에 대해서는 최근 듣는 팟캐스트에서 알게 되었다. 팟캐스트에서 이 생물의 이름을 ‘물곰’ 이라고 하여 그저 곰의 여러 가지 종들 중의 하나가 아닐까 생각했다.(성격이 물같은 곰인가.. 좀 바보?)

그 뒤에 이어진 이야기들은 충격이었다.

곰벌레의 수명이 무려 150년을 넘는데다, 이론적으로 1000년 이상 생존이 가능하다는 것이다. 게다가 어떠한 상황에서도 죽지 않고 생존할 수 있어 우주에서도 죽지 않고 생존한다고 한다. 지구 상의 어떤 생명체도 이렇게 긴 수명과 환경적응력을 가질 수 없다고 생각했는데, 어떻게 가능한 것일까.

다음은 나무위키에서 발췌한 곰벌레 생존력에 대한 설명이다.
https://namu.wiki/w/%EA%B3%B0%EB%B2%8C%EB%A0%88
  • 저온: 절대영도에서 겨우 1도 높은 −272℃에서 생존한 사례가 있다. 참고로 우주에서 가장 춥다는 부메랑 성운의 온도와 일치하며, 천체 중에는 최저온도조차 이보다 낮거나 비슷한 사례가 없다.
  • 고온: 151℃ 이상의 온도에서도 살아남을 수 있다.
  • 고압: 기압의 6000배를 견딘 사례가 있다. 이것은 마리아나 해구 바닥에서의 수압의 6배를 넘는 압력.
  • 저압: 진공상태에서도 오랜기간동안 살아남을 수 있다.
  • 탈수: 체중의 85%가 수분이나 0.05%까지 줄여도 죽지 않는다.
  • 방사능: 사람의 치사량의 1000배에 해당하는 5000그레이(Gy)의 감마선에도 죽지 않는다.
  • 독성물질: 알코올 등 유기용매나 각종 화학물질에 강한 내성을 지닌다.
곰벌레

불사신

외모지상주의 시대에 저런 외모로 죽지 않고 사는 일이 무슨 의미가 있겠냐고 말할 수 있겠지만, 불사의 생존력은 부럽다 생각되었다.

나는 구차하게 삶을 지속하고 싶은 마음은 없다. 적당한 때에 인생의 하이라이트인 죽음을 맞이할 수 있기를 기대하고 하루를 열심히 살아가자는 주의다.

끝없이 변화하는 Front end 개발환경

어제 새벽 늦게까지 일하는 벤자민, 브랜트와 최근 React로 콤포넌트를 개발하는 이야기, 또 TypeScript를 새로이 도입하려 한다는 이야기를 하다 곰벌레가 생각났다.

그동안 얼마나 많은 환경의 변화를 겪어왔고 또 앞으로 또 얼마나 많고 새로운 환경들을 대비해야 할지 생각하면 한숨이 먼저 나온다.

Javascript

나는 자바스크립트로 개발하는 것을 가장 좋아한다. 웹사이트를 만들기 좋아하는 나에게 자바스크립트는 가장 성능이 좋은 ‘무선전동 드릴’ 과도 같다. 자바스크립트만 잘 다루면 내가 만드는 웹사이트가 살아서 움직이게 할 수 있어서다.

자바스크립트를 시작하게 된 때를 이야기하라면 98년 무렵 매크로미디어사의 플래시를 접하면서라고 할 수 있겠다. 군 제대 후 PC방 아르바이트를 하면서 플래시를 독학했다. 그 후 좀 더 진지하게 웹사이트 개발을 위한 여러 가지 과정을 거치고 2002년 온 나라가 월드컵에 열광하던 무렵 개미굴 같은 웹에이전시 사무실에서 매일 날을 세워가면 자바스크립트, ASP들과 씨름했다.

그 시절 브라우저에서 지원되는 언어 이외에 다른 것이 가능하다고 상상조차 해본 일이 없었다. (사실 개념도 없었다고 생각이 든다.)

몇년전 CoffeeScript라는 것이 꽤 많이 쓰인다고 들었다. 자바스크립트를 만들어내는 언어라니 처음 들었을 때 참 신기했다. 하지만 배워야겠다는 생각을 하진 못했다. 에이 설마 그게 필요하겠어? 라는 생각이 많이 들었다. IE라는 엄청난 똥? 이 두눈을 시퍼렇게 뜨고 버티고 있는 국내 개발환경에서 아무리 아름다운 코딩이 가능하다고 한들 배우는데 시간을 낭비하기 싫었다.

하지만 최근 환경에 많은 변화가 찾아왔다. Babel이라는 괴물이 나왔고 JS개발환경에 커다란 변화가 생긴 것이다. 이제 더는 브라우저가 지원하는 스펙에 의존하여 개발하는 시대가 끝난 것이다.

ECMAScript의 역사

2009년까지 조금씩 변화하던 자바스크립트가 2015년부터 급격하게 변화하고 있다. 그리고 매년 새로운 스펙을 발표하고 있고 TC39에서 Stage4~0까지 새로운 자바스크립트의 아이디어를 정리하고 차례로 표준으로 정해가고 있다. 이제 Front end 개발자는 해마다 변해가는 자바스크립트에 적응해야 하는 시대에 살게 된 것이다.

ES6

사실 난 ES6에 대해 누구보다 기대하고 기다려 왔다. 내가 잘하는 자바스크립트가 다른 언어에 비해 형편없다 라는 이야기를 듣지 않게 되기를 간절히 바랬다. 하지만 막상 나온 ES6는 두려움에 대상이 되었다.

어디서부터 어떻게 접근해야 할지 겁이 나고 또 이것으로 무엇을 만들 수 있을지 엄두가 나지 않았다.

하지만 절박했다. 여기서 따라가지 못하면 도태되어 개발자로는 살아남을 수 없을지 모른다고 생각이 드니 무모하더라도 시작해야 한다 생각했다.

이런 생각이 가득할 무렵 Babel에 대해 알게 되었다. Babel로 컴파일을 하게 되면 현실세계에서 사용이 가능한 자바스크립트로 만들어 준다는 것을 알고 도전해봐야겠다고 생각했다.

Grunt

이런것이 가능하게 해준것은 Grunt와 같은 Task Runner가 있었기 때문이다. Grunt전에 NodeJS가 있어서 가능했고 또 그전에 V8이 있어서이다.

그 당시 사용하던 grunt-babel 를 이용하여 자바스크립트 코드를 ES6로 작성하고 컴파일 하여 새로운 자바스크립트 컴포넌트를 만들었다. 그 이름은 바로 ax5ui 이다.

ax5ui 커밋 그래프

ax5ui는 2015년 말부터 개발을 시작하여 약 1년 반동안 쉼없이 매일 조금씩 만들었다. 거의 혼자 개발을 진행 했는데 커밋횟수만 1900번이 넘는다. 지나고 보니 내가 참 미련하게 무식하다는 생각이 든다 어찌도 이렇게 무식하게 끈임없이 무언가를 할 수 있었을까.

또 ax5ui를 개발하면서 less에서 sass로 css개발방식을 변경하였고, Task Runner도 Grunt에서 Gulp로 교체 하였다. 그리고 ax5ui와 함께 AXBoot를 만들어 UI만 있는 프로젝트에서 백엔드와 함께하는 프로젝트로 진화했다.

AXBoot.com

이만하면 충분해. 난 이제 더이상 새로운 개발환경에 적응할 필요가 없다고 생각 했다.

ReactJS

ReactJS에 대해 이야기 하기 전에 AngularJS를 말하지 않을 수 없다. 난 AngularJS가 두려웠다. 그 당시 완성한 axisj를 재구성해야 하는 부담이 있었기 때문에 AngularJS를 배우는 것을 꺼려했다. 지금 와서 생각해보면 반은 잘한 일이고 반은 잘못한 일이다.

새로운 변화가 찾아왔을 때 항상 열린 마음으로 적극적으로 대했어야 했는데 그러지 못했다는 비겁함이 그 반이고 다행히도 타이핑할때마다 헷갈리는 스펠링을 가진 AngularJS 천하가 되지 않아서가 나머지 반이다.

그렇게 시간이 지나 ReactJS가 세상에 나왔다.

ReactJS 역시 피하고 싶은 상대였다. 이걸 배워야 하나. 배웠다가 또 다른게 나와서 시간을 낭비하게 되면 어쩌지.

이런 갈등의 시간을 보내고 있을 무렵 짧지도 길지도 않은 개발 인생의 큰 전환점이 찾아왔다. Brant와 함께 만든 CHEQUER가 SQLGate의 양용성 대표와 함께하기로 한 것이다.

난 그동안 만들어둔 컴포넌트들이 있기 때문에 새로운 SQLGate개발에 꽤 자신이 있었다. SQLGate가 웹 애플리케이션은 아니지만 약간 더 어렵고 복잡할 뿐이지 개발에는 큰 문제가 없을 거라 생각했다.

약 2개월간 우리는 새로운 SQLGate를 시험 개발하였다. 꽤 나쁘지 않은 결과물이 만들어 졌다. 그리고 하이브리드 애플리케이션도 네이티브 애플리케이션처럼 만들수 있겠다는 생각이 들었다.

하지만 직접 개발한 개발자로서는 만족스럽지 않았다. 점점 더 복잡해져 가는 상태 값들 성능에 대한 불안감들이 매일 고통스럽게 했다. 게다가 앞으로 추가해야 하는 기능들이 만든 기능들보다 많고 배포 후에도 지속해서 기능을 추가해야만 하는 상황을 예상하면 기존의 방식으로는 한계라고 생각이 들었다.

이런 고민을 매일 하면 불면증에 시달리고 있을 때 평소 오픈프론티어랩에서 얼굴을 익혀두었던 김동우님(https://github.com/gimdongwoo)이 눈에 들어왔다.

한 달이 넘는 기간 동안 동우씨가 눈에 보일때마다 집요하게 물어보았다.

“리액트 좋아요?” “할만해요?" “후회없어요?"

그의 답은 단호했다.

“추천합니다.”

난 그의 대답을 예상하고 있었고 안심이 되었다.

좋다고 생각이 들면 혼자서 도전해보면 될 일인데. 머가 그리 불안했던걸까. 어쨌든 그의 말에 힘을 얻어서 공부를 시작했다. webpack를 먼저 학습하고 그다음 React 튜토리얼을 따라했다.

ReactJS로 개발중인 datagrid 콤포넌트

기존에 하던작업들과 병행하면서 조금씩 학습을 반복해 나아가다보니 약 1개월 무렵부터 React에 적응이 되기 시작했다. 지금은 React로 datagrid 컴포넌트를 만들고 있고 몇몇 기능구현을 완료하면 새로운 SQLGate에 사용이 가능한 수준까지 도달했다.

그래 이제 이대로 가자. 하지만 이것이 끝이 아니었다.

TypeScript

TypeScript에 대해서는 ReactJS를 배우기 전부터 알고 있었다. MS에서 밀고 있는 새로운 자바스크립트 언어. 일단 MS가 오픈소스를 한다는 사실이 싫었다. 그 악랄한 MS가 오픈소스라니 이놈들 또 조금 머 하다가 마는 거 아닌가. 그리고 MS는 IE를 만들어낸 장본인 아닌가.

그래서 그쪽은 거들떠보기도 싫었다. 비슷한 역할을 한다는 Flow가 있다기에 지금 진행 중인 React콤포넌트 개발이 어느 정도 진행이 되고 나면 도입을 검토하려고 계획했었다.

동우씨가 문제를 만들었다. 조용히 개발하고 있는데 여기를 간다는 것이다. 아 왠지 바쁘지만 따라가지 않으면 후회할 것 같은 생각이 들었다.

그래 가보자.

행사장에 도착해보니 JS의 뜨거운 열기가 무서웠다. 하지만 그열기가 나를 불타오르게 만들었다. 두려운 마음보다 더 큰 순수한 열정이 생겨났다.

내가 듣고 싶은 세션들은 모두 인기가 너무 많아 앉을 자리도 없고 서서 듣거나 의자들 틈새 카펫 바닥에 앉아서 들어야 했다.

많은 이야기가 있지만 TypeScript관련된 결론만 말하면, TypeScript로 개발하는 것이 별다를게 없다는 것이다. 실보다는 득이 더 크다.

기존 ES6문법에서 타입를 좀 더 아름답게 다룰 수 있는 방법들만 다를뿐 크게 다르지도 않고 Webpack에 몇가지 룰만 추가하고 IDE에 tslint만 잘 설정한다면 되겠다라는 결론을 얻었다.

결론

앞으로 또다시 변화해야 하는 상황이 올지도 모르겠다. 하지만 이제는 ‘물곰’과 같은 적응력으로 바뀌는 환경에 적응할 자신이 생겼다. Refactoring이 두렵거나 새로운것을 배우는 시간이 아깝다고 생각하지 않을 생각이다. 또 새로운 것에 선입견을 가지고 바라보지도 않을생각이다.

이제 즐겁게 개발을 마저 할 수 있겠지?

PS. 하지만 TypeScript홈페이지는 정말 이쁘지 않게 생겼다.