'리액트 도움닫기(원제 The Road to learn React)'는 리액트 입문자를 위한 책입니다. 리액트 설치부터 기초, 서버 배포까지, 리액트 개발 전 과정을 설명합니다. 나아가 유지 관리하기 쉬운 애플리케이션 개발을 위해 리액트 디자인 패턴과 모범 사례를 소개합니다. 각 절마다 추가로 실습과 추천 읽기 자료를 제시했습니다. 이 책의 목적은 순수한 리액트 만으로도 훌륭한 애플리케이션을 만드는 것입니다. 따라서 외부 상태 관리 라이브러리와 도구를 다루지 않습니다. 무엇보다 기초가 튼튼해야 더 넓은 리액트 세계로 뛰어들 수 있기 때문입니다.
앞으로 여러분들은 이 책을 읽으며 해커 뉴스 애플리케이션을 직접 만들어 볼 것입니다. 검색과 정렬, 페이지네이션, 클라이언트 캐시 기능을 구현해보며 리액트 기초 지식을 튼튼히 쌓을 수 있을 것입니다. 이전에 자바스크립트 ES5를 사용했다면 자바스크립트 ES6로 전환할 수 있는 계기가 될 것입니다.
저는 독자 여러분들이 리액트와 자바스크립트에 재미와 흥미를 가졌으면 합니다. 그리고 이 책을 도움닫기 삼아 다음 단계로 껑충 뛰어가길 바랍니다.
{pagebreak}
로빈 위어크(Robin Wieruch)는 독일 출신 소프트웨어 엔지니어이자 자바스크립트 선생님 그리고 프리랜서로 활동하고 있습니다. 전 세계 학생들을 가르치며 그들이 성장하는 모습에 보람을 느끼고 있습니다.
독일에서 컴퓨터 공학 석사 졸업을 마친 그는 스타트업 'Small Improvements'에서 소프트웨어 엔지니어로 근무하며 SaaS 제품을 개발한 경험이 있습니다. 당시 제품은 초창기에는 위켓(Wicket), 제이쿼리(jQuery), 자바(Java)로 만들어졌으나, 1세대 SPA가 출현하면서 앵귤러(Angular) 버전 1로 마이그레이션 했습니다. 이후 2년 간 앵귤러로 개발해왔으나 상태 애플리케이션에서는 최상의 솔루션이 아니다는 결론에 이르러, 최종적으로 리액트와 리덕스를 도입해 대규모 애플케이션을 성공적으로 운영할 수 있었습니다.
회사를 다니는 동안 로빈은 개인 사이트에 웹 기술 관련 글을 정기적으로 집필하면서, 가르치는 일에 재능이 있다는 것을 깨닫게 되었습니다. 또한 독자들의 피드백을 통해 글쓰기 능력을 크게 향상시킬 수 있었고 효과적인 프로그래밍 교수법을 개발할 수 있었습니다.
그외 여가 시간은 모두 프로그래밍 학습에 투자하고 있습니다. 선생님이 배움을 게을리하면 더 이상 학생들에게 가르칠 것이 없다는 그의 생각 때문입니다.
로빈을 후원하고 함께 일하길 원한다면 그의 웹사이트를 방문하길 바랍니다.
{pagebreak}
이 책을 한국어로 옮긴 이수진은 소리와 색으로 빚는 인터렉티브 웹 애플리케이션 개발에 관심이 많은 프론트엔드 개발자입니다. 그녀의 꿈은 모든 사람들이 음악 원리를 탐색하고 창의적인 음악적 경험을 줄 수 있는 웹 애플리케이션을 만드는 것입니다. 그 꿈을 이루고자 현재 서울대학교 융합과학기술대학원 디지털 정보융합과정 석사 과정에 재학 중입니다. 서울대학교 융합과학기술대학원 음악 오디오 연구실 소속으로 웹 오디오 기술 연구과 음악 정보 추출 연구를 하고 있습니다.
수진은 모두가 평등하게 교육을 받을 수 있는 사회를 지지하며 후원하고 있습니다. 학부에서 작곡과 음악교육을 전공한 후, IT 비영리 교육 재단에서 다년간 온라인 교육 플랫폼을 기획하고 운영했습니다. 다수의 프로그래밍 튜토리얼과 기술 문서를 번역하며 영어의 장벽 없이 누구나 최신 교육 콘텐츠를 접할 수 있게 노력하고 있습니다. 또한 여성 개발자로서 IT분야 내 성 격차(Gender Gap) 문제에 많은 관심을 기울이고 있습니다. 국내 개발자 커뮤니티 내 다양성을 높이고자 여성 개발자 커뮤니티를 조직하였고 여성들에게 프로그래밍 학습 기회를 제공하고자 무료 워크숍과 세미나를 운영해오고 있습니다.
수진은 개인 웹 사이트에서 자신의 개발 경험, 번역, 그리고 소소한 이야기를 나누고 있습니다. 페이스북, 트위터를 통해 음악, 기술, 여성, 달리기에 관해 많은 이야기를 나누길 바랍니다. 인스타그램에서 전국 방방곳곳을 달리는 그녀의 모습을 볼 수 있습니다.
{pagebreak}
로드 투 리액트(Road to React), 굿리드, 아마존에서 많은 독자들이 추천사를 작성해주셨습니다.
무하마드 카쉬프(Muhammad Kashif) "이 책은 리액트 입문자부터 전문가까지 모두가 읽을 수 있는 책입니다. 다른 곳에서 얻을 수 없는 통찰과 기술을 이 책에서 만날 수 있습니다. 참고자료와 예제 또한 완벽합니다. 17년차 개발자인 나조차 리액트를 처음 시작할 때 어려움을 겪었습니다. 이 책은 마법입니다."
안드레아 배가스(Andre Vargas) "놀라움 그 자체입니다! 이 책에서 리액트와 ES6 대부분을 배웠습니다!"
니콜라스 헌터-워커(Nicholas Hunt-Walker), 시애틀 코딩 스쿨 강사 "지금까지 읽었던 코딩 책 중 가장 훌륭한 책"
어스틴 그린(Austin Green) "다 좋았습니다. 리액트, ES6, 고급 프로그래밍 개념까지 모든 것을 갖춘 책입니다."
니콜라스 퍼그순(Nicole Ferguson) "주말 내내 이 책을 봤습니다. 너무 재밌어서 양심의 가책을 느낄 정도입니다."
카란(Karan) "방금 이 책을 마쳤습니다. 리액트와 자바스크립트 입문자들을 위한 최고의 책입니다. 멋집니다! )"
Eric Priou "로빈 위어크 책은 필독서입니다. 리액트와 자바스크립트의 정수를 맛 볼 수 있습니다."
토마스 라크니(Thomas Lockney) "방대한 내용을 한꺼번에 다루지 않아 좋았습니다. 나는 리액트가 어떤 것인지 맛보고 싶었습니다. 현재 사용해보지 않은 ES6 기능을 배우기 위해 이것 저것 찾아볼 필요가 없습니다. 부지런한 독자라면, 이 책의 내용 그 이상의 것을 얻을 수 있을 것입니다."
신입 개발자 "신입 개발자도 쉽게 읽을 수 있었습니다. 따라하기 쉬웠고 리액트 개발에 자신감을 갖게 되었습니다. 리액트 공식 튜토리얼보다 훨씬 좋았습니다."
익명의 학생 "리액트 입문서 책 중 최고입니다. '코드와 배움' 이 두 가지를 정확히 마스터할 수 있습니다."
{pagebreak}
모두에게 리액트를 배울 수 있는 기회를 주고자 이 책을 오픈 소스로 출판했습니다. 이 책의 정가는 없습니다. 독자들은 각자 원하는 가격으로 구매할 수 있습니다. 판매 수익금은 개발도상국 어린이를 위한 영어 교육 프로젝트 후원을 위해 사용됩니다.
{pagebreak}
업데이트 소식은 어떻게 받나요? 이 곳에서 구독 신청을 하거나 트위터로 최근 소식을 받을 수 있습니다. 다운로드한 이후에도, 새 개정판을 다운로드할 수 있습니다.
최신 리액트 버전을 사용하고 있나요? 리액트 최신 버전이 공표되면 책 내용도 업데이트됩니다. 현재 리액트 업데이트 주기가 매우 빠르기 때문에 대부분의 책들은 최신 내용을 담지 못하고 있습니다. 반면 이 책은 자가출판이기 때문에 언제든지 수정하여 출판이 가능합니다.
리덕스(Redux)를 배우나요? 이 책에서는 리덕스를 다루지 않습니다. 두 번째 저서에서 다룰 예정입니다. "리액트 도움닫기"는 심화 주제로 넘어가기 전 튼튼한 기초 지식을 쌓는 것이 주 목적입니다. 실습 프로젝트를 통해 리덕스가 없어도 충분히 리액트만으로 훌륭한 애플리케이션을 만들 수 있다는 것을 보여주고자 했습니다. 이 책을 마쳤다면 리덕스를 사용하지 않고도, 순수한 리액트 만으로 견고한 응용 프로그램을 구현할 수 있어야 합니다. 저자의 리액트 두 번째 책인 "리액트 상태 다루기(Taming the State in React)"에서 리덕스 관련 내용을 담고 있습니다.
자바스크립트 ES6를 사용하나요? 네, 사용합니다. 하지만 걱정하지 않아도 됩니다. 자바스크립트 ES5에 익숙하다면 잘할 수 있습니다. ES5에서 ES6로 변환 과정을 기술했습니다. 리액트는 물론 유용한 자바스크립트 ES6 메서드를 다루고 있습니다.
앞으로 내용이 추가되나요? 주요 업데이트 기록을 확인할 수 있습니다. 업데이트 반영 전 개선 내용을 미리 공지하지는 않습니다. 커뮤니티와 의논한 후, 오래된 내용을 수정하고 추가 내용을 집필하겠습니다. 가장 최신의 예제와 개념, 패턴을 담을 수 있도록 노력하겠습니다.
문서 확장자는 무엇인가요? .pdf, .epub, .mobi 확장자를 제공하며, 깃허브(Github) 리퍼지토리에서에서 markdown(.md)확장자 문서로도 읽을 수 있습니다. 코드 가독성이 높은 문서로 읽는 것이 좋습니다.
도움을 줄 수 있는 방법이 있나요? 슬랙(Slack) 그룹에서 같은 독자들을 만날 수 있습니다. 채널에 들어와 도움을 받거나 다른 사람에게 도움을 줄 수 있습니다. 다른 사람을 도와준 만큼 여러분들은 더 깊게 리액트를 배울 수 있을 겁니다.
문제를 알려드릴 방법이 있나요? 문제가 생기면 슬랙 그룹에 물어보길 바랍니다. 깃허브(GitHub) 이슈에서 이미 동일한 문제와 해결 방법을 찾을 수 있습니다. 동일한 문제를 찾을 수 없다면, 깃허브 이슈에 올리면 됩니다. 이슈를 작성할 때 문제점과 함께 스크린 샷, 책 페이지 번호, 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}