초보개발자의 소소한 기록

@ List * 12.1 타입스크립트가 적용된 리액트 네이티브 프로젝트 만들기 * 12.2 타입스크립트 빠르게 배우기 ** 12.2.1 기본 타입 ** 12.2.2 함수 타입 ** 12.2.3 interace ** 12.2.4 배열 타입 ** 12.2.5 Type Alias ** 12.2.6 Generic ** 12.6.7 더 알아보기 * 12.3 타입스크립트로 컴포넌트 작성하기 ** 12.3.1 Props 사용하기 ** 12.3.2 useState 사용하기 ** 12.3.3 useRef 사용하기 ** 12.3.4 useReducer 사용하기 * 12.4 타입스크립트로 Context API 사용하기 * 12.5 타입스크립트로 react-navigations 사용하기 ** 12.5.1 라이브러리 설치하기 ..

@ 12장 ~ 16장 학습 완료 후, 10장 ~ 11장 학습 시 업데이트 예정

@ List * 9.6 포스트 수정 및 삭제 기능 구현하기 ** 9.6.1 재사용할 수 있는 모달 만들기 ** 9.6.2 사용자에게 수정 및 삭제 물어보기 ** 9.6.3 포스트 삭제 기능 구현하기 ** 9.6.4 포스트 설명 수정 기능 구현하기 * 9.7 EventEmitter로 다른 화면 간 흐름 제어하기 ** 9.7.1 EventEmitter3 설치 및 적용하기 ** 9.7.2 포스트 작성 후 업데이하기 ** 9.7.3 포스트 삭제 후 목록에서 제거하기 ** 9.7.4 리팩토링 하기 ** 9.7.5 포스트 수정 후 업데이트하기 * 9.8 설정 화면 만들기 * 9.9 Firesotre 보안 설정하기 * 9.10 Splash 화면 만들기 ** 9.10.1 안드로이드에 Splash 화면 적용하기 ** ..

@ List * 9.5 사용자 프로필 화면 구현하기 ** 9.5.1 Firestore 데이터 조회할 때 조건 추가하기 ** 9.5.2 포스트 조회 함수 리팩토링하기 ** 9.5.3 Firestore에서 색인 추가하기 ** 9.5.4 Profile 컴포넌트 만들기 ** 9.5.5 그리드 뷰 만들기 ** 9.5.6 페이지네이션 구현하기 ** 9.5.7 커스텀 Hook을 작성해 컴포넌트 리팩토링하기 ** 9.5.8 포스트 열기 ** 9.5.9 내 프로필 화면 구현하기 @ Note 1. default parameter 문법 - 파라미터가 주어지지 않았다면 기본값으로 빈 객체 {} 를 사용하도록 함 - 설정하지 않을 시 구조 분해 과정에서 오류 발생 export async function getPosts({use..

@ List ** 9.3.4 Firestore에 포스트 등록하기 * 9.4 포스트 목록 조회하기 ** 9.4.1 PostCard 커포넌트 만들기 ** 9.4.2 Firestore로 포스트 목록 조회하기 ** 9.4.3 FeedScreen에서 getPost 호출 후 FlatList로 보여주기 ** 9.4.4 페이지네이션 및 시간순 정렬하기 @ Note 1. FeedScreen 외부에 renderItem 선언 - FlatList에서 보여지는 컴포넌트의 개수가 많을 경우, 컴토넌트 내부에서 renderItem을 렌더링할 때마다 매번 renderItem을 생성함 - 외부에 renderItem 을 한 번만 만들고 재사용하는 것이 성능 면에서 좋음 - 다른 방법으로 useMemo 사용 가능 2. Firesestor..

@ List * 9.1 탭 화면 구현하기 * 9.2 로그인 상태 유지하기 * 9.3 포스트 작성 기능 구현하기 ** 9.3.1 탭 중앙에 버튼 만들기 ** 9.3.2 업로드할 사진 선택 또는 카메라 촬영하기 ** 9.3.3 포스트 작성 화면 만들기 @ Note 1. 사용자 정보 인증 - 앱 종료 시에도 사용자의 로그인 상태를 유지하기 위해 일반적으로 AsyncStorage에 인증 정보를 저장하는 방법 사용함 - 하지만 Firebase로 인증을 구현했기 때문에, Firebase 의 auth().onAuthStateChanged 함수를 통해 인증 관련 작업 가능 2. 업로드할 사진 선택창 구현 - iOS 는 사용자에게 선택지를 줄 때 주로 ActionSheetIOS를 사용하여 UI 구현함 - android ..

@ List * 8.5 이미지 업로드하기 ** 8.5.1 이미지 선택 기능 구현하기 ** 8.5.2 사용자 기본 이미지 설정하기 ** 8.5.3 Firebase Storage로 이미지 업로드하기 * 8.6 정리 @ Note 1. react-native-image-picker 라이브러리 $ yarn add react-native-image-picker $ npx pod-install - {launchCamera} : 사용할 이미지를 카메라로 바로 촬영할 때 사용 - {launchImageLibrary} : 사진첩에서 이미지 선택할 때 사용 > OS별 callback 로그 값 // iOS LOG {"assets": [{"fileName": "F25D0...539.jpg", "fileSize": 242106,..

@ List * 8.3 Firebase에 회원 정보 등록하기 * 8.4 UserContext 만들고 로그인 사용자 분기 처리하기 @ Note 1. createContext API 의 사용 - reference : https://ko.reactjs.org/docs/context.html#reactcreatecontext 2. 로그인 관련 setUser를 호출 하는 시점 - 프로필이 등록된 계정으로 로그인했을 때 - Welcome 화면에서 프로필 정보를 등록했을 때 - 앱을 새로 켜서 로그인 상태가 유지됐을 때 3. user 상태에 따른 화면 분기 처리 - SignIn 및 Welcome 화면에서 MainTab 화면으로 전환 시, navigation 또는 push 로 하면 안됨 - 스택에 기존 로그인 또는 프..

@ List ** 8.2.5 Firebase로 회원 인증하기 ** 8.2.6 오류 예외 처리하기 ** 8.2.7 사용자 프로필 Firebase에 담기 @ Note 1. React Native Firebase 회원 인증 - Firebase에서 제공하는 함수들을 컴포넌트에 바로 사용하지 않고 임의의 함수를 따로 만들어서 호출함 - 함수를 감싸는 작업을 한 번 하면 추후 firebase를 사용하지 않고 다른 방식으로 인증할 경우에도 코드를 쉽게 전환 가능 > reference : https://rnfirebase.io/auth/usage 2. loading 을 통한 상태 관리 - async/await 문법을 사용한 비동기 처리 시, loading & setLoading 을 적절히 사용 3. 오류 처리 - e ..

@ List * 8.2 회원 인증 기능 구현하기 ** 8.2.1 회원 인증을 위한 UI 준비하기 ** 8.2.2 인풋 상태 관리하기 ** 8.2.3 인풋에서 키보드 리턴 처리하기 ** 8.2.4 컴포넌트 분리하기 @ Note 1. Firebase 로그인 제공업체 목록 2. rest 연산자, spread 연사자 - [BorderedInput] 의 파라미터 부분에서는 rest 연산자를 사용하고, JSX 부분에서는 spread 연산자를 사용해 Props로 받아온 모든 키와 값을 TextInput 컴포넌트의 Props로 지정함 > rest 연산자 : 파라미터나 값을 선언하는 부분에서 사용 const object = { a: 1 , b: 2, c: 3 }; const { a, ...rest } = object; ..