처음 배우는 리액트 네이티브
1.리액트 네이티브 환경 설정
프리티어 설정참고
2.리액트 네이티브 시작하기
facebook에서 공개javascript 언어를 이용하여 ios/android 모바일 어플리케이션 개발쉬운 접근성(javascript)비용 절감 : ios/android 따로 개발할 필요가 없다.fast refresh : 해당 기능을 이용하여 코드 수정 후 즉각적으로
3.컴포넌트
Javascript + XML이후 babel을 이용하여 javascript + html 파일로 변환이 된다. 하나의 부모로 감싸줘야 한다.또는 <Fragment>, </Fragment> <>, </>를 이용하여 묶어준다.변수는 {} 로 묶어서 사용
4.스타일링(1)
객체 내에 객체로 입력하여야 한다.속성명은 카멜케이스로 입력하며 속성명은 기존 자바스크립트 언어와 조금 차이가 있다.
5.스타일링(2)
원래 자바스크립트의 css 코드를 적용한다.라이브러리 불러오기Tagged Template Literalsstyled.컴포넌트의 컴포넌트는 native 의 컴포넌트만을 사용하여야 한다.컴포넌트A의 스타일 코드를 모두 종속한다.스타일 코드 재사용2\. styled-comp
6.To-Do App (1)
공통으로 사용할 스타일 코드 작성ThemeProvider 사용하여 공용 스타일 코드 적용ThemeProvider 사용하여 스타일 코드 불러오기
7.To-Do App (2)
sample date 만들기배열로 만들거라 생각했는데 객체로 생성한점이 다르다. 추가 함수 작성 및 전달
8.To-Do App (3)
1. 데이터 저장하기
9.Hooks
함수 내부에서 변경된 상태값을 가지고 데이터를 처리하고 싶은 경우 예전에 해결 못한 유사 상황https://github.com/codestates/urscene/issues/227
10.context API
전역 상태 관리를 위한 APIprops drilling 방지를 위함.이전 챕터에서 ThemeProvider 와 동일한 기능const Context = createContext(기본값)<Context.Provider value={data}></Context.P
11.Navigation (1) : 기본, Stack
https://reactnavigation.org/StackTabDrawer리액트 네비게이션expo 호환 라이브러리https://reactnavigation.org/docs/getting-startedNavigator Stack 설치npm instal
12.Navigation (2) : 기본, Stack
https://reactnavigation.org/docs/5.x/stack-navigator수정을 하다보면 안드로이드 와 Ios가 다르게 나타난다.https://reactnavigation.org/docs/5.x/stack-navigatorhttps
13.Navigation (3) : Tab
공식문서 : https://reactnavigation.org/docs/5.x/bottom-tab-navigator설치 : 공식문서상의 npm install @react-navigation/bottom-tabs@^5.x 로 1차 시도 하였으나 오류발생그래서 n
14.Chat App (1) : 기본설정
firebase 접속프로젝트 생성ApiConfig 복사firebase.json 파일 생성
15.Chat App (2) : Auth 화면 구성
TypeScirpt 에러 가. useSafeAreaInsets 관련https://velog.io/@bleach7/useSafeAreaInsets-TypeScript 나. navigator props 관련https://velog.io/@bleach7/n
16.Chat App (3) : Auth 화면 구성
ref 를 props처럼 물려받기 위하여
17.Chat App (4) : Auth 화면 구성
프로필 사진에 카메라 사진은 별도의 컴포넌트로 작성한다.카메라 이미지가 포함된 프로필 이미지를 구하는 것이 아니다.이미지 업로드 기능 : Image Pickerhttps://docs.expo.dev/versions/v45.0.0/sdk/imagepicker/
18.Chat App (5) : Auth 화면 구성
context API 구성로그인한 유저의 uid 값을 받아서 전역 상태 관리
19.Chat App - Part 2 (1)
Stack Navigator 안에 Tab Navigator 가 포함되도록 작성
20.Chat App - Part 2 (2)
firestore 설정 \- firestore 연결: https://firebase.google.com/docs/firestore/quickstart?hl=ko&authuser=0!\[](https://velog.velcdn.com/images/bl
21.Chat App - Part 2 (2)
1. 채널 목록 화면
22.배포하기
빌드를 하기 전에 어플 이름, 버전 등의 정보를 사전에 기입하여야 한다. 공식문서 : https://docs.expo.dev/versions/latest/config/app/name : 어플 이름으로 사용할 이름으로 설정icon : 어플 아이콘 이미지 경로 (