추가 적립 안내

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

★ 추천의 글 ★

“바퀴를 재창조하지 마라”라는 오래된 격언을 들어본 적이 있을 것이다.
특히 소프트웨어 기술과 관련이 있는 방법에서는 이 격언에 더욱 공감이 간다. 프로그래머라면 항상 알려진 패턴으로 작업하고 가능한 한 빨리 배포하는 것이 덕목이다. 야크 셰이빙(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장, ‘리액트 애니메이션’에서는 리액트의 웹 애니메이션 기술을 설명한다.

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 소스
__정리