- 현재 위치
- home > 컴퓨터·ICT·어학 > 컴퓨터·IT 도서 > 모바일 프로그래밍 > Do it! 리액트 네이티브 앱 프로그래밍[이지스퍼블리싱]
;)
크로스플랫폼 방식의 모바일 앱 개발 프레임워크인 리액트 네이티브를 다룬다. 리액트 네이티브로 개발한 앱을 플랫폼별 코드로 빌드하면 안드로이드와 iOS 앱을 한 번에 만들 수 있어 시간과 비용을 아낄 수 있다.
특별히 이 책은 리액트 진영의 최신 개발 트렌드인 타입스크립트와 함수 컴포넌트를 이용해 모바일 앱을 개발하며, 앱의 여러 가지 기능은 페이스북이 권장하는 리액트 훅 방식으로 작성한다. 그리고 모든 실습을 마치면 역동적인 애니메이션 기능까지 구현된 나만의 인스타그램 앱을 실제 스마트폰에서 동작해 볼 수 있다.
특별히 이 책은 리액트 진영의 최신 개발 트렌드인 타입스크립트와 함수 컴포넌트를 이용해 모바일 앱을 개발하며, 앱의 여러 가지 기능은 페이스북이 권장하는 리액트 훅 방식으로 작성한다. 그리고 모든 실습을 마치면 역동적인 애니메이션 기능까지 구현된 나만의 인스타그램 앱을 실제 스마트폰에서 동작해 볼 수 있다.
저자: 전예홍
=============================
01 리액트 네이티브 개발 환경 갖추기
=============================
01-1 리액트 네이티브 프레임워크 소개
01-2 윈도우에서 개발 환경 갖추기
01-3 맥에서 개발 환경 갖추기
01-4 비주얼 스튜디오 코드 환경 설정과 사용법
01-5 첫 번째 모바일 앱 만들기
=============================
02 리액트 네이티브 기본 다지기
=============================
02-1 리액트 네이티브 프레임워크의 작동 원리
02-2 JSX 구문 탐구하기
02-3 컴포넌트와 속성 이해하기
02-4 컴포넌트의 이벤트 속성 이해하기
=============================
03 컴포넌트 스타일링
=============================
03-1 style 속성과 StyleSheet API 이해하기
03-2 View 컴포넌트와 CSS 박스 모델
03-3 자원과 아이콘 사용하기
03-4 컴포넌트 배치 관련 스타일 속성 탐구하기
03-5 재사용할 수 있는 컴포넌트 만들기
=============================
04 함수 컴포넌트와 리액트 훅
=============================
04-1 리액트 훅 맛보기
04-2 useMemo와 useCallback 훅 이해하기
04-3 useState 훅 이해하기
04-4 useEffect와 useLayoutEffect 훅 이해하기
04-5 커스텀 훅 이해하기
=============================
05 콘텍스트와 ref 속성
=============================
05-1 콘텍스트 이해하기
05-2 useRef 훅 이해하기
05-3 useImperativeHandle 훅 이해하기
=============================
06 리액트 네이티브 애니메이션
=============================
06-1 처음 만나는 리액트 네이티브 애니메이션
06-2 transform 스타일 속성에 적용하는 애니메이션
06-3 여러 개의 애니메이션 한꺼번에 실행하기
06-4 PanResponder API 이해하기
=============================
07 리액트 내비게이션
=============================
07-1 리액트 내비게이션 패키지 이해하기
07-2 스택 내비게이션 이해하기
07-3 탭 내비게이션 이해하기
07-4 드로어 내비게이션 이해하기
=============================
08 리덕스 이해하기
=============================
08-1 리덕스의 기본 개념
08-2 combineReducers 함수 이해하기
08-3 리덕스 미들웨어 이해하기
=============================
09 엑스포 앱 이해하기
=============================
09-1 엑스포 앱 만들기
09-2 베어 워크플로 프로젝트 퍼블리싱
09-3 JSON 웹 토큰 기반 인증 서버 만들기
09-4 카메라 앱 만들기
찾아보기
01 리액트 네이티브 개발 환경 갖추기
=============================
01-1 리액트 네이티브 프레임워크 소개
01-2 윈도우에서 개발 환경 갖추기
01-3 맥에서 개발 환경 갖추기
01-4 비주얼 스튜디오 코드 환경 설정과 사용법
01-5 첫 번째 모바일 앱 만들기
=============================
02 리액트 네이티브 기본 다지기
=============================
02-1 리액트 네이티브 프레임워크의 작동 원리
02-2 JSX 구문 탐구하기
02-3 컴포넌트와 속성 이해하기
02-4 컴포넌트의 이벤트 속성 이해하기
=============================
03 컴포넌트 스타일링
=============================
03-1 style 속성과 StyleSheet API 이해하기
03-2 View 컴포넌트와 CSS 박스 모델
03-3 자원과 아이콘 사용하기
03-4 컴포넌트 배치 관련 스타일 속성 탐구하기
03-5 재사용할 수 있는 컴포넌트 만들기
=============================
04 함수 컴포넌트와 리액트 훅
=============================
04-1 리액트 훅 맛보기
04-2 useMemo와 useCallback 훅 이해하기
04-3 useState 훅 이해하기
04-4 useEffect와 useLayoutEffect 훅 이해하기
04-5 커스텀 훅 이해하기
=============================
05 콘텍스트와 ref 속성
=============================
05-1 콘텍스트 이해하기
05-2 useRef 훅 이해하기
05-3 useImperativeHandle 훅 이해하기
=============================
06 리액트 네이티브 애니메이션
=============================
06-1 처음 만나는 리액트 네이티브 애니메이션
06-2 transform 스타일 속성에 적용하는 애니메이션
06-3 여러 개의 애니메이션 한꺼번에 실행하기
06-4 PanResponder API 이해하기
=============================
07 리액트 내비게이션
=============================
07-1 리액트 내비게이션 패키지 이해하기
07-2 스택 내비게이션 이해하기
07-3 탭 내비게이션 이해하기
07-4 드로어 내비게이션 이해하기
=============================
08 리덕스 이해하기
=============================
08-1 리덕스의 기본 개념
08-2 combineReducers 함수 이해하기
08-3 리덕스 미들웨어 이해하기
=============================
09 엑스포 앱 이해하기
=============================
09-1 엑스포 앱 만들기
09-2 베어 워크플로 프로젝트 퍼블리싱
09-3 JSON 웹 토큰 기반 인증 서버 만들기
09-4 카메라 앱 만들기
찾아보기
모바일 앱 제작 방식이 바뀐다!
페이스북이 권장하는 방식 그대로 안드로이드와 iOS 앱을 한 번에 만들자!
이 책은 크로스플랫폼 방식의 모바일 앱 개발 프레임워크인 리액트 네이티브를 다룬다. 리액트 네이티브로 개발한 앱을 플랫폼별 코드로 빌드하면 안드로이드와 iOS 앱을 한 번에 만들 수 있어 시간과 비용을 아낄 수 있다. 특별히 이 책은 리액트 진영의 최신 개발 트렌드인 타입스크립트와 함수 컴포넌트를 이용해 모바일 앱을 개발하며, 앱의 여러 가지 기능은 페이스북이 권장하는 리액트 훅 방식으로 작성한다. 그리고 모든 실습을 마치면 역동적인 애니메이션 기능까지 구현된 나만의 인스타그램 앱을 실제 스마트폰에서 동작해 볼 수 있다.
==========
「이 책의 특징」
==========
※ 모든 실습을 마치면 인스타그램 같은 앱을 만들 수 있습니다.
※ 소스 코드 곳곳에 말풍선으로 해설을 넣어 분석하는 데 도움을 줍니다.
※ 모든 실습 결과마다 안드로이드폰과 아이폰에서 빌드한 실행 화면을 동시에 제공합니다.
※ 실무에서 바로 써먹을 수 있는 고품질 소스 코드를 제공하며 코딩 컨벤션을 지켜 작성했습니다.
※ <예홍쌤의 한마디> 코너에서는 한 걸음 더 깊이 들어가 타입스크립트 고급 기법, 자주 묻는 내용, 개발 도구 활용법 등을 알려 줍니다.
※ 리액트 네이티브 개발자를 포함해 베타테스터 3명이 최신 버전의 개발 도구에서 전체 실습 과정과 소스를 검증했습니다.
▶ 많은 기업에서 리액트 네이티브로 앱을 만들기 시작했어요 ◀
리액트 네이티브는 2015년 봄에 발표된 후 페이스북, 인스타그램, 테슬라, 월마트, 스카이프 등 수많은 글로벌 기업에서 사용해 왔지만, 국내 기업에서는 2020년 여름에 발표된 안정화(v0.63.1) 버전 이후부터 본격적으로 사용하기 시작했습니다. 많은 기업에서 개발의 생산성과 효율성을 고려해 기존의 플랫폼별 네이티브 앱을 크로스플랫폼 앱으로 통합하고 있으며, 이에 따라 리액트 네이티브 개발자가 점점 필요해지고 있습니다. 바로 지금이 리액트 네이티브를 시작할 최적기라고 할 수 있습니다.
▶ 100% 타입스크립트와 함수 컴포넌트로 작성된 코드를 만나세요 ◀
이 책은 다른 곳에서 찾아보기 어려운 100% 타입스크립트 코드로 모바일 앱을 만듭니다. 타입스크립트는 강력한 타입 기능 덕분에 자바스크립트보다 개발과 디버깅에 드는 시간과 노력을 아끼면서 코드를 더 견고하게 작성할 수 있습니다. 따라서 규모가 큰 프로젝트일수록 타입스크립트로 개발하는 것을 선호하는 추세이며 많은 스타트업에서도 타입스크립트 개발자를 찾고 있습니다.
또한 이 책은 클래스 기반이 아닌 페이스북이 권장하는 리액트 훅 방식으로 앱의 각종 기능을 구현합니다. useState, useEffect, useCallback과 같은 기본 훅 함수는 물론, useMemo, useReducer, useContext, useImperativeHandle과 같은 잘 알려지지 않은 훅과 다양한 커스텀 훅을 직접 구현하기도 합니다.
▶ 실무에서 바로 써먹을 수 있는 코딩 기법이 가득해요 ◀
이 책은 리액트 애니메이션의 거의 모든 기능을 비중 있게 설명하며 리액트 네이티브 앱 개발에 필수인 내비게이션과 리덕스 기능도 훅으로 구현합니다. 그리고 모바일 앱에 필요한 JSON 웹 토큰 방식의 사용자 등록과 로그인 기능을 익스프레스 서버에 구현하고 리액트 네이티브 앱에서 접속합니다. 또한 범용으로 재사용할 수 있는 컴포넌트 등을 만들고 이를 이용하는 코드를 작성하는 방식으로 구성해서 실무에서 팀 단위로 개발하는 방법을 자연스럽게 배울 수 있습니다.
▶ 윈도우와 맥에서 개발 환경을 모두 설명하고 전체 소스를 제공해요 ◀
이 책은 윈도우에서 안드로이드 앱 개발 환경뿐만 아니라 맥에서 iOS와 안드로이드 앱 개발 환경까지 모두 다룹니다. 또한 전체 소스 코드를 제공하므로 쉽게 테스트해 볼 수 있습니다. 모든 프로젝트는 expo로 진행하는 튜토리얼 수준에 그치지 않고, 실제 개발 환경처럼 CLI를 이용해 프로젝트를 생성하고 리액트 네이티브 프로젝트 구성에 맞게 코드를 작성합니다.
==========
「이 책의 구성」
==========
01 리액트 네이티브 개발 환경 갖추기
리액트 네이티브 앱 개발에 필요한 다양한 도구를 맥과 윈도우에 설치하는 방법, 안드로이드폰과 아이폰 에뮬레이터의 기본 사용법을 설명합니다.
02 리액트 네이티브 기본 다지기
JSX 구문과 컴포넌트, 컴포넌트 속성 그리고 이벤트 처리기 등 리액트와 리액트 네이티브 양쪽에서 공통으로 사용하는 부분을 설명합니다.
03 컴포넌트 스타일링
폰트, 이미지, 아이콘 등을 이용해 컴포넌트를 예쁘게 스타일링하는 방법을 알아봅니다. 리액트 방식과 리액트 네이티브 방식의 앱 스타일링은 어떤 차이점과 공통점이 있는지 살펴볼 수 있습니다.
04 함수 컴포넌트와 리액트 훅
리액트 훅을 본격적으로 알아봅니다. 리액트 훅을 결합하여 사용하는 커스텀 훅도 설명합니다. 리액트 훅이 리액트 네이티브 개발에 어떻게 적용되는지 알 수 있습니다.
05 콘텍스트와 ref 속성
이름에 Provider라는 단어가 들어 있는 컴포넌트의 특징과 사용법 그리고 ref 속성과 관련된 리액트 훅을 알 수 있습니다.
06 리액트 네이티브 애니메이션
모바일 앱에서 역동적인 사용자 인터페이스를 만드는 데 필요한 애니메이션 기능을 어떻게 구현하는지 알 수 있습니다.
07 리액트 내비게이션
다크·데이 모드 관련 테마 기능과 스택 내비게이션, 탭 내비게이션 그리고 서랍(drawer) 내비게이션 기능의 동작 원리와 사용법을 알 수 있습니다.
08 리덕스 이해하기
상태 관리 패키지의 대표 주자인 리덕스의 동작 원리와 타입스크립트라는 특성을 고려한 개발 방법, 그리고 useReducer 훅을 알 수 있습니다.
09 엑스포 앱 이해하기
익스프레스 웹 서버와 리액트 네이티브 앱이 서로 협력하여 동작하는 방법과 실제 스마트폰에서 카메라로 사진을 찍어 웹 서버에 업로드하는 방법까지 배웁니다. 나만의 인스타그램 앱을 완성합니다.
============
「이 책의 대상 독자」
============
이 책은 타입스크립트의 기초를 알고 리액트 프레임워크를 사용해 본 적이 있는 웹 프런트엔드 개발자라면 쉽게 이해할 수 있습니다. 또는 자바스크립트만 알고 있어도 내용을 이해하는 데 큰 무리는 없습니다. 만약 타입스크립트나 리액트에 자신이 없다면 관련 도서를 참고하며 공부하는 것도 좋습니다.
- 자바스크립트 개발자이고 크로스플랫폼 모바일 앱을 만들고 싶은 사람
- 기존의 네이티브 앱을 리액트 네이티브 앱으로 전환하려는 개발 팀
- 타입스크립트 기초를 알고 실무 역량을 높이고 싶은 사람
- 리액트 프레임워크를 사용해 보았거나 함께 공부하고 싶은 사람
=================
「이지스퍼블리싱 독자 지원」
=================
※ 전체 소스 파일은 이지스퍼블리싱 홈페이지 자료실(http://www.easyspub.co.kr/Main/pub)에서 내려받을 수 있어요. 자료실에서 도서명으로 검색해 보세요.
※ 책을 읽다가 궁금한 내용은 책에 소개된 이메일이나 Do it! 스터디룸 (https://cafe.naver.com/doitstudyroom)에 질문을 올리면 저자가 직접 답해 줍니다.
※ Do it! 스터디룸에서 운영하는 [Do it! 공부단]에 참여해 보세요. 이 책으로 공부하며 나만의 스터디 노트를 작성하면 이지스퍼블리싱에서 출간한 다른 책을 선물로 받을 수 있습니다.
※ 이지스퍼블리싱 홈페이지에 회원가입을 하여 매달 정기 소식지를 받아 보세요. 신간과 책 관련 이벤트 소식을 누구보다 빠르게 확인할 수 있습니다. 매달 전자책 한 권을 공개하는 이벤트도 진행하고 있습니다.
페이스북이 권장하는 방식 그대로 안드로이드와 iOS 앱을 한 번에 만들자!
이 책은 크로스플랫폼 방식의 모바일 앱 개발 프레임워크인 리액트 네이티브를 다룬다. 리액트 네이티브로 개발한 앱을 플랫폼별 코드로 빌드하면 안드로이드와 iOS 앱을 한 번에 만들 수 있어 시간과 비용을 아낄 수 있다. 특별히 이 책은 리액트 진영의 최신 개발 트렌드인 타입스크립트와 함수 컴포넌트를 이용해 모바일 앱을 개발하며, 앱의 여러 가지 기능은 페이스북이 권장하는 리액트 훅 방식으로 작성한다. 그리고 모든 실습을 마치면 역동적인 애니메이션 기능까지 구현된 나만의 인스타그램 앱을 실제 스마트폰에서 동작해 볼 수 있다.
==========
「이 책의 특징」
==========
※ 모든 실습을 마치면 인스타그램 같은 앱을 만들 수 있습니다.
※ 소스 코드 곳곳에 말풍선으로 해설을 넣어 분석하는 데 도움을 줍니다.
※ 모든 실습 결과마다 안드로이드폰과 아이폰에서 빌드한 실행 화면을 동시에 제공합니다.
※ 실무에서 바로 써먹을 수 있는 고품질 소스 코드를 제공하며 코딩 컨벤션을 지켜 작성했습니다.
※ <예홍쌤의 한마디> 코너에서는 한 걸음 더 깊이 들어가 타입스크립트 고급 기법, 자주 묻는 내용, 개발 도구 활용법 등을 알려 줍니다.
※ 리액트 네이티브 개발자를 포함해 베타테스터 3명이 최신 버전의 개발 도구에서 전체 실습 과정과 소스를 검증했습니다.
▶ 많은 기업에서 리액트 네이티브로 앱을 만들기 시작했어요 ◀
리액트 네이티브는 2015년 봄에 발표된 후 페이스북, 인스타그램, 테슬라, 월마트, 스카이프 등 수많은 글로벌 기업에서 사용해 왔지만, 국내 기업에서는 2020년 여름에 발표된 안정화(v0.63.1) 버전 이후부터 본격적으로 사용하기 시작했습니다. 많은 기업에서 개발의 생산성과 효율성을 고려해 기존의 플랫폼별 네이티브 앱을 크로스플랫폼 앱으로 통합하고 있으며, 이에 따라 리액트 네이티브 개발자가 점점 필요해지고 있습니다. 바로 지금이 리액트 네이티브를 시작할 최적기라고 할 수 있습니다.
▶ 100% 타입스크립트와 함수 컴포넌트로 작성된 코드를 만나세요 ◀
이 책은 다른 곳에서 찾아보기 어려운 100% 타입스크립트 코드로 모바일 앱을 만듭니다. 타입스크립트는 강력한 타입 기능 덕분에 자바스크립트보다 개발과 디버깅에 드는 시간과 노력을 아끼면서 코드를 더 견고하게 작성할 수 있습니다. 따라서 규모가 큰 프로젝트일수록 타입스크립트로 개발하는 것을 선호하는 추세이며 많은 스타트업에서도 타입스크립트 개발자를 찾고 있습니다.
또한 이 책은 클래스 기반이 아닌 페이스북이 권장하는 리액트 훅 방식으로 앱의 각종 기능을 구현합니다. useState, useEffect, useCallback과 같은 기본 훅 함수는 물론, useMemo, useReducer, useContext, useImperativeHandle과 같은 잘 알려지지 않은 훅과 다양한 커스텀 훅을 직접 구현하기도 합니다.
▶ 실무에서 바로 써먹을 수 있는 코딩 기법이 가득해요 ◀
이 책은 리액트 애니메이션의 거의 모든 기능을 비중 있게 설명하며 리액트 네이티브 앱 개발에 필수인 내비게이션과 리덕스 기능도 훅으로 구현합니다. 그리고 모바일 앱에 필요한 JSON 웹 토큰 방식의 사용자 등록과 로그인 기능을 익스프레스 서버에 구현하고 리액트 네이티브 앱에서 접속합니다. 또한 범용으로 재사용할 수 있는 컴포넌트 등을 만들고 이를 이용하는 코드를 작성하는 방식으로 구성해서 실무에서 팀 단위로 개발하는 방법을 자연스럽게 배울 수 있습니다.
▶ 윈도우와 맥에서 개발 환경을 모두 설명하고 전체 소스를 제공해요 ◀
이 책은 윈도우에서 안드로이드 앱 개발 환경뿐만 아니라 맥에서 iOS와 안드로이드 앱 개발 환경까지 모두 다룹니다. 또한 전체 소스 코드를 제공하므로 쉽게 테스트해 볼 수 있습니다. 모든 프로젝트는 expo로 진행하는 튜토리얼 수준에 그치지 않고, 실제 개발 환경처럼 CLI를 이용해 프로젝트를 생성하고 리액트 네이티브 프로젝트 구성에 맞게 코드를 작성합니다.
==========
「이 책의 구성」
==========
01 리액트 네이티브 개발 환경 갖추기
리액트 네이티브 앱 개발에 필요한 다양한 도구를 맥과 윈도우에 설치하는 방법, 안드로이드폰과 아이폰 에뮬레이터의 기본 사용법을 설명합니다.
02 리액트 네이티브 기본 다지기
JSX 구문과 컴포넌트, 컴포넌트 속성 그리고 이벤트 처리기 등 리액트와 리액트 네이티브 양쪽에서 공통으로 사용하는 부분을 설명합니다.
03 컴포넌트 스타일링
폰트, 이미지, 아이콘 등을 이용해 컴포넌트를 예쁘게 스타일링하는 방법을 알아봅니다. 리액트 방식과 리액트 네이티브 방식의 앱 스타일링은 어떤 차이점과 공통점이 있는지 살펴볼 수 있습니다.
04 함수 컴포넌트와 리액트 훅
리액트 훅을 본격적으로 알아봅니다. 리액트 훅을 결합하여 사용하는 커스텀 훅도 설명합니다. 리액트 훅이 리액트 네이티브 개발에 어떻게 적용되는지 알 수 있습니다.
05 콘텍스트와 ref 속성
이름에 Provider라는 단어가 들어 있는 컴포넌트의 특징과 사용법 그리고 ref 속성과 관련된 리액트 훅을 알 수 있습니다.
06 리액트 네이티브 애니메이션
모바일 앱에서 역동적인 사용자 인터페이스를 만드는 데 필요한 애니메이션 기능을 어떻게 구현하는지 알 수 있습니다.
07 리액트 내비게이션
다크·데이 모드 관련 테마 기능과 스택 내비게이션, 탭 내비게이션 그리고 서랍(drawer) 내비게이션 기능의 동작 원리와 사용법을 알 수 있습니다.
08 리덕스 이해하기
상태 관리 패키지의 대표 주자인 리덕스의 동작 원리와 타입스크립트라는 특성을 고려한 개발 방법, 그리고 useReducer 훅을 알 수 있습니다.
09 엑스포 앱 이해하기
익스프레스 웹 서버와 리액트 네이티브 앱이 서로 협력하여 동작하는 방법과 실제 스마트폰에서 카메라로 사진을 찍어 웹 서버에 업로드하는 방법까지 배웁니다. 나만의 인스타그램 앱을 완성합니다.
============
「이 책의 대상 독자」
============
이 책은 타입스크립트의 기초를 알고 리액트 프레임워크를 사용해 본 적이 있는 웹 프런트엔드 개발자라면 쉽게 이해할 수 있습니다. 또는 자바스크립트만 알고 있어도 내용을 이해하는 데 큰 무리는 없습니다. 만약 타입스크립트나 리액트에 자신이 없다면 관련 도서를 참고하며 공부하는 것도 좋습니다.
- 자바스크립트 개발자이고 크로스플랫폼 모바일 앱을 만들고 싶은 사람
- 기존의 네이티브 앱을 리액트 네이티브 앱으로 전환하려는 개발 팀
- 타입스크립트 기초를 알고 실무 역량을 높이고 싶은 사람
- 리액트 프레임워크를 사용해 보았거나 함께 공부하고 싶은 사람
=================
「이지스퍼블리싱 독자 지원」
=================
※ 전체 소스 파일은 이지스퍼블리싱 홈페이지 자료실(http://www.easyspub.co.kr/Main/pub)에서 내려받을 수 있어요. 자료실에서 도서명으로 검색해 보세요.
※ 책을 읽다가 궁금한 내용은 책에 소개된 이메일이나 Do it! 스터디룸 (https://cafe.naver.com/doitstudyroom)에 질문을 올리면 저자가 직접 답해 줍니다.
※ Do it! 스터디룸에서 운영하는 [Do it! 공부단]에 참여해 보세요. 이 책으로 공부하며 나만의 스터디 노트를 작성하면 이지스퍼블리싱에서 출간한 다른 책을 선물로 받을 수 있습니다.
※ 이지스퍼블리싱 홈페이지에 회원가입을 하여 매달 정기 소식지를 받아 보세요. 신간과 책 관련 이벤트 소식을 누구보다 빠르게 확인할 수 있습니다. 매달 전자책 한 권을 공개하는 이벤트도 진행하고 있습니다.
