New

리액트 네이티브 앱 제작 원론 [크로스 플랫폼 리액트 네이티브 앱 제작의 종합 과정]

  • 원서명Mastering React Native: Leverage frontend development skills to build impressive iOS and Android applications with React Native (ISBN 9781785885785)
  • 지은이에릭 마시엘로(Eric Masiello), 제이콥 프리드만(Jacob Friedmann)
  • 옮긴이이태상
  • ISBN : 9791161751153
  • 35,000원
  • 2018년 02월 13일 펴냄
  • 페이퍼백 | 600쪽 | 188*235mm
  • 시리즈 : acorn+PACKT

책 소개

요약

리액트 네이티브는 페이스북의 오픈 소스 자바스크립트 라이브러리인 리액트를 기반으로 이미 친숙한 웹 기술을 사용하면서도 순수 네이티브 앱과 동일한 성능과 UI를 갖는 모바일 앱을 개발할 수 있도록 하는 라이브러리다. 이 책은 리액트와 리액트 네이티브의 핵심 개념으로 시작해, 크로스 플랫폼 모바일 앱 제작에 필요한 다양한 기능뿐만 아니라 네이티브 모듈 제작, 디버깅, 성능 튜닝까지 고급 기법들을 다룬다. 이 책 한 권으로 실전에 필요한 리액트 네이티브 기술을 모두 통달할 수 있을 것이다.

이 책에서 다루는 내용

■ 리액트 네이티브 컴포넌트와 API 활용
■ 리액트의 JSX 문법 학습
■ 리덕스와 리덕스 미들웨어를 사용한 데이터 관리
■ iOS와 안드로이드 모두를 위한 리액트 네이티브 앱 제작
■ 애니메이션 API를 사용한 애니메이션 효과 적용
■ 라우팅과 내비게이션의 비교
■ 자신만의 네이티브 모듈 제작
■ 플렉스박스를 사용한 레이아웃과 고급 애니메이션의 적용
■ 써드파티 라이브러리 통합과 커스텀 네이티브 컴포넌트 개발
■ 리덕스, 리덕스 미들웨어, 원격 API와의 조합을 통한 확장성 높은 데이터 중심의 앱 제작

이 책의 대상 독자

이 책은 독자가 자바스크립트를 충분히 이해하며 에크마스크립트(ECMAScript)2015(ES2015 또는 ES6)에 친숙하다고 가정한다. 이 책의 예제 코드는 클래스, 화살표 함수, 비구조화, 스프레드 연산 등 ES2015의 특징을 십분 활용하기 때문이다. 리액트, 모바일 개발, HTML, CSS에 능숙하면 도움이 되겠지만 필수 사항은 아니다.

이 책의 구성

1장, ‘리액트 기초 다지기’에서는 리액트의 전반을 설명하고 리액트 방식으로 사고하는 법을 알려준다. 효과적인 리액트 네이티브 작업을 위해서는 먼저 리액트의 이해가 필수다.
2장, ‘리액트 네이티브식 ‘헬로 월드!’’에서는 리액트 네이티브의 작동 원리를 알아보고 다른 유명한 모바일 개발 플랫폼들과 비교해본다. 그 다음 컴퓨터에 iOS를 위한 리액트 네이티브 개발 환경을 구축하는 방법을 알려준다.
3장, ‘스타일과 레이아웃’에서는 리액트 네이티브에서는 캐스케이딩 스타일 시트(Cascading Style Sheets(CSS))의 장점 등을 포함해 웹 개발 세계로부터 많은 개념을 차용한다. 이와 동시에 CSS의 덜 바람직한 부분들은 철저히 배제한다. 또한 리액트 네이티브 앱에 스타일을 적용하는 방법과 컴포넌트 레이아웃을 위한 플렉스박스(Flexbox)의 사용법을 공부한다.
4장, ‘리액트 네이티브 컴포넌트’에서는 다수의 강력한 컴포넌트와 API를 제공한다. 또한 그런 컴포넌트와 API를 사용해 RNNYT라는 뉴스 리더 앱 제작을 시작한다.
5장, ‘플럭스와 리덕스’에서는 일반적인 모델-뷰-컨트롤러 패턴을 꺼려하며, 플럭스(Flux)라는 일방향 데이터 흐름 패턴을 선호한다. 5장에서는 플럭스의 사상을 이해하고, 유명한 플럭스 구현체인 리덕스(Redux)의 사용법을 배운다.
6장, ‘NYT API와 리덕스의 통합’에서는 뉴스 리더 앱인 RNNYT에 생명을 불어넣기 위해 데이터 관리와 뉴욕 타임스 API 통신을 위한 리덕스와 리덕스 미들웨어를 구현해본다.
7장, ‘내비게이션과 고급 API’에서는 내비게이션의 여러 선택 사항 중 어느 방식을 선택해야 할지를 논의한다. 그 다음엔 NaviagtionExperimental이라는 컴포넌트와 그 밖의 다른 리액트 네이티브 API를 앱에 적용한다.
8장, ‘애니메이션과 제스처 리액트 네이티브’에서는 자연스러운 애니메이션을 만드는 두 가지 방법을 제공한다. 또한 RNNYT에 터치 제스처가 지원되는 온보딩 경험 구축을 통해 각 방법을 적용하는 방법을 설명한다.
9장, ‘안드로이드를 위한 리팩토링’에서는 크로스 플랫폼 개발을 쉽게 해준다. 그러나 안드로이드를 위한 개발 환경을 구성하는 일이 아주 쉽지만은 않다. 안드로이드 개발을 위해 필요한 모든 툴의 설치와 설정을 단계적으로 진행한다. 그 다음엔 앱을 크로스 플랫폼용으로 리팩토링해 일급 안드로이드 앱으로서의 면모를 갖추게 한다.
10장, ‘네이티브 모듈의 작성과 사용’에서는 iOS와 안드로이드를 위해 각각 오브젝티브-C와 자바로 커스텀 네이티브 코드를 작성하고 사용하는 방법을 설명한다. 놀라운 부분 중 하나는 이 프레임워크에 포함된 컴포넌트와 API만 사용하도록 제한을 두지 않는다는 점에 있다. 앱에 뭔가 평범하지 않은 기능을 넣고 싶다면, 커스텀 네이티브 코드를 만들어 연계하거나 써드파티 라이브러리를 포함시키면 된다.
11장, ‘앱 출시 준비’에서는 제스트(Jest)라는 테스트 프레임워크와 성가신 성능 문제를 적발할 수 있는 여러 툴을 소개한다. 마지막으로, iOS와 안드로이드의 스토어에 앱을 배포하는 방법을 설명한다.
12장, ‘리액트 네이티브 툴과 참고자료’에서는 리액트 네이티브 앱의 제작 경험을 증진시켜줄 여러 툴을 소개한다. 그 다음 웹, 맥 OS, 심지어 윈도우까지 지원하는 몇 가지 리액트 네이티브 프로젝트들을 알아본다.

저자/역자 소개

지은이의 말

리액트 네이티브(React Native)는 순수 네이티브 앱이 갖는 성능이나 룩앤필(look and feel)을 포기하지 않으면서도 친숙한 웹 기술을 사용해 모바일 앱을 제작할 수 있는 라이브러리다. 리액트 네이티브는 페이스북(Facebook)의 오픈 소스 자바스크립트 라이브러리인 리액트(React)를 기반으로 하며, 리액트 네이티브를 사용해 만드는 iOS나 안드로이드(Android) 앱은 사실상 자바스크립트로 작성된다. 리액트 개발자는 각 플랫폼별로 새로운 언어나 환경, 모범 사례를 따로 배울 필요가 없기 때문에 리액트 네이티브를 통해 자신의 개발 영역을 더욱 확장할 수 있다.
이 책에서 우리는 리액트, 리액트 네이티브의 핵심 개념, 리액트 네이티브 생태계의 라이브러리와 툴에 관해 살펴볼 것이다. 또한 완전한 리액트 네이티브 애플리케이션을 만드는 실전 목표를 향해 나아갈 것이다. 마지막으로 애니메이션, 내비게이션, 네이티브 모듈, 테스트, 성능 분석 등 유용하면서도 복합적인 리액트 네이티브 개념을 파헤쳐볼 것이다. 이 책의 마지막 페이지를 덮을 때쯤이면 리액트 네이티브를 사용하는 잘 다듬어진 세련된 모바일 앱 제작에 대한 지식으로 무장돼 있을 것이다.

지은이 소개

에릭 마시엘로(Eric Masiello)

현재 비스타프린트 디지털(Vistaprint Digital)의 선임 엔지니어다. 이전에는 어드바이저리 보드컴퍼니(Advisory Board Company)의 수석 프론트엔드 엔지니어로 일했으며, 에듀케이션 어드바이저리 보드(Education Advisory Board)의 모바일 앱을 제작했다. 10년 이상 프론트엔드와 UI 개발자로 일했으며, 프리랜서로서 http://synbydesign.com의 웹사이트 디자인과 개발을 담당하고 있기도 하다. 워싱턴 D.C.의 제너럴 어셈블리(General Assembly) 학교에서 프론트엔드를 주제로 강의한 경력이 있으며, 팩트출판사의 비디오 교재인 의 기술 감수도 수행했다.

제이콥 프리드만(Jacob Friedmann)

시애틀에 거주하는 개발자다. 5년 이상 전문 개발자로 일했다. 현재는 오라클(Oracle) 산하의 애드디스(AddThis)에서 수석 소프트웨어 엔지니어로 있으면서 대형 프론트엔드와 백엔드 애플리케이션들을 담당하고 있다. 리액트 네이티브를 사용해 모바일 앱도 개발하는데, 최근에는 앱스토어에 어디시(Audicy(http://audicy.io))를 출시하기도 했다. 또한 제너럴 어셈블리에서 프론트엔드 웹 개발이나 자바스크립트 개발에 관한 여러 강의를 해왔다.

옮긴이의 말

2007년 첫 아이폰이 세상에 나온 이후 10년이 넘은 지금, 모바일 앱은 기상부터 취침까지(심지어는 취침 중에도) 일상 내내 이용하는 필수품이다. 한동안 웹사이트를 주요 서비스로 구축하고 부가적으로 일부 서비스를 모바일 앱으로도 제공하는 게 당연하던 때가 있었다. 시간이 흘러 이제는 모바일 앱을 통한 완전한 서비스 구축을 최우선으로 하고 그 다음 순위로 웹사이트를 구축하거나, 아니면 아예 웹사이트 자체를 배제하기까지 하는 시대가 됐다. 동시에 생산자 역할인 소프트웨어 개발 영역에서는 좀 더 친숙한 여러 기술로 앱을 개발하기 위한 다양한 방법들이 고안됐다.
프로그레시브 웹 앱스(PWA) 때문에 조금 무리일 수 있겠지만 모바일 웹과 웹앱을 편의상 '웹' 분야로 밀어놓고 보자면, 일반적으로 모바일 앱이라 하면 '네이티브 앱'과 '하이브리드 앱', 두 가지로 나눌 수 있다. 그리고 그 두 종류의 앱 개발을 지원하는 서로 다른 다양한 개발 플랫폼이 존재한다. 각자 나름대로의 장단점이 있지만, 앱 개발만을 전문으로 하지 않는 대부분의 사람들이 크게 중점을 두는 사항은 몇 가지 안되며 또한 대개 비슷하다.

  1. 오브젝티브-C, 스위프트, 자바(안드로이드SDK)와 같은 네이티브 앱 전용 언어를 새로 배우지 않고도, 이미 알고 있는 웹 기술(HTML, CSS, 자바스크립트)을 사용해 쉽게 개발할 수 있으면 좋겠다.
  2. 그렇지만 최종 결과물은 성능과 기능, 사용자 경험 등에 있어서 네이티브 앱 언어로 만든 앱에 뒤떨어지지 않았으면 좋겠다.

현재 각자의 지향점을 가진 특징적인 모바일 앱 개발 기술들이 다수 존재하지만, 위 두 사항을 기준으로 삼고 보면 의외로 선택이 어렵지 않다. 객관적인 통계를 찾지는 못했으나 내가 보고 느낀 현재 이 분야의 양대 강자는 리액트 네이티브와 아이오닉이다. 이 대결 구도가 자바스크립트 영역에서 기인한다는 점은 쉽게 눈치 챌 수 있다. 수년 간 라이벌을 유지해 온 페이스북의 리액트와 구글의 앵귤러가 있기 때문이다. 따라서 많은 사람들이 위의 1번 요건에 따라 모바일 앱 개발 플랫폼을 선택함을 알 수 있다. 그리고 2번 요건이 남아있다. 아하! 이 책을 읽고 있는 여러분은 리액트 네이티브를 선택했다!
감히 특정 기술들을 단순한 잣대로써 우위를 가르고자 함이 아니다. 리액트 네이티브를 선택한 기준이 곧 리액트 네이티브의 특장점이었다는 사실을 확인시켜 주고 싶었다. 그 자세한 내용들은 이 책에서 설명될 것이며, 여러분의 선택이 틀리지 않았음을 알게 될 것이다.
이 책은 수박 겉핥기 식의 개론서도 아니며, 모든 내용을 몽땅 쑤셔 넣은 바이블같은 책도 아니다. 리액트 네이티브를 기초부터 설명하지만 동시에 꼭 필요한 각론들을 망라한, 소위 '한 권으로 끝내는' 교재다(그러나 이 책의 제목으로 쓰기엔 너무 식상했다).
그리고 이 책은 리액트 네이티브를 선택한 현명한 여러분을 배신하지 않을 것이라 믿는다. 날로 복잡해지고 발전하는 모바일 개발 분야에서도 여전히 주체적인 시민이 되기를 기원한다.

옮긴이 소개

이태상

자바와 웹 전문가로서 교육과 컨설팅을 주로 했었으며, 오랜 기간 전자금융 업무를 담당했다. 현재 한 금융기관의 재무회계시스템 구축 프로젝트에 참여하고 있다. 에이콘출판사에서 출간한 『톰캣 최종분석』(2005)부터 『리액트 웹앱 제작 총론』(2017)까지 다수의 IT 서적을 번역했다.

목차

목차
  • 1장. 리액트 기초 다지기
    • 프레임워크 또는 라이브러리
    • 리액트 탄생의 배경
    • 리액트 시작하기
    • JSX로 컴포넌트 작성
    • 컴포넌트
    • 컴포넌트 조합
    • 속성과 속성 타입
      • 속성받기
      • 속성 타입
      • 속성 전달
      • 기본 속성값
      • Props.children
    • 이벤트 핸들러
    • 상태
    • 컴포넌트 생명주기
      • 컴포넌트 업데이트
      • 컴포넌트 언마운트
    • 컴포넌트 유형
      • React.createClass
      • 함수형 컴포넌트
    • 정리

  • 2장. 리액트 네이티브식 '헬로 월드!'
    • 모바일 앱 개발 환경의 이해
      • 어도비 폰갭
      • Ionic
      • NativeScript
      • 리액트 네이티브
    • 리액트 네이티브 툴의 이해
      • 엑스코드구글 크롬
      • 홈브류
      • 노드JS와 npm
      • 왓치맨
      • 플로
      • 리액트 네이티브 CLI
    • 툴 설치
      • 엑스코드 설치
      • 홈브류 설치
      • 노드와 npm 설치
      • 왓치맨과 플로 설치
      • 리액트 네이티브 CLI 설치
    • 첫 번째 리액트 네이티브 앱
      • 리액트 네이티브 패키저
    • HelloWorld 앱의 이해
      • ES2015 임포트문
      • HelloWorld 컴포넌트
      • 스타일 부분
      • 루트 컴포넌트 등록
      • React를 임포트하는 이유
    • 리액트 네이티브 앱 디버깅
      • 크롬 디버거
      • 중단점
    • 정리

  • 3장. 스타일과 레이아웃 리액트 네이티브
    • 스타일 구성과 적용
      • 인라인 스타일
      • 스타일 객체
    • 스타일시트
      • 컴포넌트에 특정적인 스타일 속성
    • 상속 없는 스타일링
    • 박스 모델과 플렉스박스
      • 박스 모델
      • 플렉스박스
      • 또 다른 축 다루기
      • 크기 조절
    • 텍스트 스타일링
      • 텍스트 스타일 속성
      • 텍스트 스타일 캡슐화
    • 이미지 스타일링
      • 배경 이미지
    • 스타일 조사와 디버깅
      • 리액트 네이티브 인스펙터
    • 유사 미디어 쿼리 기능 추가
      • Dimensions 객체
      • onLayout 핸들러
    • 정리

  • 4장. 리액트 네이티브 컴포넌트 리액트 네이티브
    • 네이티브 컴포넌트
      • Text
      • View
      • Image
      • Touchable
      • ListView
      • Modal
      • WebView
      • TabBarIOS
      • TextInput
      • 그 외의 입력 컴포넌트
    • 네이티브 API
      • ActionSheetIOS
      • AlertVibration
      • StatusBar
    • 정리

  • 5장. 플럭스와 리덕스
    • 플럭스 아키텍처
      • Motivation
      • 플럭스 구현하기
    • 리덕스 시작하기
      • 리덕스의 기본 원칙
      • 리덕스 설치
      • 리덕스 구현하기
      • 리액트-리덕스
      • 미들웨어
    • 정리

  • 6장. NYT API와 리덕스의 통합
    • NYT API 데이터의 이해
    • 리덕스 데이터의 흐름
      • 리덕스 상태 트리 만들기
      • 앱에 리덕스 데이터 연결하기
      • 리팩토링과 리셰이핑
      • 리셀렉트 도입
      • 검색 기능 추가
    • 비동기식 요청으로 NYT API 연결하기
      • iOS ATS에 대한 조치
        • ‘당겨서 새로고침'과 ‘로딩 스피너'
    • 정리

  • 7장. 내비게이션과 고급 API
    • 내비게이션
      • NavigatorIOS
      • Navigator
      • NavigationExperimental
      • 내비게이션 API의 선택
    • Navigator의 사용
      • Navigator 컴포넌트
      • 내비게이션바
    • NavigationExperimental의 사용
      • 내비게이션 상태 표현하기
      • 내비게이션 상태 관리
      • CardStack 컴포넌트
      • 내비게이션 헤더
      • 탭내비게이션
      • 모달 추가
    • 그 밖의 고급 API
      • NetInfo를 이용한 오프라인 메시지
      • Linking을 이용한 브라우저 열기
      • AsyncStorage를 이용한 북마크 저장
    • 정리

  • 8장. 애니메이션과 제스처
    • LayoutAnimation과 Animated 소개
    • 기본형 온보딩 구축
      • 시작하기
    • LayoutAnimation
      • 하나 더!
    • Animated
      • 온보딩의 리팩토링
      • 온보딩 경험에 Animated 추가
      • 애니메이션 값 보정
    • PanResponder 적용
      • PanResponder 보완
    • 정리

  • 9장. 안드로이드를 위한 리팩토링
    • 툴 설치
      • JDK 설치
      • 안드로이드 스튜디오 설치
      • ANDROID_HOME과 PATH 설정
      • 안드로이드 에뮬레이터 실행
    • RNNYT에 안드로이드 지원 추가
      • 플랫폼 로직의 분기
      • 안드로이드를 위한 RNNYT 리팩토링
    • 정리

  • 10장. 네이티브 모듈의 작성과 사용
    • 네이티브 모듈 사용하기
      • 네이티브 모듈 설치
      • 아이콘 라이브러리 사용하기
    • 네이티브 모듈 제작
      • iOS 네이티브 모듈
      • 안드로이드 네이티브 모듈
    • 정리

  • 11장. 앱 출시 준비
    • 테스트
      • 단위 테스트
      • 컴포넌트 테스트
    • 성능
      • 말썽쟁이 ListView
      • 낮은 반응의 터치와 느린 내비게이션
      • 성능 관련 요약
    • 실제 기기에서의 실행
      • iOS 디바이스에서의 디버깅
      • 안드로이드 디바이스에서의 디버깅
    • 앱 배포
      • 디버깅 코드 제거
      • iOS
      • 안드로이드
    • 정리

  • 12장. 리액트 네이티브 툴과 참고자료
    • 리액트 네이티브 에디터, 플러그인, IDE
      • 아톰과 뉴클라이드
    • iOS와 안드로이드를 넘어
      • 리액트 네이티브 웹 소개
      • 리액트 네이티브 UWP 플러그인
      • 리액트 네이티브 맥 OS

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안