리액트 초보 개발자가 리액트 컴포넌트, 리액트 웹 애플리케이션 설계 방법, 리액트 애니메이션 기술을 이용해서 중급 기술을 습득할 수 있도록 개별 기술과 실질적인 예제 프로젝트를 자세히 설명한다. 특히 리액트와 관련 개발 기술을 이용해서 직접 따라 할 수 있는 블로그 앱은 독자가 실제로 체험할 수 있는 중급 이상의 리액트 애플리케이션 개발 경험이 될 것이다.

“바퀴를 재창조하지 마라”라는 오래된 격언을 들어본 적이 있을 것이다.
특히 소프트웨어 기술과 관련이 있는 방법에서는 이 격언에 더욱 공감이 간다. 프로그래머라면 항상 알려진 패턴으로 작업하고 가능한 한 빨리 배포하는 것이 덕목이다. 야크 셰이빙(yak shaving)(한 가지 일을 진행하는데 점차 연관성이 떨어지는 일을 하게 되는 현상), 바이크쉐딩(bikeshedding)(불필요한 기술적 논쟁에 시간과 노력을 투자하는 일), 금 도금(gold plating), 어설픈 진행, 설정, 시시한 일, 실험, 재작업, 특별한 눈송이 아키텍처 같은, 겉보기에 불필요한 실험과 재작업이라 폄하하는 많은 소프트웨어 기술 단어들을 사용한다. 또한 폭포수를 이제 그만 따르고, 자신이 익숙한 강가나 호수를 따르라는 말을 들어왔다. 최상위의 소프트웨어 개발자들은 가장 훌륭한 예시와 검증된 표준을 구현해서 거인의 어깨 위에 있는 것을 자랑스럽게 여긴다. 반대로, 소프트웨어 방종의 본보기는 NIH 증후군(Not Invented Here Syndrome)(신제품을 구상한 부서를 다른 부서에서 적대시하거나 위협으로 느끼는 현상)이 있는 공간이다. 계획에 의존해서 집중하고 시간을 낭비하지 않으며, 우리가 이미 하고 있는 일을 진행해야 한다.
특정 소프트웨어 개발자 커뮤니티가 이런 세계관을 받아들이지 않는다면, 그곳은 바로 자바스크립트의 심각한 전문 개발자일 것이다. 끊임없이 움직이는 주요 브라우저 기술, 다양한 배경을 가진 개발자들의 끝이 없는 유입, 자바스크립트 자체의 지속적인 표준의 진화는 소프트웨어 개발 스택의 변화를 만들어낸다. 재창조는 일반적이고 항상 있어왔다. 브라우저의 DOM과 상호작용하는 데 문제가 있을 때, 재창조의 목표가 설정된다. 시즐(Sizzle), 제이쿼리(jQuery), 마지막으로 브라우저 네이티브 구현체인 querySelectorAll은 이미 존재하는 표준에 대한 기본적인 불만족으로 태어났다. 가장 좋은 XML, JSON의 예시 코드에서 웹 통신을 위한 주요 표준으로 발생했다. 오늘 자바스크립트 프레임워크를 내려받으면 어떤 종류의 패턴이라도 사용할 수 있을 것이다. MVVM, MVC, MVW, MVP, 체이닝 연결(Chain of Responsibility), 발행 구독 패턴(PubSub), 이벤트 기반, 선언적, 기능적, 객체 지향, 모듈, 프로토타입이라는 변화하는 모형과 규모를 살펴보자. 프로그램을 설계하는 데는 한 가지 방법만 존재하는 것이 아니다. 더욱이 커피스크립트(CoffeeScript), 라이브스크립트(LiveScript), 바벨(Babel), 타입스크립트(Typescript), 아놀드씨(ArnoldC) 같은 전처리기 세상을 보면 개발자는 열병에 걸린 듯이 자바스크립트 자체를 재창조하려 한다. 성스러울 것도 없지만 아마도 자바스크립트가 엄청 빠르게 진화하는 원동력일 것이다.
내가 처음으로 리액트를 배웠을 때가 생각난다. 샌프란시스코에서 개최된 유명한 컨퍼런스에 참석했는데, 점심시간에 공개 대화를 진행했던 페이스북과 칸 아카데미(Khan Academy)의 개발자들 옆에 앉게 되었다. 그 당시 가장 유명한 개발 도구는 엠버(Ember), 백본(Backbone), 그리고 앵귤러(Angular)(당시 컨퍼런스에서 그 주제로 30개의 강연이 있었다)였다. 우리는 기존 개발 도구의 장단점을 토론했고, 우리가 느끼는 개발의 어려움은 웹 애플리케이션을 어떻게 추상화할지에 대한 지배적인 견해 때문에 존재했다. 그 당시 내 옆에 앉아 있던 개발자는 “리액트 패밀리를 접해보는 것이 좋겠어요”라고 했고 그날 그의 유일한 컨퍼런스에 나를 초대했다. 물론 참석했다. 결국 내가 참석했던 가장 가치 있는(그리고 그 당시 많은 논쟁이 있었다) 세미나였다.
자신을 피트 헌트(Pete Hunt)라고 소개한 점심 컨퍼런스 진행자는 웹 애플리케이션에 관한 새로운 방법을 제시한 핵심 기여자가 되었다. 나는 그의 강연에 참석했고, 자바스크립트의 차세대 재창조 견인차를 찾았다는 사실을 갑자기 인식했다. 일반적인 양방향 데이터 바인딩 기법은 단방향 데이터 흐름을 위해 사용하지 않고 애플리케이션 단체의 표준 MVC 패턴은 재조명하면서 액션, 스토어, 디스패치 형태로 변형했다. 그러나 가장 흥미로우면서도 근본적인 리액트의 특징은 문제를 일으키는 DOM의 처리로, 자바스크립트의 기본부터 DOM을 완벽하면서 자신 있게 재구성하는 것이다.
여러분이 이 책을 집어 들었다면 이미 자바스크립트의 미래에 흥미가 있을 것이다. 이처럼 반복되는 자바스크립트의 재창조 주제는 지난 몇 년 사이에 서로 밀접한 연관성이 있어왔다. 리액트, ES6, 빌드 시스템, 스캐폴딩(scaffolding) 등 많은 것이 자바스크립트의 전망을 밝게 비추는 새로운 개발 도구다. 이 책은 현대 에코 시스템과 더불어 리액트를 설명한다는 점에서 중요하다 하겠다. 이 책을 읽고 나면 상용 애플리케이션을 계획하고, 설계하고, 결국 개발하는 데 필요한 모든 원칙을 이해하게 될 것이다.
애플리케이션 설계 영역으로 흥미로운 여행을 떠날 때 아담만큼 훌륭한 선생도 없다. 학창 시절 아담을 처음 만났는데, 월드 웹 애플리케이션에서 최초이자 가장 훌륭한 것에 초점을 둔 컨퍼런스인 썬더 플레인(Thunder Plains)에서 그가 강연하는 모습을 보고 빠져들었다. 아담은 중간 지점으로 이동하는 기능을 기반으로 하는 상륙 게임과 자바스크립트 바닐라 프로젝트로 완벽하게 재구성한 3D 광선 투과 엔진 같은 개인 프로젝트 형태의 기발한 컬렉션을 공개했다.
아담은 유일무이한 프로그래머다. 그는 과학자, 땜쟁이, 공예가처럼 일한다. 기존 시스템을 좀 더 잘 이해하기 위해 재구성하는 일을 서슴지 않을뿐더러 자신의 목표를 달성하기 위해 좀 더 나은 방법을 찾아서 새로운 방법으로 실험하기를 즐긴다. 자바스크립트 세상의 흥미롭고 재미난 일들 속으로 들어갈 때는 중요 생각, 탐험과 발견을 장려하는 안내자가 필요하다.
또 다른 안내자는 마이크로소프트 MVP를 수년에 걸쳐 3회 거머쥐었고, 엔터프라이즈 아키텍처에 대한 책을 저술했으며, 산업 이벤트에 강사로 자주 활동하고, 소프트웨어 개발의 전쟁으로 물든 3차원 세상에서 일해온 라이언 바이스(Ryan Vice)가 있다. 그러나 좀 더 중요한 점은 라이언은 문제 해결을 위한 웹 스택의 중심에 리액트를 사용하는 바이스 소프트웨어 LLC 회사를 설립했다는 점이다. 리액트 프로젝트에 대한 현장 경험을 바탕으로, 피 튀기는 웹 환경에서 여러분이 자신만의 웹 애플리케이션을 개발할 때 도움이 되는 훌륭한 안내자가 돼줄 것이다.
바퀴를 새로 창조할 필요가 있다. 동의하지 못하는 독자가 있다면 이미 창조된 첫 번째 바퀴를 각자의 자동차에 붙여보는 과제를 내주고 싶다. 자신의 신념을 따르되 복잡한 돌 디스크가 깔려 있는 고속도로를 즐겁게 달리길 바란다. 하늘을 나는 자동차를 꿈꾸며 자바스크립트에 내기를 걸게 될 것이다.

• 제시 할린(Jesse Harlin) http://jesseharlin.net/ 자바스크립트 아키텍트이자 커뮤니티 리더

■ 리액트 컴포넌트 라이프사이클과 props, states 등의 핵심 개념의 이해
■ 리액트를 이용한 폼 구현 및 폼 유효성 검사 패턴 구현
■ 모던 싱글 페이지 웹 애플리케이션 구조의 이해
■ 방대한 웹 기술의 선택으로 인해 스트레스를 받지 않고도 웹 기술을 선택 및 조합하는 방법 이해
■ 완벽한 싱글 페이지 애플리케이션 개발
■ 애플리케이션 디자인 절차를 고려해 작성한 계획에 따라 개발 시작
■ 애플리케이션 프로토타이핑 기술과 툴에 자신만의 개발 무기 추가
■ 애니메이션을 이용해 화려한 리액트 애플리케이션 제작

이미 자바스크립트와 CSS를 이해하고 웹 브라우저 환경에서 개발하는 웹 전문가에게 초점을 맞춘다. 기타 웹 애플리케이션 프레임워크를 이용한 과거의 개발 경험이 꼭 필요한 것은 아니지만 도움이 될 것이다. 명령어 터미널에 익숙한 경우에도 좀 더 쉽게 따라갈 수 있다.

1장, ‘리액트 소개’에서는 단순한 헬로 월드 예시부터 시작해, 리액트 엔티티와 정의 내용으로 초점을 이동하면서 리액트의 기본 내용을 설명한다.
2장, ‘컴포넌트 통합과 라이프사이클’에서는 컴포넌트의 계층화를 비롯해, DOM에서 컴포넌트를 입력하고 제거하면서 컴포넌트의 상태를 관리한다.
3장, ‘동적 컴포넌트, 믹스인, 폼 그리고 JSX’에서는 리액트의 유효성 검사를 위해 리액트 폼의 기본과 패턴을 살펴본다.
4장, ‘리액트 애플리케이션의 구조’에서는 웹 애플리케이션 디자인의 접근 방법과 함께, 독자들의 주요 선택 사항이 되는 리액트 컨텍스트 내부에서 사용할 수 있는 광범위한 웹 기술 메뉴를 선택하는 방법을 설명한다. 기술적인 디자인을 연습하고 개발을 안내하는 결과물 생성 방법을 학습해보자.
5장, ‘리액트 애플리케이션 시작’에서는 모든 기능을 갖춘 리액트 다중 사용자 블로그 애플리케이션을 구현한다. 개발 환경을 준비하고 모든 개발 도구를 설치하며, 모든 애플리케이션 뷰를 스캐폴딩한다.
6장, ‘리액트 블로그 앱 파트 1: 액션과 공통 컴포넌트’에서는 리플럭스 액션을 이용해 애플리케이션 통신 전략을 수립한다. 여기서는 일부 공통 컴포넌트를 개발한다.
7장, ‘리액트 블로그 앱 파트 2: 사용자’에서는 블로그 애플리케이션의 프로토타입을 위한 사용자 계정 관리 기능 구현 방법을 설명한다.
8장, ‘리액트 블로그 앱 파트 3: 포스트’에서는 블로그 포스트를 생성하고 화면에 표시한다. 9장, ‘리액트 블로그 앱 파트 4: 무한 스크롤과 검색’에서는 무한 스크롤 로딩과 검색 기능을 추가하는 방법을 설명한다.
10장, ‘리액트 애니메이션’에서는 리액트의 웹 애니메이션 기술을 설명한다.

아담 홀튼(Adam Horton)

웹, 컴퓨터, 게임 분야에서 생성자, 파괴자, 재구성자일 뿐만 아니라 열정적인 복고 게이머다. 휴렛 패커드(Hewlett Packard)의 하이엔드 슈퍼돔 서버 부서에서 펌웨어 개발자로 직무를 시작했다. 그가 개발한 자바스크립트와 C 프로그램은 대기업 단말의 파워와 쿨링 시스템, 시스템 진단, 설정 시스템에 적용했다. 그 이후 사용자 인증을 강조한 크로스 도메인 자바스크립트 기술을 이용하면서 페이팔(PayPal)의 웹 개발자로 근무했다. 최근 ESO 솔루션에서 입원 전 전자 건강 기록 필드(HER, electronic health record) 컬렉션 애플리케이션으로 차세대 자바스크립트 개발자를 이끌었다. 그는 포괄적이면서 흔한 오픈 웹을 믿는다. 애플리케이션과 교육 분야의 디자인, 구현 시 개인 개발자의 신조를 넘는 실용주의와 연습에 가치를 준다.

라이언 바이스(Ryan Vice)

기존의 애플리케이션을 마케팅하거나 현대화하기 위해 MVP를 찾으려는 고객들을 위한 현실적인 맞춤형 솔루션 개발을 전문으로 하는 바이스 소프트웨어(Vice Software)의 창업자이자 핵심 아키텍트다. 전반적으로 좀 더 경쟁력 있는 가격을 제공하는데, 바이스 소프트웨어는 기술이 포함된 가격을 제공한다. 즉, 필요한 경우 아키텍트 부분에 해당하는 비용만 지불하면 좀 더 단순한 작업에서는 훨씬 적은 제품 비용만 지불하면 된다. 마이크로소프트의 MVP 상을 3회 수상했으며, 소프트웨어 관련 책을 출간했고, 텍사스에서 개최되는 컨퍼런스와 이벤트에서 강사로 활동했다. 또한 아내 히더와 결혼한 행운아며, 세 자녀 그레이스, 딜란, 노아와 함께 여가시간의 대부분을 보내고 있다.

리액트는 페이스북에서 공개하고 다중 플랫폼에서 적용할 수 있는 서버 클라이언트 겸용 자바스크립트 라이브러리다. 소프트웨어의 MVC 패턴에서 뷰에 해당하는 코드의 모듈화와 컴포넌트화를 좀 더 쉽게 개발할 수 있는 인터페이스를 제공하고, DOM 렌더링의 성능을 높이기 위해 가상 DOM 핸들링 기법을 적용했다. 모던 웹 애플리케이션은 단시간 내에 사용자의 요구 사항을 수용해서 서버와 클라이언트의 기능과 화면 구성을 사이드 이펙트 없이 즉각 업데이트해서 사용자의 급변하는 요구 사항을 충족해야 한다. 이와 더불어 대용량의 데이터를 다양한 사용자 계정 상태와 데이터 오픈 레벨 등 다양한 사용자 설정에 따라 빠른 시간 내에 화면을 구성하거나 업데이트할 수 있어야 훌륭한 사용자 경험을 제공하면서 엔터프라이즈 비즈니스 모델의 요구 사항을 만족할 수 있다. 리액트는 모든 웹 애플리케이션을 개발할 때 필요한 요구 사항을 만족하는 동시에 엔터프라이즈 아키텍처 모델에 필요한 개발 방법론과 개발 도구를 제공한다. 특히 이 책은 실전 프로젝트를 바탕으로 웹 앱을 개발할 때 거쳐야 할 각각의 과정과 해당 개발 도구 등 개발자가 꼭 필요로 하는 팁까지 제공하고 있어, 개인 프로젝트를 진행하려는 초보 개발자뿐 아니라 기획, 디자인, 개발을 모두 고려해서 개발하는 중급 이상의 개발자에게도 유용한 가이드를 제공한다.

조효성

광운대학교 전자공학과를 졸업하고, 동대학원 임베디드 소프트웨어 공학과에서 안드로이드와 블루투스를 전공했다. 현재 오비고에서 웹 개발자로 활동하고 있는 노드에 관심이 많은 행복한 개발자다. 행복한 HMI WebApp 개발 팀에서 차량용 플랫폼에 올라가는 웹 앱을 개발하면서 많은 경험과 실력을 쌓고 있다. 번역 작업을 통해 책을 읽는 모든 사람에게 꼭 도움이 되기를 바라는 마음을 늘 품고 있다. 에이콘출판사에서 출간한 『노드로 하는 웹 앱 테스트 자동화』(2013), 『익스프레스 프레임워크로 하는 노드 웹 앱 프로그래밍』(2014), 『Storm 실시간 빅데이터 분석 플랫폼』(2014), 『안드로이드 음성 인식 애플리케이션 개발』(2014), 『Spark로 하는 고속 빅데이터 분석과 처리』(2014), 『AngularJS 반응형 웹앱 개발과 성능 최적화』(2015)를 번역했다.