출판사 서평
★ 추천의 글 ★
“바퀴를 재창조하지 마라”라는 오래된 격언을 들어본 적이 있을 것이다.
특히 소프트웨어 기술과 관련이 있는 방법에서는 이 격언에 더욱 공감이 간다. 프로그래머라면 항상 알려진? 패턴으로 작업하고 가능한 한 빨리 배포하는 것이 덕목이다. 야크 셰이빙(yak shaving)(한 가지 일을 진행하는데 점차 연관성이 떨어지는 일을 하게 되는 현상), 바이크쉐딩(bikeshedding)(불필요한 기술적 논쟁에 시간과 노력을 투자하는 일), 금 도금(gold plating), 어설픈 진행, 설정, 시시한 일, 실험, 재...
★ 추천의 글 ★
“바퀴를 재창조하지 마라”라는 오래된 격언을 들어본 적이 있을 것이다.
특히 소프트웨어 기술과 관련이 있는 방법에서는 이 격언에 더욱 공감이 간다. 프로그래머라면 항상 알려진 패턴으로 작업하고 가능한 한 빨리 배포하는 것이 덕목이다. 야크 셰이빙(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 등의 핵심 개념의 이해
■ 리액트를 이용한 폼 구현 및 폼 유효성 검사 패턴 구현
■ 모던 싱글 페이지 웹 애플리케이션 구조의 이해
■ 방대한 웹 기술의 선택으로 인해 스트레스를 받지 않고도 웹 기술을 선택 및 조합하는 방법 이해
■ 완벽한 싱글 페이지 애플리케이션 개발
■ 애플리케이션 디

목차
1장. 리액트 소개
__헬로 리액트
__JSX
____동작 방식
____JSX 디컴파일
____렌더링 결과의 구조
__속성
____동작 방식
____속성 타입
____getDefaultProps
__상태
____동작 방식
__정리
2장. 컴포넌트 통합과 라이프사이클
__컴포넌트를 간편하게 통합하는 방법
__동작을 바인딩한 컴포넌트 통합
____동작 방식
__자식 컴포넌트에 접근하는 방법
__컴포넌트 라이프사이클: 이벤트의 마운트와 언마운트
__컴포넌트 라이프사이클: 이벤트 업데이트
____동작 방식
__정리
3장. 동적 컴포넌트, 믹스인, 폼 그리고 JSX
__동적 컴포넌트
____동작 방식
__믹스인
____동작 방식
__폼
____컨트롤 가능한 컴포넌트: 읽기만 가능한 입력
________동작 방식
____컨트롤 가능한 컴포넌트: 읽기 입력과 쓰기 입력
________동작 방식
________필요 이상으로 힘들지 않은가?
____컨트롤 가능한 컴포넌트: 단순한 폼
________동작 방식
________폼에 대한 가장 적절한 예제는 무엇인가?
________데이터 기반으로 진행하는 폼 리팩토링
________동작 방식
____유효성 검사
________유효성 검사 타입
________리액트 유효성 검사 믹스인 예제
__정리
4장. 리액트 애플리케이션의 구조
__싱글 페이지 애플리케이션이란 무엇인가?
__SPA 디자인의 세 가지 고려사항
____빌드 시스템
________빌드 시스템 선택
________모듈 시스템
____CSS 전처리기
____모던 JS 문법과 JSX 템플릿 컴파일링
____프론트엔드 아키텍처 컴포넌트
________프론트엔드 라우터
________프론트엔드 모델
________뷰, 뷰 모델, 뷰 컨트롤러
________메시징과 이벤트
________기타 유틸리티에 대한 필요
____애플리케이션 디자인
________와이어프레임 작성
________메인 데이터 엔티티와 API
________메인 뷰, 사이트맵, 라우트
__정리
5장. 리액트 애플리케이션 시작
__애플리케이션 디자인
____와이어프레임 제작
________사용자와 연관된 뷰
________포스트 관련 뷰
____데이터 엔티티
____메인 뷰와 사이트맵
__개발 환경 준비
____노드와 필요한 모듈 설치
____웹팩 설치와 환경 설정
________웹팩 환경 설정
__본격적인 개발 전 고려사항
____리액트와 렌더링
____브라우저 지원
____폼 유효성 검사
__앱 개발 시작
____폴더 구조
____목 데이터베이스
____index.html
____js/app.jsx
____메인 뷰
____뷰를 리액트 라우터와 연결
________js/views/appHeader.jsx
________js/views/login.jsx
__정리
6장. 리액트 블로그 앱 파트 1: 액션과 공통 컴포넌트
__리플럭스 액션
__재사용 가능한 컴포넌트와 베이스 스타일
____베이스 스타일
____입력과 로딩 인디케이터
________기본적인 입력 컴포넌트
________로더 컴포넌트
____애플리케이션 헤더
__정리
7장. 리액트 블로그 앱 파트 2: 사용자
__코드 매니페스트
__애플리케이션 런타임 설정
__믹스인과 종속성
____쿠키 읽기와 쓰기
____폼 유틸리티 믹스인
__사용자 기반의 스토어
____세션 컨텍스트 스토어
____사용자 스토어
__사용자 뷰
____로그인 뷰
____사용자 뷰 생성
________믹스인과 라이프사이클 메소드
________사용자 프로파일 이미지
________폼 유효성 검사와 제출
____사용자 뷰 컴포넌트
____사용자 리스트 뷰
____사용자 뷰
__기타 연관된 뷰
____앱 헤더
__정리
8장. 리액트 블로그 앱 파트 3: 포스트
__코드 매니페스트
__포스트 스토어
__포스트 뷰
____포스트 생성과 편집
________믹스인과 라이프사이클 메소드
________폼 전송
____포스트 뷰
____포스트 리스트 컴포넌트
____포스트 리스트 뷰
__영향을 받는 그 밖의 뷰
____사용자 뷰
__정리
9장. 리액트 블로그 앱 파트 4: 무한 스크롤과 검색
__무한 스크롤 로딩
____무한 스크롤 코드 매니페스트
____포스트 스토어 변경
____포스트 리스트 컴포넌트 변경
__포스트 검색
____검색 기능 코드 매니페스트
____검색 스토어
____포스트 스토어 변경
____애플리케이션 헤더 변경
____포스트 리스트 컴포넌트 변경
__마지막 고려사항
____추천하는 향상 기법
________블로그 앱 레벨 업
____다음에는
10장. 리액트 애니메이션
__애니메이션 용어
____클래스 변경을 이용한 CSS 트랜지션
____자바스크립트 코드
____CSS 소스
__DOM 입력과 종료 애니메이션
____팝오버 메뉴
____자바스크립트 코드
____CSS 소스
____리스트 필터링
____자바스크립트 소스
____CSS 소스
__리액트 모션 애니메이션 라이브러러 적용
____리액트 모션의 동작 방법
____시계 애니메이션
__자바스크립트 소스
____CSS 소스
__정리

★ 지은이의 말 ★

여러분 앞에 있는 이 책은 웹 기술에 집중하며 매일 코드 배포자로 살아가는 나와, 베테랑 닷넷 전문가에서 웹 애플리케이션 메이븐(Maven)과 사업가로 변신한 라이언 바이스의 합작품이다. 나는 EMS 같은 응급상황 응답 팀을 위한 매우 복잡한 웹 애플리케이션을 개발하면서 지금의 회사에서 라이언을 만났다. 그를 만날 당시 그 회사는 혁신적인 주력 상품을 개발하고 있었다. 그 당시 리액트의 초창기 시절에 엄청 빠르게 렌더링할 수 있는 신선한 방법인 그 당시의 모든 MV* 프레임워크를 넘어서 그 이상의 무언가를 제공했다. 속도는 응급 응답 산업에서 핵심적인 요소이므로 리액트를 채택했다. 리액트를 이용해 개발할 수 있는 기회가 왔을 때 라이언은 도움을 주면서 박자를 맞췄고 이 책은 그 노력의 산출물이다.
지금은 리액트 같은 기술을 사용하기에 적합한 시기다. 오픈 웹 플랫폼은 웹의 질서를 결코 망치지 않는 단순한 철학 때문에 성공을 거뒀다. 그 결과, 렌더링되는 웹 페이지의 인브라우저 데이터 표현인 DOM은 점차 거대하게 성장해서 좀 더 복잡해졌다. 각각의 작은 DOM 변경은 돌풍과도 같은 연산양과 회복으로 연이어져서 화면의 구성요소들을 업데이트했다. 리액트는 DOM이 실제로 그런 것처럼 고비용의 리소스로 인식하고 DOM의 연산을 최소화한다. 복잡한 애플리케이션 로직을 구동할 때 필요한 시간을 절약해준다.
이 책에서 여러분은 웹 애플리케이션을 개발할 때 사용할 수 있는 실용적인 방법뿐만 아니라 리액트의 기본적인 내용을 배울 것이다. 또한 개발에 필요한 올바른 도구를 선택하는 방법도 학습할 수 있다. 첫 3개 장에서는 스테이트, 속성, JSX뿐 아니라 좀 더 복잡한 주제의 폼과 유효성 검사 같은 리액트의 기본적인 주제를 세부적으로 다루면서 이 책을 시작한다. 4장 ‘리액트 애플리케이션의 구조’는 웹 애플리케이션의 구조 여행과 애플리케이션을 개발할 수 있는 분명한 설계를 할 때 도움이 되는 일부 디자인 기술과 같은 흔치 않은 책이다. 5장에서 9장까지는 디자인 기술과 3장과 4장에서 살펴봤던 라이브러리를 이용해 다중 사용자가 쓸 수 있는 블로그 애플리케이션을 개발해본다. 마지막으로 10장 ‘리액트 애니메이션’에서는 리액트를 이용해 멋진 애니메이션을 만들 수 있는 다양한 방법을 살펴보면서 흥미로운 작업을 진행할 것이다.

★ 옮긴이의 말 ★

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