스마트링크 멤버간에 웹 개발을 위한 기술 스택 중 하나로 ReactJS를 사용해 보기로 했다. 3주간의 집중 기술 스터디 후에 해당 기술을 이용해 재미난 서비스를 만들기로 했다. 총 3개월의 시간을 ReactJS, Flux, Meteor를 익히고 MVP(최소 기능 제품)을 만들다 보면 큰 그림이 그려지지 않을까 기대해 본다. 첫주는 ReactJS를 시작하기 위해 어떤 것을 새롭게 알아야 할지 정리했다. 각자 준비한 주제를 발표하고 토론하면서 5시간 가량을 시간 가는줄 모르고 유익하게 보낸 하루 였다.
AngularJS vs ReactJS 이해
스마트링크 멤버 중 프론트앤드 개발분은 대부분 AngularJS를 쓰고 있고, 이러한 경험들을 녹여낸 "실전 프로젝트로 배우는 AngularJS"라는 책도 쓸 정도로 익숙한 상태이다. ReactJS를 접근할 때는 어떻게 이해를 하고 사용할지 생각해 보았다.
결론은 새술은 새푸대에 넣어라이다. ReactJS로 개발을 한다면 Flux 아키텍처 사상을 기반으로 하라고 친철하게 안내를 해주고 있다. 그래서 ReactJS로 개발을 한다면 다음과 같이 접근해 보자.
- Single Page Application 방식 개발 : AngularJS의 라우팅 설정 처럼 SPA를 위한 라우팅 컴포넌트가 존재한다.
- Flux 패턴 : 단 방향 데이터 흐름을 통해 데이터의 제어 구조를 강제한다. 애플리케이션이 커질 수록 데이터의 흐름을 잘 제어하는 것이 필요하다. 양방향으로 하다보면 어느 시점에서 데이터의 흐름을 놓칠 수 있지만 Flux에서는 Dispatcher에 등록하는 Action과 이들 Action을 Listen하는 Store간의 흐름이 단 방향이라 초심을 잃지 않고 애플리케이션을 확장할 수 있다.
- JSX : 자바스트립트 XML 신택스 트랜스폼(syntax transform)이다. 쉽게 말해 React안에서 사용하는 HTML은 HTML이 아니라 HTML처럼 보이는 JSX 구문이다. 서비스할 때는 트래스파일되어 Virtual DOM을 생성하고 사용자 이벤트(Synthetic Event)를 감싸는 별도의 이벤트를 제공한다.
- Virtual DOM : 가상의 DOM은 React에서 핸들링하는 DOM이 브라우저 렌더리되는 Native DOM이 아니라 메모리에서 프로그램적으로 운영되는 DOM을 의미한다. 이것의 이점은 화면의 특정값을 변경하면 화면 전체가 바뀌는 것이 아니라 변경된 부분을 찾아주는 Diffing 알고리즘을 통해 검출된 것만 바꿔준다는 것이다. 그래서 속도가 월등한다.
- Webpack(Browserify) : 모듈라이제이션을 기본으로 깔고 간다. CSS/HTML/IMAGE 파일등 Assets 파일을 JS와 함께 모듈단위로 묶어주는 webpack을 많이 사용하고 있다. Bower의 모듈관리 도구를 더 이상 사용하지 않고 NodeJS를 설치하면 있는 NPM (Node Package Manager)를 통해 모듈을 관리해 준다. 따라서 AMD(RequireJS)가 아닌 CommonJS방식의 require를 사용해 모듈을 로딩해 사용한다. NodeJS로 백앤드를 개발해 보았다면 이젠 그런 코드 유형으로 프론트앤드도 개발할 수 있다.
- ECMAScript6 & Babel : 얼마전(2015년6월) ES6 표준이 확정되었다. 하지만 아직 모든 최신 브라우저들이 ES6를 다 지원하는 것은 아니므로 Babel이라는 트랜스파일러를 사용해 ES6에서 말하는 class, =>, import 개념을 사용할 수가 있다. Babel은 grunt, gulp와 같은 빌드 툴을 위한 플러그인이 이미 존재하므로 안쓸 이유가 없다. 한없이 귀찮아 지는 나를 편하게 해주는 기능은 사용해 보자.
ReactJS 한글 홈 페이지의 "시작해보기"를 간단히 돌려보자. 가장 기초적인 부분이니 일단은 직접 실습해 본다.
- CommentBox 예를 보면 Flux 패턴을 적용하지 않고 ReactJS만을 사용할 경우 State, Props, Refs 에 대해 기본적으로 알고 접근을 해야 한다.
- Props는 부모 컴포넌트가 자식 컴포넌트에게 어떤 값이던 전달해 줄 수 있는 컴포넌트의 프로퍼티명이다. JSX가 HTML-ish 하다고 HTML의 애트리뷰트가 아니라는 것이다. 그래서 Props를 통해 전달되는 객체의 값을 불변으로 유지해서 사용해야 한다.
- State는 변경하고 싶은 것을 유지하는 객체이다. 또한 변경을 하고 싶다면 this.state.XXX = YYY 처럼 변경하지 않고 setState(...)을 호출한다.
- Webpack을 이용해 모듈을 하나의 파일로 번들링 할 수 있다. Browserify 대비해서 Assets 파일들도 묶어주기 때문에 최근에 많이 사용되는 도구이다. 동영상을 보면 어떻게 번들링이 되는지 자세히 설명하고 있다.
- import, =>, class 등 문법을 사용하려면 ES6를 표준에 맞춰 코딩하고 Babel을 통해 ES5로 트랜스 파일을 하면 된다.
내가 생각하는 스마트 링크
3년전 알게된 이강훈님과 다양한 스타트업 실험을 함께하였다. 더 나은 개발환경 더 나은 팀문화 그리고 더 나은 서비스를 만들기 위해 토론과 시도를 몇번이고 한것 같다. 현재도 더 나은 연결을 위하여 스마트 링크를 만들어 가고 있다. 한 없이 얕은 브랜딩이 아닌 책임과 자율이 본인에게 돌아가는 자주적인 개발자들의 모임을 꿈꾼다. 마치 자포스 토니 셰이의 사막의 실험과 같은 시도가 지금 강남 한복판에서 조용히 실행되고 있다.
이번 6월에 출간된 "실전 프로젝트로 배우는 AngularJS"의 소스는 이어진 실험을 통해 얻은 것이고, 지식을 공유하고 피드백을 통해 배우기 위해 노력한 결과물일 뿐이다. 개발자에게 작은 영감이라는 던져주었으면 좋겠다. 본인은 현재 "모바일 컨버전스"의 약어로 모비콘이라는 블로그를 운영하고 있다.
참조