foreword.md

시작하는 글

'리액트 도움닫기(원제 The Road to learn React)'는 리액트 입문자를 위한 책입니다. 리액트 설치부터 기초, 서버 배포까지, 리액트 개발 전 과정을 설명합니다. 나아가 유지, 관리하기 쉬운 애플리케이션 개발을 위해 리액트 디자인 패턴과 모범 사례를 소개합니다. 각 장과 절마다 추가 실습 및 심화 학습을 위한 읽기 자료를 제시했습니다. 이 책의 목적은 순수한 리액트만으로도 훌륭한 애플리케이션을 만드는 것입니다. 따라서 외부 상태 관리 라이브러리와 도구를 다루지 않습니다. 무엇보다 기초가 튼튼해야 더 넓은 리액트 세계로 뛰어들 수 있기 때문입니다.

앞으로 여러분들은 이 책을 읽으며 해커 뉴스 애플리케이션을 만들어 볼 것입니다. 검색과 정렬, 페이지네이션, 클라이언트 캐시 기능을 직접 구현해보면서 리액트 기초 지식을 튼튼히 쌓을 수 있을 것입니다. 이전에 자바스크립트 ES5를 사용했다면 자바스크립트 ES6로 전환할 수 있는 계기가 될 것입니다.

저는 독자 여러분들이 리액트와 자바스크립트에 재미와 흥미를 느꼈으면 합니다. 합니다. 그리고 이 책을 도움닫기 삼아 다음 단계로 껑충 뛰어가길 바랍니다.

{pagebreak}

지은이: 로빈 위어크(Robin Wieruch)

로빈은 독일 출신 소프트웨어 엔지니어이자 자바스크립트 선생님, 그리고 프리랜서로 활동하고 있습니다. 전 세계 학생들을 가르치며 그들이 성장하는 모습에 보람을 느끼고 있습니다.

로빈은 독일에서 컴퓨터 공학 석사 과정을 마친 후, 스타트업 회사인 Small Improvements에서 소프트웨어 엔지니어로 근무하며 SaaS 제품을 개발했습니다. 당시 제품은 초창기에는 위켓(Wicket), 제이쿼리(jQuery), 자바(Java)로 만들어졌으나 1세대 SPA 프레임워크들이 나타나면서 앵귤러(Angular) 버전 1로 마이그레이션하여 이후 2년 간 앵귤러로 개발했습니다. 그러나 앵귤러는 상태 관리 애플리케이션에서는 최상의 솔루션이 아니라는 결론에 이르러, 최종적으로 리액트와 리덕스를 도입해 대규모 애플케이션을 성공적으로 운영할 수 있었습니다.

회사를 다니는 동안 로빈은 개인 사이트에 웹 기술 관련 글을 정기적으로 집필하면서 그 스스로 가르치는 일에 재능이 있다는 것을 깨닫게 되었습니다. 또한 독자들의 피드백을 통해 글쓰기 능력을 크게 향상시킬 수 있었고 효과적인 프로그래밍 교수법을 개발할 수 있었습니다.

그외 여가 시간은 모두 프로그래밍 학습에 투자하고 있습니다. 선생님이 배움을 게을리하면 더 이상 학생들에게 가르칠 것이 없다는 그의 생각 때문입니다.

로빈을 후원하고 함께 일하길 원한다면 그의 개인 웹 사이트를 방문하길 바랍니다.

{pagebreak}

옮긴이: 이수진 (Sujin Lee)

이 책을 한국어로 옮긴 수진은 소리와 색으로 빚는 인터렉티브 웹 애플리케이션 개발에 관심이 많은 프론트엔드 개발자입니다. 그녀의 꿈은 모든 사람들이 음악 원리를 탐색하고 창의적인 음악적 경험을 줄 수 있는 웹 애플리케이션을 만드는 것입니다. 그 꿈을 이루고자 현재 서울대학교 융합과학기술대학원 디지털 정보융합과정 석사 과정에 재학 중입니다. 서울대학교 융합과학기술대학원 음악 오디오 연구실 소속으로 웹 오디오 기술 연구와 음악 정보 추출 연구를 하고 있습니다.

수진은 모두가 평등하게 교육을 받을 수 있는 사회를 지지하며 후원하고 있습니다. 학부에서 작곡과 음악교육을 전공한 후, IT 비영리 교육 재단에서 다년간 온라인 교육 플랫폼을 기획하고 운영했습니다. 다수의 프로그래밍 튜토리얼과 기술 문서를 번역하며 영어의 장벽 없이 누구나 최신 교육 콘텐츠를 접할 수 있게 노력하고 있습니다. 또한 여성 개발자로서 IT분야 내 성 격차(Gender Gap) 문제에 많은 관심을 기울이고 있습니다. 국내 개발자 커뮤니티 내 다양성을 높이고자 여성 개발자 커뮤니티를 조직하였고 여성들에게 프로그래밍 학습 기회를 제공하고자 파이썬과 장고(Django) 웹 프레임워크, 자바스크립트 관련 무료 워크숍과 세미나를 운영해오고 있습니다.

수진이 현재 진행 중인 프로젝트는 깃허브에서 확인할 수 있으며, 개인 웹 사이트에서 자신의 개발 경험, 번역, 그리고 소소한 이야기를 나누고 있습니다. 페이스북과 트위터를 통해 음악, 기술, 여성, 달리기에 관해 많은 이야기를 나누길 바랍니다. 인스타그램에서 전국 방방곳곳을 달리는 그녀의 모습을 볼 수 있습니다.

{pagebreak}

도움주신 분

조수현(한빛미디어), 정재필, 박성택, 박준모, 정해균 님께서 리뷰 과정 중 띄어쓰기, 오탈자, 맞춤법 등을 수정해주셨습니다.

추천사

로드 투 리액트(Road to React), 굿리드, 아마존에서 많은 독자들이 추천사를 작성해주셨습니다.

해외

무하마드 카쉬프(Muhammad Kashif) "이 책은 리액트 입문자부터 전문가까지 모두가 읽을 수 있는 책입니다. 다른 곳에서 얻을 수 없는 통찰과 기술을 이 책에서 만날 수 있습니다. 참고 자료와 예제 또한 완벽합니다. 17년차 개발자인 나조차 리액트를 처음 시작할 때 어려움을 겪었습니다. 이 책은 마법입니다."

안드레아 배가스(Andre Vargas) "놀라움 그 자체입니다! 이 책에서 리액트와 ES6 대부분을 배웠습니다!"

니콜라스 헌터-워커(Nicholas Hunt-Walker), 시애틀 코딩 스쿨 강사 "지금까지 읽었던 코딩 책 중 가장 훌륭한 책"

어스틴 그린(Austin Green) "리액트, ES6, 고급 프로그래밍 개념까지 모든 것을 갖춘 책입니다."

니콜라스 퍼그순(Nicole Ferguson) "주말 내내 이 책을 봤습니다. 너무 재밌어서 양심의 가책을 느낄 정도입니다."

카란(Karan) "방금 이 책을 마쳤습니다. 리액트와 자바스크립트 입문자들을 위한 최고의 책입니다. 멋집니다! )"

에릭 프리오우(Eric Priou) "로빈 위어크 책은 필독서입니다. 리액트와 자바스크립트의 정수를 맛 볼 수 있습니다."

토마스 라크니(Thomas Lockney) "방대한 내용을 한꺼번에 다루지 않아 좋았습니다. 나는 리액트가 어떤 것인지 맛보고 싶었습니다. 모르는 ES6 문법을 배우려고 이것 저것 찾아볼 필요가 없습니다. 부지런한 독자라면, 이 책의 내용 그 이상의 것을 얻을 수 있을 것입니다."

익명의 신입 개발자 "신입 개발자도 쉽게 읽을 수 있었습니다. 리액트 개발에 자신감을 갖게 되었습니다. 리액트 공식 튜토리얼보다 훨씬 좋았습니다."

익명의 학생 "리액트 입문서 책 중 최고입니다. '코드와 배움' 이 두 가지를 정확히 마스터할 수 있습니다."

국내

강지원 "리액트를 처음 접하는 사람도 알아듣기 쉽게 쓰여진 책. 흥미로운 실습 위주로 진행되기 때문에 지루하지 않게 내용을 따라갈 수 있습니다. 덤으로, ES6까지 자연스럽게 함께 익힐 수 있습니다."

기발자 "리액트 중요 개념을 익히는데 도움이 되었습니다."

김주온 이 책으로 리액트의 기본 개념을 잡을 수 있었습니다. 리액트를 시작하려는 분들에게 최고의 입문서로 추천합니다.

최세영 "쉬운 한글을 사용하고 있어 이해하기 쉬웠습니다."

진영화 "스스로 따라 하며 공부할 수 있는 책"

박희정 "직접 실습하며 리액트 기초 지식과 함께 개발 실력을 높일 수 있었습니다. ES6 입문서로도 손색없습니다. 자세한 설명과 예제가 곁들여져 있어 개념 이해와 활용 모든 면에서 좋았습니다."

{pagebreak}

어린이를 위한 교육

모두에게 리액트를 배울 수 있는 기회를 주고자 이 책을 오픈 소스로 출판했습니다. 이 책의 정가는 없으며, 각자 원하는 가격으로 구매할 수 있습니다. 판매 수익금은 개발도상국 어린이를 위한 영어 교육 프로젝트 후원에 사용됩니다.

• [저자 블로그] 리액트를 공부하며 기부하세요!

{pagebreak}

자주 찾는 질문

업데이트 소식은 어떻게 받나요? 이 곳에서 뉴스 레터 구독 신청을 하거나 트위터로 최근 소식을 받을 수 있습니다. 책을 최초 다운로드한 이후에도 새 개정판을 다운로드할 수 있습니다.

최신 리액트 버전을 사용하고 있나요? 리액트 최신 버전이 공표되면 책 내용도 업데이트됩니다. 현재 리액트 업데이트 주기가 매우 빠르기 때문에 대부분의 책들은 최신 내용을 담지 못하고 있습니다. 반면 이 책은 자가출판이기 때문에 언제든지 수정하여 출판이 가능합니다.

리덕스(Redux)를 배우나요? 이 책에서는 리덕스를 다루지 않습니다. 두 번째 저서에서 다룰 예정입니다. "리액트 도움닫기"는 심화 주제로 넘어가기 전 튼튼한 기초 지식을 쌓는 것이 주 목적입니다. 실습 프로젝트를 통해 리덕스가 없어도 충분히 리액트만으로 훌륭한 애플리케이션을 만들 수 있다는 것을 보여주고자 했습니다. 이 책을 마쳤다면 리덕스를 사용하지 않고도, 순수한 리액트 만으로 견고한 응용 프로그램을 구현할 수 있어야 합니다. 저자의 리액트 두 번째 책인 "리액트 상태 다루기(Taming the State in React)"에서 리덕스 관련 내용을 담고 있습니다.

자바스크립트 ES6를 사용하나요? 네, 사용합니다. 하지만 걱정하지 않아도 됩니다. 자바스크립트 ES5에 익숙하다면 잘할 수 있습니다. ES5에서 ES6로 변환 과정을 기술했습니다. 리액트는 물론 유용한 자바스크립트 ES6 메서드를 다루고 있습니다.

앞으로 내용이 추가되나요? 주요 업데이트 기록을 확인할 수 있습니다. 업데이트 반영 전 개선 내용을 미리 공지하지는 않습니다. 커뮤니티와 의논한 후, 오래된 내용을 수정하고 추가 내용을 집필하겠습니다. 가장 최신의 예제와 개념, 패턴을 담을 수 있도록 노력하겠습니다.

문서 확장자는 무엇인가요? .pdf, .epub, .mobi 확장자를 제공하며, 깃허브 리퍼지토리에서에서 마크다운(.md) 문서로도 읽을 수 있습니다. 되도록 코드 가독성이 높은 문서를 선택해 읽는 것이 좋습니다.

도움을 줄 수 있는 방법이 있나요? "The Road to learn React" 슬랙을 개설했습니다. 커뮤니티를 통해 도움을 받거나 도움이 필요한 이들에게 도움을 줄 수 있습니다. 한국어 사용자를 위한 채널이 열려있습니다. #road-to-react-korean 채널에서 함께 공부할 수 있습니다. 개발 실력을 높이고 싶다면 최대한 많은 사람들을 도와주세요.

문제를 알려드릴 방법이 있나요? 문제가 생기면 슬랙 그룹에 물어보길 바랍니다. 깃허브 이슈에서 비슷한 문제와 해결 방법이 있는지 찾아보세요. 만약 원하는 해결 방법을 찾지 못했다면, 새 이슈를 등록하면 됩니다. 작성 시, 문제점과 함께 스크린 샷, 책 페이지 번호, node 버전 등을 알려주길 바랍니다. 등록된 모든 이슈가 해결된 후에 다음 개정판을 출간하겠습니다.

이 책에 기여할 수 있나요? 독자의 의견과 깃허브 기여는 매우 중요합니다. 유창한 영어로 작성하지 않아도 됩니다. 여러분의 애정과 도움에 깊이 감사하고 있습니다.

왜 가격을 책정하지 않았나요? 이 책을 읽는 모든 사람들이 자신이 원하는 가격으로 책을 구입할 수 있게 하기 위하여 '자율 정가제'를 도입했습니다. 앞으로도 자율 정가제를 유지할 것입니다. 제일의 목적은 최대한 많은 사람들이 이 책을 읽을 수 있게 하는 것입니다. 저는 모든 사람들이 리액트를 배울 수 있는 기회를 가져야 한다고 생각합니다. 물론 재정적 여유가 있다면 도서를 직접 구매할 수도 있습니다. 이 책의 수익금은 개발 도상국 어린이들을 위한 영어 교육 후원에 사용됩니다. 책을 구입하는 것은 이 프로젝트에 동참하는 것을 의미합니다.

프로젝트 후원을 할 수 있나요? 누구나 이 프로젝트에 후원할 수 있습니다. 이 오픈소스 튜토리얼 제작을 위해 상당한 많은 시간동안 투자하고 있습니다. 개인 홈페이지에서 저자 프로필을 확인할 수 있습니다. 패트레온(Patreon)에서 저의 개인 후원자가 되실 수 있습니다. 독자 여러분들이 이 책을 널리 알려주시는 것만으로도 저는 정말 기쁘고 감사합니다.

끝으로 바라는 점은 무엇인가요? 이 책을 읽기 전, 나와 리액트가 잘 맞는지 먼저 생각하는 시간을 가졌으면 합니다. 리액트에 관심이 있거나, 배우는 중이거나, 혹은 리액트를 배우고 싶지 않을 수도 있습니다. 주변에 있는 친구, 지인들과 함께 이 책을 읽고 서로 도와주며 지식을 나누길 바랍니다.

{pagebreak}

이 책을 읽는 방법

이 책의 철학은 '만들면서 배우자'입니다. 여러분은 실제 리액트 애플리케이션을 만들면서 리액트를 배울 수 있습니다. 이 책은 리액트를 설명한 참고 자료가 아니라 리액트를 배우는 실질적인 안내서입니다. 여러분은 외부 API와 상호 작용하는 해커 뉴스 애플리케이션을 제작해 볼 것입니다. 리액트에서 가장 흥미로운 부분은 캐싱 및 상호 작용(정렬 및 검색)의 상태 관리 부분입니다. 이외에 리액트 모범 예제와 디자인 패턴을 배울 수 있습니다.

또한 이 책은 자바스크립트 ES5에서 ES6으로 전환하는 방법을 다뤘습니다. 리액트는 자바스크립트 ES6 기능을 포함하고 있어 ES6를 사용하는 방법을 보여주고자 했습니다.

각 장마다 새로운 내용을 다루기 때문에 서두르지 말고 학습 내용을 충분히 이해하여 자신의 것으로 만드는 것이 중요합니다. 학습 내용을 실제로 적용해 보는 과정을 통해 더 많이 배울 수 있습니다. 각 장마다 참고자료와 예제를 수록했습니다. 리액트를 깊이 배우고 싶다면 참고자료를 읽고 간단한 예제를 만들어 보는 것이 좋습니다. 다른 장을 읽기 전에 충분히 학습해 내 것으로 만들어야 합니다.

이 책을 마치면 완성된 리액트 애플리케이션을 배포할 수 있습니다. 여러분들이 만든 결과물을 꼭 보고 싶습니다. 이 책을 다 읽고 난 후 만든 결과물을 꼭 저에게 알려주길 바랍니다. 마지막 장에서 여러분의 리액트 학습을 계속할 수 있는 몇 가지 방법을 기술했습니다. 저자 웹사이트에서도 리액트 관련 정보를 찾을 수 있습니다.

독자 대부분이 리액트를 처음 접하는 입문자라고 생각합니다. 리액트를 배우기로 결정한 여러분을 진심으로 응원합니다. 앞으로도 여러분들의 피드백을 반영해 모든 사람들이 리액트를 배울 수 있는 최고의 교육 자료를 만들고자 합니다. 깃허브 또는 트위터로 여러분의 이야기를 항상 경청하고 있습니다.

학습 내용

• 리액트 앱 개발하기 - 해커 뉴스 애플리케이션
• 환경 설정
• create-react-app 으로 리액트 애플리케이션 시작
• 효율적인 코드 작성
• setState()로 내부 상태 관리
• 자바스크립트 ES5에서 ES6으로 문법 전환
• setState 및 생명주기 메소드 API 사용
• 해커 뉴스 API와 인터렉션
• 사용자 인터렉션
  • 클라이언트 사이드 정렬
  • 클라이언트 사이드 필터링
  • 서버 사이드 검색
• 클라이언트 사이드 캐싱 구현
• 고차 함수와 고차 컴포넌트
• Jest 컴포넌트 테스트
• Enzyme 단위 컴포넌트 테스트
• 라이브러리 사용
• 실습과 참고자료 읽기
• 학습 내용 되새기기 및 강화하기
• 애플리케이션 배포

{pagebreak}

수정 내역

2017년 1월 10일

• v2 풀 리퀘스트
• 입문자를 위한 친근한 어조로 변경
• 본문 37% 내용 추가
• 본문 30% 내용 개선
• 13 내용 개선 및 신규 챕터 추가
• 총 140 페이지 내 학습 자료 추가
• + educative.io 온라인 강좌 개설

2017년 3월 8일

• v3 풀 리퀘스트
• 본문 20% 내용 추가
• 본문 25% 내용 개선
• 신규 9장 추가
• 총 170 페이지

2017년 4월 15일

• React 15.5 업그레이드

2017년 7월

• node 8.1.3 업그레이드
• npm 5.0.4 업그레이드
• create-react-app 1.3.3 업그레이드

2017년 10월 17일

• node 8.3.0 업그레이드
• npm 5.5.1 업그레이드
• create-react-app 1.4.1 업그레이드
• React 16 업그레이드
• v4 풀 리퀘스트
• 본문 15% 내용 추가
• 본문 15% 내용 개선
• 신규 3장 추가 (바인딩, 이벤트 핸들러, 에러 처리)
• 총 190+ 이상
• +9 프로젝트 예제 소스 코드

2018년 2월 17일

• node 8.9.4 업그레이드
• npm 5.6.0 업그레이드
• create-react-app 1.5.1 업그레이드
• v5 풀 리퀘스트
• 학습 공부 방법 추가
• 읽기 자료 추가
• 신규 1장 추가 (Fetch 대신 Axios 사용)

{pagebreak}