상세정보

d

d

dd
dd

리액트 네이티브 인 액션

실무 중심 예제로 배우는 크로스 플랫폼 앱 개발 실전 활용서

지은이 |   네이더 다빗(Nader Dabit)
옮긴이 |   구멍가게 코딩단, 이현곤
발행일 |   2019-09-27
페이지 |   432가격 |   25,000원
ISBN |   978-89-6540-256-5
분야 |   컴퓨터, 프로그래밍, 리액트
dddddd

리액트 네이티브 인 액션

실무 중심 예제로 배우는 크로스 플랫폼 앱 개발 실전 활용서

지은이 |   네이더 다빗(Nader Dabit)
옮긴이 |   구멍가게 코딩단, 이현곤
발행일 |   2019-09-27
페이지 |   432
가격 |   25,000원
ISBN |   978-89-6540-256-5
분야 |   컴퓨터, 프로그래밍, 리액트
ddd
ddd
흐름을 꿰뚫는 실무 중심 예제
주제별로 연결되어 단계별 학습에 최적화

리액트 네이티브는 모바일과 웹 개발자들에게 이 프레임워크가 가진 이점으로 효율성과 생산성을 빠르게 높일 수 있는 힘을 부여합니다. 우리가 만든 앱을 iOS와 Android 그리고 웹에 쉽게 배포합니다. 리액트 네이티브 앱을 플랫폼별 코드로 컴파일하여 개발 시간과 노력, 비용을 줄일 수 있습니다! 또한, 자바스크립트와 리액트 프레임워크를 사용하므로 관련 툴과 전문성, 거대한 생태계로부터 많은 이점을 누릴 수 있습니다.

<< 리액트 네이티브 인 액션 >>은 고품질의 크로스플랫폼 모바일과 웹 앱을 가장 빠르고 원할하게 만들 방법을 알려줍니다. 이 안내서로 독자분들은 명확하고 쉬운 도움을 받아 완전한 앱을 만들 수 있습니다. 독자분들은 스타일링, API, 애니메이션, 데이터 아키텍처 등의 기술을 쌓아가면서 더 발전된 주제들을 파고들 수 있습니다. 또한 기본 플랫폼의 모양과 느낌을 그대로 유지하면서 코드 재사용을 극대화하는 방법을 배우게 될 것입니다.
Part 01 리액트 네이티브로 시작하기
Chapter 01 리액트 네이티브로 시작하기
_1.1 리액트와 리액트 네이티브 소개
___1.1.1 리액트의 기본클래스
___1.1.2 리액트 생명주기
_1.2 앞으로 배울 내용
_1.3 알아야 할 내용
_1.4 리액트 네이티브의 작동 방식 이해하기
___1.4.1 JSX
___1.4.2 스레드처리
___1.4.3 리액트
___1.4.4 단방향데이터흐름
___1.4.5 디핑(코드비교)
___1.4.6 컴포넌트로생각하기
_1.5 리액트 네이티브의 강점
___1.5.1 개발자가용성
___1.5.2 개발자생산성
___1.5.3 성능
___1.5.4 단방향 데이터 흐름
___1.5.5 개발자 경험
___1.5.6 트랜스파일링
___1.5.7 생산성과 효율성
___1.5.8 커뮤니티
___1.5.9 오픈 소스
___1.5.10 빈번한 업데이트
___1.5.11 크로스 플랫폼 모바일 앱을 만드는 대안
_1.6 리액트 네이티브의 약점
_1.7 기본 컴포넌트 만들어 사용하기
___1.7.1 컴포넌트 개요
___1.7.2 네이티브 컴포넌트
___1.7.3 컴포넌트 구성
___1.7.4 외부로export 가능한 컴포넌트
___1.7.5 컴포넌트 조립하기
_1.8 시작 프로젝트 만들기
___1.8.1 Create React Native App CLI
___1.8.2 React Native CLI
_정리

Chapter 02 리액트 이해하기
_2.1 state를 사용해 컴포넌트 데이터 다루기
___2.1.1 컴포넌트의 상태 제대로 조작하기
_2.2 props를 사용해 컴포넌트 데이터 다루기
_2.3 리액트 컴포넌트 스펙
___2.3.1 render 메서드로UI 만들기
___2.3.2 속성 초기화와 생성자 사용하기
_2.4 리액트 생명주기 메서드
___2.4.1 static getDerivedStateFromProps 메서드
___2.4.2 componentDidMount 생명주기 메서드
___2.4.3 shouldComponentUpdate 생명주기 메서드
___2.4.4 componentDidUpdate 생명주기 메서드
___2.4.5 componentWillUnmount 생명주기 메서드
_정리

Chapter 03 처음 만드는 리액트 네이티브 앱
_3.1 todo 앱 레이아웃 작성하기
_3.2 todo 앱 코드 작성하기
_3.3 개발자 메뉴 열기
___3.3.1 iOS 시뮬레이터에서 개발자 메뉴 열기
___3.3.2 안드로이드 에뮬레이터에서 개발자 메뉴 열기
___3.3.3 개발자 메뉴 사용하기
_3.4 계속해서 todo 앱 만들기
_정리

Part 02 리액트 네이티브로 앱 개발하기
Chapter 04 스타일링 소개
_4.1 리액트 네이티브에서 스타일 적용하고 관리하기
___4.1.1 앱에서 스타일 적용하기
___4.1.2 스타일 구성하기
___4.1.3 스타일과 코드
_4.2 View 컴포넌트에 스타일 적용하기
___4.2.1 배경색 설정하기
___4.2.2 border 속성 지정하기
___4.2.3 마진(margin)과 패딩(padding) 지정하기
___4.2.4 position을 이용해서 컴포넌트 배치하기
___4.2.5 프로필 카드의 위치 지정하기
_4.3 Text 컴포넌트에 스타일 적용하기
___4.3.1 Text 컴포넌트vs View 컴포넌트
___4.3.2 폰트 스타일
___4.3.3 텍스트 장식하기
_정리

Chapter 05 고급 스타일링 기법
_5.1 플랫폼별 크기와 스타일
___5.1.1 픽셀, 포인트,DP(DPs)
___5.1.2 shadowPropTypesIOS와elevation 속성으로 음영 넣기
___5.1.3 프로필 카드 예제에 음영 넣기
_5.2 컴포넌트를 이동, 회전, 크기 변경, 기울이기
___5.2.1 3D 효과를 내기 위한perspective 속성
___5.2.2 translateX와translateY 속성으로 이동하기
___5.2.3 rotateX,rotateY,rotateZ 속성으로 엘리먼트 회전하기
___5.2.4 90도 이상 회전할 때visibility 속성 지정하기
___5.2.5 scale,scaleX,scaleY 속성으로 화면에서 크기 변경하기
___5.2.6 scale을 이용해 프로필 카드 섬네일 만들기
___5.2.7 skewX와skewY 속성을 이용해X 축과Y축을 따라 기울이기
___5.2.8 변형 효과의 핵심 포인트
_5.3 flexbox를 이용해서 컴포넌트 배치하기
___5.2.1 flex 속성으로 컴포넌트의 면적 변경하기
___5.2.2 flexDirection 속성으로flex 진행 방향 지정하기
___5.3.3 justifyContent 속성으로 컴포넌트 주위 여백 정하기
___5.3.4 alignItems 속성으로 하위 요소들 정렬하기
___5.3.5 alignSelf 속성으로 부모에 지정된 정렬 기준 재정의하기
___5.3.6 flexWrap 속성으로 잘려나가지 않도록 하기
_정리

Chapter 06 내비게이션
_6.1 리액트 네이티브 내비게이션과 웹 내비게이션의 비교
_6.2 내비게이션이 구현된 앱 만들기
_6.3 데이터 유지하기
_6.4 DrawerNavigator를 이용해서 드로어 내비게이션 만들기
_정리

Chapter 07 애니메이션
_7.1 Animated API 소개
_7.2 입력창에 포커스 애니메이션 적용하기
_7.3 애니메이션을 연결해 사용자 정의 애니메이션 만들기
_7.4 병렬처리되는 애니메이션 만들기
_7.5 순차적으로 처리되는 애니메이션 만들기
_7.6 Animated.stagger 함수를 이용해서 간격 주기
_7.7 Animated API 라이브러리 이용 시 유용한 팁
___7.7.1 애니메이션 효과 재지정하기
___7.7.2 애니메이션 끝난 뒤 실행되는 콜백 함수
___7.7.3 네이티브UI 스레드에서 애니메이션 실행하기
___7.7.4 createAnimatedComponent로 애니메이션 적용 가능 컴포넌트 만들기
_정리

_Chapter 08 리덕스 데이터 아키텍처 라이브러리 이용하기
_8.1 리덕스란?
_8.2 context를 이용해서 앱의 전역 state 관리하기
_8.3 리액트 네이티브 앱에 리덕스 구현하기
_8.4 리덕스 리듀서로 리덕스 상태 관리하기
_8.5 provider를 추가하고 스토어 만들기
_8.6 connect 함수를 이용해서 데이터 참조하기
_8.7 액션 추가하기
_8.8 리듀서에서 리덕스 스토어에 저장된 내용 지우기
_정리

Part 03 API 레퍼런스
_Chapter 09 크로스 플랫폼 API 구현하기
_9.1 Alert API를 이용해서 크로스 플랫폼용 알림 만들기
___9.1.1 alert API(alerts) 활용 예
___9.1.2 alert API를 사용하는 예제
_9.2 AppState API를 이용해서 현재 앱 상태 확인하기
___9.2.1 AppState API 활용 예
___9.2.2 AppState API를 사용하는 예제
_9.3 AsyncStorage API를 이용해서 데이터 유지하기
___9.3.1 AsyncStorage API 활용 예
___9.3.2 AsyncStorage API를 사용하는 예제
_9.4 Clipboard API를 이용해서 텍스트를 사용자 클립보드에 복사하기
___9.4.1 Clipboard API 활용 예
___9.4.2 Clipboard API를 사용하는 예제
_9.5 Dimensions API를 이용해서 디바이스의 화면 정보 확인하기
___9.5.1 Dimensions API 활용 예
___9.5.2 Dimensions API를 사용하는 예제
_9.6 Geolocation API를 이용해서 사용자의 현재 위치 확인하기
___9.6.1 Geolocation API 활용 예
___9.6.2 Geolocation API를 사용하는 예제
_9.7 Keyboard API를 이용해서 네이티브 키보드의 위치와 기능 조정하기
___9.7.1 Keyboard API 활용 예
___9.7.2 Keyboard API를 사용하는 예제
_9.8 NetInfo API를 이용해서 사용자의 온라인 연결 상태 확인하기
___9.8.1 NetInfo API 활용 예
___9.8.2 NetInfo API를 사용하는 예제
_9.9 PanResponder API를 이용해서 touch와 gesture 이벤트의 정보 알아 내기
___9.9.1 PanResponder API 활용 예
___9.9.2 PanResponder API를 사용하는 예제
_정리

Chapter 10 iOS용 컴포넌트와 API 구현하기
_10.1 플랫폼별 코드 지정하기
___10.1.1 iOS와 안드로이드 파일 확장자
___10.1.2 Platform API를 이용해서 플랫폼 확인하기
_10.2 DatePickerIOS
___10.2.1 DatePickerIOS를 사용하는 예제
_10.3 PickerIOS로 데이터 목록 처리하기
___10.3.1 PickerIOS를 사용하는 예제
_10.4 ProgressViewIOS로 로딩 인디케이터 표시하기
___10.4.1 ProgressViewIOS 활용 예
___10.4.2 ProgressViewIOS를 사용하는 예제
_10.5 SegmentedControlIOS로 수평 탭 바 만들기
___10.5.1 SegmentedControlIOS 활용 예
___10.5.2 SegmentedControlIOS를 사용하는 예제
_10.6 TabBarIOS로 UI 아래에 탭 보여주기
___10.6.1 TabBarIOS 활용 예
___10.6.2 TabBarIOS를 사용하는 예제
_10.7 ActionSheetIOS로 액션 시트나 공유 시트 만들기
___10.7.1 ActionSheetIOS 활용 예+M148
___10.7.2 ActionSheetIOS를 사용하는 예제
_정리

Chapter 11 안드로이드 용 컴포넌트와 API 구현하기
_11.1 DrawerLayoutAndroid로 메뉴 만들기
_11.2 ToolbarAndroid로 툴바 만들기
_11.3 ViewPagerAndroid로 스크롤 가능한 페이지 구현하기
_11.4 DatePickerAndroid API로 네이티브 날짜 선택하기
_11.5 TimePickerAndroid로 타임 피커 만들기
_11.6 ToastAndroid로 안드로이드 토스트 메시지 구현하기
정리

Part 04 모든 기능을 모아 앱 개발하기
_Chapter 12 크로스 플랫폼 컴포넌트를 이용해서 StarWars 앱 만들기
_12.1 앱 만들고 의존성 라이브러리 설치하기
___12.1.1 People 컴포넌트를 가져오고Container 컴포넌트 만들기
___12.1.2 내비게이션 컴포넌트를 만들고 라우트 등록하기
___12.1.3 첫 번째 뷰의 메인 클래스 만들기
_12.2 FlatList, Modal, Picker로 People 컴포넌트 만들기
___12.2.1 state를 만들고 데이터를 가져오는fetch() 설정하기
___12.2.2 기타 클래스 메서드 추가하기
___12.2.3 render 메서드 구현하기
_12.3 HomeWorld 컴포넌트 만들기
___12.3.1 HomeWorld 클래스를 만들고state 초기화하기
___12.3.2 url prop을 이용해서API로부터 데이터 가져오기
___12.3.3 HomeWorld 컴포넌트 감싸기
_정리
찾아보기
- 저자 소개 -
네이더 다빗(Nader Dabit)
AWS Mobile의 개발자이며 주창자로, 개발자들이 기존 기술을 이용하여 풀스택 웹과 모바일 애플리케이션을 구축할 수 있도록 도구와 서비스를 연구하고 있습니다. React Native Training의 창시자이며 React Native Radio 팟캐스트의 진행자이기도 합니다.

- 역자 소개 -
구멍가게 코딩단
프로그래밍을 좋아하지만, 남들 앞에 나설 용기 없는 10년 차 이상 개발자, 현업 관리자, 강사들의 비공개 모임. 어린 시절 구멍가게 앞 아저씨들이 인생의 진리를 가볍게 던졌던 것처럼 프로그래밍의 오의(奧義)를 가볍게 던지고 싶은 사람들의 모임. http://cafe.naver.com/gugucoding을 통해서 독자들과 소통하고 있다.

흐름을 꿰뚫는 실무 중심 예제
주제별로 연결되어 단계별 학습에 최적화

리액트 네이티브는 모바일과 웹 개발자들에게 이 프레임워크가 가진 이점으로 효율성과 생산성을 빠르게 높일 수 있는 힘을 부여합니다. 우리가 만든 앱을 iOS와 Android 그리고 웹에 쉽게 배포합니다. 리액트 네이티브 앱을 플랫폼별 코드로 컴파일하여 개발 시간과 노력, 비용을 줄일 수 있습니다! 또한, 자바스크립트와 리액트 프레임워크를 사용하므로 관련 툴과 전문성, 거대한 생태계로부터 많은 이점을 누릴 수 있습니다.

<< 리액트 네이티브 인 액션 >>은 고품질의 크로스플랫폼 모바일과 웹 앱을 가장 빠르고 원할하게 만들 방법을 알려줍니다. 이 안내서로 독자분들은 명확하고 쉬운 도움을 받아 완전한 앱을 만들 수 있습니다. 독자분들은 스타일링, API, 애니메이션, 데이터 아키텍처 등의 기술을 쌓아가면서 더 발전된 주제들을 파고들 수 있습니다. 또한 기본 플랫폼의 모양과 느낌을 그대로 유지하면서 코드 재사용을 극대화하는 방법을 배우게 될 것입니다.