리액트 네이티브를 다루는 기술 (실무에서 알아야 할 기술은 따로 있다!)

김민준

VELOPERT
개발은언제나즐겁고재밌어야한다는생각을갖고있는개발자이며,IT기술을가르치는것을굉장히좋아하는교육자이다.또한,사용자를행복하게만드는서비스를만드는것이가장중요하다고여긴다.현재리디(주)에서애니메이션스트리밍서비스라프텔(laftel.net)의프런트엔드개발을하고있다.그리고개발자들의블로그서비스인벨로그(velog.io)를운영및개발하고있다.

블로그:https://velog.io/@velopert
GitHub:https://github.com/velopert
Twitter:https://twitter.com/velopert

1장리액트네이티브첫걸음
__1.1리액트네이티브란?
__1.2작업환경준비하기
____1.2.1Node.js와npm설치하기
____1.2.2yarn
____1.2.3JavaDevelopmentKit
____1.2.4Watchman설치하기
____1.2.5안드로이드스튜디오설치하기
____1.2.6안드로이드환경변수설정하기
____1.2.7VSCode설치하기
____1.2.8Xcode와CocoaPods설치하기
__1.3새리액트네이티브프로젝트만들기
____1.3.1안드로이드환경에서리액트네이티브앱구동하기
____1.3.2iOS환경에서리액트네이티브앱구동하기
__1.4프로젝트살펴보기
____1.4.1엔트리파일
____1.4.2App컴포넌트
____1.4.3네이티브프로젝트
__1.5ESLint와Prettier
__1.6정리

2장컴포넌트
__2.1나만의컴포넌트만들기
__2.2Props
__2.3defaultProps
__2.4JSX문법
____2.4.1태그를열면반드시닫아주기
____2.4.2스스로닫는태그사용하기
____2.4.3반환할땐꼭하나의태그로감싸기
____2.4.4JSX안에서자바스크립트표현식을보여줄땐중괄호로감싸기
____2.4.5주석작성하기
__2.5StyleSheet로컴포넌트에스타일입히기
____2.5.1Props로컴포넌트스타일을커스터마이징하기
__2.6Props객체구조분해할당
__2.7useStateHook으로상태관리하기
____2.7.1useState사용해보기
____2.7.2Button컴포넌트사용하기
____2.7.3조건부렌더링구현하기
__2.8카운터만들기
____2.8.1UI준비하기
____2.8.2Counter컴포넌트에Props설정하기
____2.8.3App에서상태관리하기
__2.9정리

3장할일목록만들기I
__3.1프로젝트기반다지기
____3.1.1프로젝트생성
____3.1.2오늘날짜를알려주는DateHead컴포넌트만들기
____3.1.3StatusBar색상바꾸기
____3.1.4레이아웃준비하기
____3.1.5이미지사용하기
__3.2TextInput으로사용자키보드입력받기
____3.2.1KeyboardAvoidingView로키보드가화면을가리지않게하기
____3.2.2useState로텍스트상태값관리하기
____3.2.2커스텀버튼만들기
____3.2.3TextInput에onSubmitEditing및returnKeyType설정하기
__3.3정리

4장할일목록만들기II
__4.1불변성을지키면서객체와배열을업데이트하는방법
____4.1.1불변성을지켜야하는이유
____4.1.2배열의불변성을지키는방법
__4.2todos상태만들기및FlatList로항목화면에나타내기
____4.2.1todos상태만들기
____4.2.2TodoList컴포넌트만들기
____4.2.3TodoItem컴포넌트만들기
____4.2.4항목사이에구분선보여주기
____4.2.5완료한항목에다른스타일적용하기
__4.3새항목등록하기
__4.4할일완료상태토글하기
__4.5항목삭제하기
____4.5.1벡터아이콘사용하기
____4.5.2항목삭제함수만들기
____4.5.3항목을삭제하기전에한번물어보기
__4.6AsyncStorage로앱이꺼져도데이터유지하기
____4.6.1Promise가무엇인가요?
____4.6.2AsyncStorage설치하기
____4.6.3AsyncStorage의기본사용법
____4.6.4AsyncStorage적용하기
__4.7정리

5장리액트내비게이션으로여러화면관리하기
__5.1설치및적용
____5.1.1의존패키지설치
____5.1.2라이브러리적용
__5.2기본적인사용법
____5.2.1네이티브스택내비게이터
____5.2.2스크린이동하기
____5.2.3라우트파라미터
____5.2.4뒤로가기
____5.2.5Header커스터마이징
__5.3다양한내비게이터
____5.3.1드로어내비게이터
____5.3.2하단탭내비게이터
____5.3.3머티리얼상단탭내비게이터
____5.3.4머티리얼하단탭내비게이터
____5.3.5머티리얼하단탭내비게이터헤더타이틀동기화하기
__5.4내비게이션Hooks
____5.4.1useNavigation
____5.4.2useRoute
____5.4.3useFocusEffect
__5.5정리

6장다이어리앱만들기I
__6.1프로젝트준비하기
____6.1.1react-native-vector-icons적용
____6.1.2react-navigation적용
__6.2ContextAPI사용하기
____6.2.1childrenProps
____6.2.2useContextHook함수
____6.2.3Context에서유동적인값다루기
__6.3새글작성하기
____6.3.1FloatingWriteButton만들기
____6.3.2WriteScreenUI준비하기
____6.3.3useRef로컴포넌트레퍼런스선택하기
____6.3.4KeyboardAvoidingView로화면감싸기
____6.3.5WriteScreen에서텍스트상태관리
____6.3.6LogContext로배열상태관리하기
____6.3.7Log작성기능마무리하기
__6.4글목록보여주기
____6.4.1FeedListItem컴포넌트만들기
____6.4.2FeedList컴포넌트만들기
____6.4.3date-fns로날짜포맷팅
__6.5Animated로애니메이션적용하기
____6.5.1애니메이션연습
____6.5.2스크롤을내렸을때글쓰기버튼숨기기
____6.5.3spring
____6.5.4예외처리
__6.6정리

7장다이어리앱만들기II
__7.1작성한글을WriteScreen으로열기
____7.1.1FeedListItem수정
____7.1.2WriteScreen에서log파라미터인식
__7.2수정기능구현하기
____7.2.1LogContext에onModify함수구현하기
____7.2.2WriteScreen에서onModify함수사용하기
__7.3삭제기능구현하기
____7.3.1LogContext에onRemove함수구현하기
____7.3.2WriteScreen에서onRemove함수사용하기
____7.3.3WriteHeader수정하기
__7.4검색기능구현하기
____7.4.1SearchHeader컴포넌트만들기
____7.4.2화면크기조회하기
____7.4.3SearchHeader컴포넌트UI구성하기
____7.4.4SearchContext만들기
____7.4.5검색어필터링후FeedList재사용하기
____7.4.6EmptySearchResult만들기
__7.5달력기능구현하기
____7.5.1달력에표시하기
____7.5.2데이터를달력과연동하기
____7.5.3달력하단에로그목록보여주기
____7.5.4useMemoHook으로최적화하기
__7.6날짜및시간수정기능구현하기
____7.6.1WriteHeader에서날짜및시간보여주기
____7.6.2DateTimePickerModal컴포넌트사용하기
__7.7useReducerHook함수사용하기
__7.8AsyncStorage로데이터유지하기
__7.9정리

8장Firebase로사진공유앱만들기I
__8.1프로젝트준비하기
____8.1.1내비게이션과아이콘설정
____8.1.2Firebase적용하기
____8.1.3화면구성이해하기
__8.2회원인증기능구현하기
____8.2.1회원인증을위한UI준비하기
____8.2.2인풋상태관리하기
____8.2.3인풋에서키보드리턴처리하기
____8.2.4컴포넌트분리하기
____8.2.5Firebase로회원인증하기
____8.2.6오류예외처리하기
____8.2.7사용자프로필Firestore에담기
__8.3Firebase에회원정보등록하기
__8.4UserContext만들고로그인사용자분기처리하기
__8.5이미지업로드하기
____8.5.1이미지선택기능구현하기
____8.5.2사용자기본이미지설정하기
____8.5.3FirebaseStorage로이미지업로드하기
__8.6정리

9장Firebase로사진공유앱만들기II
__9.1탭화면구현하기
__9.2로그인상태유지하기
__9.3포스트작성기능구현하기
____9.3.1탭중앙에버튼만들기
____9.3.2업로드할사진선택또는카메라촬영하기
____9.3.3포스트작성화면만들기
____9.3.4Firestore에포스트등록하기
__9.4포스트목록조회하기
____9.4.1PostCard컴포넌트만들기
____9.4.2Firestore로포스트목록조회하기
____9.4.3FeedScreen에서getPost호출후FlatList로보여주기
____9.4.4페이지네이션및시간순정렬
__9.5사용자프로필화면구현하기
____9.5.1Firestore데이터조회할때조건추가하기
____9.5.2포스트조회함수리팩토링하기
____9.5.3Firestore에서색인추가하기
____9.5.4Profile컴포넌트만들기
____9.5.5그리드뷰만들기
____9.5.6페이지네이션구현하기
____9.5.7커스텀훅을작성해컴포넌트리팩토링하기
____9.5.8포스트열기
____9.5.9내프로필화면구현하기
__9.6포스트수정및삭제기능구현하기
____9.6.1재사용할수있는모달만들기
____9.6.2사용자에게수정및삭제물어보기
____9.6.3포스