빠른 모바일 앱 개발을 위한 React Native 2/E

바니 아이젠먼 지음 | 이종은 옮김

인사이트 2022년 12월 08일 출간 종이책 : 2018년 08월 08일 출간

작품소개

책소개

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

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

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

목차

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하기

찾아보기

출판사 서평

[이 책에서 다루는 내용]
- 리액트 네이티브에서 네이티브 UI 컴포넌트를 사용하는 인터페이스를 제공하는 원리
- HTML 엘리먼트와 닮은 네이티브 컴포넌트 사용하기
- 자신만의 리액트 컴포넌트 및 애플리케이션을 생성하고 스타일 적용하기
- 리액트 네이티브가 지원하지 않는 API와 기능을 사용하기 위한 서드파티 모듈 설치하기
- 특정 플랫폼만 지원하는 컴포넌트를 크로스 플랫폼 애플리케이션에서 사용하기
- 리액트 네이티브 개발의 어려운 점과 이를 해결하기 위한 도구
- 대규모 애플리케이션에서 짜임새 있는 UX를 구성하고 리덕스 라이브러리를 이용해 state 관리하기
- iOS 앱 스토어와 구글 플레이 스토어에 배포하기

작가정보

저자(글) 바니 아이젠먼

저자 바니 아이젠먼 Bonnie Eisenman
현재 트위터에서 소프트웨어 엔지니어로 일하고 있고 Codeacademy, Google, Fog Creek Software에서 근무했었다. 리액트, 아두이노, 음악 프로그래밍에 이르기까지 다양한 주제로 여러 콘퍼런스에서 발표한 바 있다.

번역 이종은

역자 이종은
모바일 앱을 만드는 Yo Studio를 운영하고 있다. 자바스크립트 개발자 포럼(jsdev.kr)의 운영자이며 오픈 소스와 개발자 커뮤니티를 사랑한다. 유튜브에서는 ‘코드종’으로 활동 중이다.