\"이 책은 자바스크립트로 iOS 및 안드로이드에서 동작하는
완벽한 애플리케이션을 만드는 데 필요한 모든 것을 다루고 있다\"
- 라이언 헐리(Ryan Hurley), 트위터 풀스택 웹 개발자

자바스크립트와 리액트로 만드는 네이티브 모바일 앱 개발 프레임워크

리액트 네이티브와 함께라면 자바스크립트로 잘 짜인 진짜 네이티브 앱을 만들 수 있다. 이 책은 iOS와 안드로이드에서 동작하는 모바일 앱을 만드는 법을 소개한다. 자바스크립트와 리액트(React)를 활용하여 iOS 및 안드로이드에서 동작하고 진짜 네이티브로 렌더링되는 모바일 애플리케이션을, 기능적인 제약 없이 만들고 배포할 수 있게 도와준다.



카메라와 사용자 위치, 로컬 저장소 등 플랫폼에서 제공하는 기능을 리액트 네이티브에서 사용하는 방법, 인터페이스를 만들고 꾸미는 방법, 모바일 컴포넌트를 사용하는 방법, 디버깅을 위한 도구와 배포하는 방법 등을 예제 코드를 보여주면서 설명하고 있어 단계적으로 배울 수 있다. 서드파티 라이브러리나 자바, 오브젝티브-C 라이브러리를 활용하여 리액트 네이티브를 확장하는 방법도 다루고 있다.



개정판인 이 책은 빠르게 성숙해온 리액트 네이티브의 변화에 맞춰 재구성되었다. 특히 리액트 네이티브와 함께 많이 사용되는 리덕스(redux)와 리액트 내비게이션(react-navigation)을 이용하여 하나의 완성된 리액트 네이티브 앱을 만들어가는 내용이 새롭게 추가되었다. 모바일 앱 개발을 시작하려 하는 프론트엔드 소프트웨어 엔지니어나 웹 개발자라면 모바일 앱 개발의 새로운 패러다임인 리액트 네이티브를 놓치지 말길 바란다.




[이 책에서 다루는 내용]

- 리액트 네이티브에서 네이티브 UI 컴포넌트를 사용하는 인터페이스를 제공하는 원리

- HTML 엘리먼트와 닮은 네이티브 컴포넌트 사용하기

- 자신만의 리액트 컴포넌트 및 애플리케이션을 생성하고 스타일 적용하기

- 리액트 네이티브가 지원하지 않는 API와 기능을 사용하기 위한 서드파티 모듈 설치하기

- 특정 플랫폼만 지원하는 컴포넌트를 크로스 플랫폼 애플리케이션에서 사용하기

- 리액트 네이티브 개발의 어려운 점과 이를 해결하기 위한 도구

- 대규모 애플리케이션에서 짜임새 있는 UX를 구성하고 리덕스 라이브러리를 이용해 state 관리하기

- iOS 앱 스토어와 구글 플레이 스토어에 배포하기

빠른 모바일 앱 개발을 위한 책
웹 개발자로 리액트를 처음 접했을 때 마치 오래전 루비 온 레일스를 처음 만났을 때와 비슷한 감흥을 받았다. 익숙한 것들을 무참히 깨뜨리고 새로 쌓아 올린 혁신적인 생각들이 리액트와 리액트 네이티브에 고스란히 녹아 있다. 이 책은 그런 리액트 네이티브의 멋진 아이디어를 가장 잘 전달해 주는 ‘리액티브(reactive)’한 책이라 말하고 싶다.
— 김석준, 유스풀패러다임 대표, 『레일스와 함께하는 애자일 웹 개발 1판』 역자

네이티브 모바일 앱 개발 안내서
자바스크립트는 지금 제2의 부흥기를 맞이하고 있다. 웹을 위한 간이 언어로 만족해온 유년기를 벗어나, 클라우드에서 IoT까지 본격적인 활약을 펼치고 있다. 그중 리액트 네이티브는 종래의 상식을 깨는 기발한 접근법으로 프로급 앱 개발마저 가능하게 했다. iOS와 안드로이드를 동시 지원할 뿐 아니라, 최근에는 Mac OS나 윈도우 쪽 개발도 가능해지는 등 생태계가 급팽창 중이다. 리액트 네이티브는 최신 자바스크립트 ES6/7과도 궁합이 좋은 리액트의 파생 버전인 만큼 이 책을 통해 제대로 배워두면 금상첨화일 것이다. 또한 자바스크립트로 네이티브 앱을 오랜 기간 개발해온 역자의 친절한 검토와 번역이 돋보이는 책이다.
- 김국현, 에디토이 리서치 스튜디오 대표

iOS 및 안드로이드 앱 개발에서 컴포넌트 사용법, 디버깅, 앱 스토어 등록까지 뚝딱!
리액트 네이티브는 모바일 앱 개발의 새로운 패러다임이다. 페이스북, 트위터, 넷플릭스, 에어비앤비, 세일즈포스 등 이미 수백 개 회사를 통해 검증된 리액트 기술에 기반을 둔 리액트 네이티브는 웹 페이지를 만드는 것만큼이나 간단하게 모바일 앱을 뚝딱 만들수 있게 해주는 모바일 앱 개발 프레임워크이다. 발표된 지 1년여 만에 깃허브의 인기 오픈 소스 라이브러리 10위권에 오른 리액트 네이티브의 가장 큰 장점은 빠른 개발 속도, 멋진 ‘개발자 경험’, 그리고 진짜 네이티브 UI의 구현이다.
자바스크립트와 리액트에 대한 기본 지식을 갖추고 있다면, 이 책을 통해 iOS 및 안드로이드 앱 개발, 주요 컴포넌트들의 사용법, 디버깅, 그리고 앱스토어 등록까지 모바일 앱 개발의 전체 사이클을 쉽게 따라 익힐 수 있을 것이다.
- 황대산, (주)어떤사람들 CEO

1장 리액트 네이티브란 무엇인가?
1.1 리액트 네이티브의 이점
1.1.1 개발 경험
1.1.2 코드 재사용 및 지식 공유
1.2 위험과 단점
1.3 요약

2장 리액트 네이티브 다루기
2.1 리액트 네이티브는 어떻게 동작할까?
2.2 렌더링 라이프사이클
2.3 리액트 네이티브 컴포넌트 만들기
2.3.1 뷰 작업하기
2.3.2 JSX 사용하기
2.3.3 네이티브 컴포넌트 스타일링
2.4 대상 플랫폼 API
2.5 요약

3장 나의 첫 애플리케이션 만들기
3.1 환경 설정
3.2 개발 환경 설정: Create React Native App
3.2.1 create-react-native-app을 이용하여 첫 앱 생성하기
3.2.2 iOS와 안드로이드에서 앱 실행하기
3.3 개발 환경 설정: 전형적인 방법
3.3.1 react-native 명령어를 이용한 첫 앱 생성하기
3.3.2 iOS에서 앱 실행하기
3.3.3 안드로이드에서 앱 실행하기
3.4 샘플 코드 살펴보기
3.5 날씨 앱 만들기
3.5.1 사용자 입력 다루기
3.5.2 데이터 표시하기
3.5.3 웹에서 데이터 가져오기
3.5.4 배경 이미지 추가하기
3.5.5 모두 합쳐서 완성하기
3.6 요약

4장 모바일 컴포넌트
4.1 HTML 엘리먼트와 네이티브 컴포넌트의 유사성
4.1.1 <Text> 컴포넌트
4.1.2 <Image> 컴포넌트
4.2 터치와 제스처(Gestures) 다루기
4.2.1 <Button>을 이용한 기본 인터렉션 만들기
4.2.2 <TouchableHighlight> 컴포넌트 사용하기
4.2.3 PanResponder 클래스 사용하기
4.3 리스트 관련 컴포넌트
4.3.1 기본 <FlatList> 컴포넌트 사용하기
4.3.2 <FlatList> 내용 갱신하기
4.3.3 실제 데이터 연결하기
4.3.4 <SectionList> 사용하기
4.4 내비게이션
4.5 짜임새를 위한 컴포넌트
4.6 요약

5장 스타일
5.1 스타일의 선언과 조작
5.1.1 인라인 스타일 사용하기
5.1.2 오브젝트로 스타일 적용하기
5.1.3 StyleSheet.Create 사용하기
5.1.4 스타일 병합하기
5.2 구조화 및 상속
5.2.1 스타일 객체 내보내기
5.2.2 스타일을 props로 전달하기
5.2.3 스타일의 재사용과 공유
5.3 위치 잡기 및 레이아웃 디자인하기
5.3.1 Flexbox를 이용한 레이아웃
5.3.2 절대적 위치 지정
5.3.3 모두 합쳐서 완성하기
5.4 요약

6장 플랫폼 API
6.1 지리적 위치 정보 이용하기
6.1.1 사용자 위치 얻어오기
6.1.2 권한 다루기
6.1.3 iOS 시뮬레이터에서 위치 추적 기능 테스트하기
6.1.4 사용자 위치 지켜보기
6.1.5 제한사항
6.1.6 날씨 앱 업데이트하기
6.2 사용자의 사진과 카메라 접근하기
6.2.1 카메라롤 모듈 다루기
6.2.2 getPhotoParams를 이용한 사진 요청
6.2.3 카메라롤의 이미지 렌더링하기
6.2.4 사진을 서버에 올리기
6.3 AsyncStore를 이용한 영속적 데이터 저장하기
6.4 SmarterWeather 앱
6.4.1 <WeatherProject> 컴포넌트
6.4.2 <Forecast> 컴포넌트
6.4.3 <Button> 컴포넌트
6.4.4 <LocationButton> 컴포넌트
6.4.5 <PhotoBackdrop> 컴포넌트
6.5 요약

7장 모듈과 네이티브 코드
7.1 npm을 이용한 자바스크립트 라이브러리 설치
7.2 네이티브 코드를 사용하는 서드파티 컴포넌트 설치
7.2.1 Video 컴포넌트 사용하기
7.3 오브젝티브-C 네이티브 모듈
7.3.1 iOS를 위한 오브젝티브-C 네이티브 모듈 만들기
7.3.2 react-native-video의 iOS 버전 탐험하기
7.4 자바 네이티브 모듈
7.4.1 안드로이드를 위한 자바 네이티브 모듈 만들기
7.4.2 react-native-video의 자바 버전 탐험하기
7.5 크로스 플랫폼 네이티브 모듈
7.6 요약

8장 플랫폼 특정 컴포넌트
8.1 iOS 혹은 안드로이드만을 위한 컴포넌트
8.2 플랫폼별로 구현되어 있는 컴포넌트
8.2.1 파일 확장자로 플랫폼 선택하기
8.2.2 Platform 모듈 사용하기
8.3 언제 플랫폼 특정 컴포넌트를 사용하나요?

9장 디버깅과 개발자 도구
9.1 자바스크립트 디버깅 방법과 에러 해석
9.1.1 개발자 옵션 활성화하기
9.1.2 console.log로 디버깅하기
9.1.3 자바스크립트 디버거 사용하기
9.1.4 리액트 개발자 도구 사용하기
9.2 리액트 네이티브 개발자 도구
9.2.1 엘리먼트 인스펙터 사용하기
9.2.2 빨간 에러 화면
9.3 자바스크립트를 넘어선 디버깅
9.3.1 흔히 발생하는 개발 환경 문제
9.3.2 흔히 발생하는 Xcode 문제
9.3.3 흔히 발생하는 안드로이드 문제
9.3.4 리액트 네이티브 패키저
9.3.5 iOS 디바이스에 배포할 때 발생하는 문제
9.3.6 시뮬레이터의 동작
9.4 코드 테스트하기
9.4.1 Flow를 이용한 타입 검사
9.4.2 Jest를 이용한 단위 테스트
9.4.3 Jest를 이용한 스냅샷 테스팅
9.5 문제를 해결하지 못해 막힐 때
9.6 요약

10장 대규모 애플리케이션의 내비게이션과 구조
10.1 플래시카드 앱
10.2 프로젝트 구조
10.2.1 앱 화면
10.2.2 재사용 가능한 컴포넌트
10.2.3 스타일
10.2.4 데이터 모델
10.3 React-Navigation 사용하기
10.3.1 StackNavigator 생성하기
10.3.2 navigation.navigate를 이용한 화면 전환
10.3.3 navigationOptions을 이용한 헤더 설정하기
10.3.4 나머지 구현하기
10.4 요약

11장 대규모 애플리케이션에서의 State 관리
11.1 리덕스 사용한 State 관리
11.2 액션(Action)
11.3 리듀서(reducer)
11.4 리덕스 연결하기
11.5 AsyncStorage를 이용한 영속적인 데이터 저장
11.6 요약 그리고 숙제

결론

부록 A 모던 자바스크립트 문법
A.1 let과 const
A.2 모듈 불러오기
A.3 비구조화
A.4 함수 축약 표현식
A.5 두꺼운 화살표 함수
A.6 파라미터 기본값
A.7 문자열 조립
A.8 Promise 다루기

부록 B 애플리케이션 앱 스토어에 배포하기
B.1 앱 에셋 확인과 타킷 OS버전과 디바이스 지정하기
B.2 배포를 위한 릴리스 빌드 만들기
B.3 개발자 계정 만들기
B.4 앱 베타 테스트
B.5 앱 정보 등록하기
B.6 앱 심사 기다리기
B.7 배포

부록 C Expo 애플리케이션 다루기
C.1 Expo에서 eject하기

찾아보기