초보개발자의 소소한 기록

* createMaterialTopTabNavigator 를 이용하여 상단 탭 구성 후 앱 실행 시, 최초 rendering 에서 Tab.Screen 전체가 표시되지 않고, 다른 탭으로 이동 후 돌아오면 정상적으로 표현됨 # 원인 react-native 에서 제공되는 SafeAreaView 를 사용했었는데, navigation 사용 시에는 react-native-safe-area-context 에서 제공하는 SafeAreaView를 사용해야 더욱 안정적이라고 했고, 변경하여 적용하였으나 동일한 현상이 발생함 * reference : https://reactnavigation.org/docs/handling-safe-area ++++ 최종적으로 react-native-pager-view 의 v5.4.15 ..

* 앱에서 axios 를 통해 브라우저를 읽어오려고 할 때 Warning 발생 # 경고 내용 WARN Possible Unhandled Promise Rejection (id: 0): ReferenceError: Can't find variable: Buffer http://10.0.2.2:8081/index.bundle? ... # 원인 axios를 통해 브라우저를 읽어오는 비동기 처리 시, Buffer 가 필요하다고 함 # 해결 아래와 같이 Buffer 라인을 추가해 주면 해결 import cheerio from 'cheerio-without-node-native'; import axios from 'axios'; global.Buffer = global.Buffer || require('buffe..

* Typescript 템플릿 설치 후 실행 시, ios 에서 에러 발생 # 에러 내용 ... N/A: version "default -> N/A" is not yet installed. ... You need to run "nvm install default" to install it before using it. ... xcodebuild[44462:710271] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple..

@ 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장 학습 시 업데이트 예정

* TypeScript 템플릿 설치 시 에러 발생 npx react-native init LearnTypeScript --template react-native-template-typescript # 에러 내용 ... error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-template-react-native-template-typescript: Not found". ... error This module isn't specified in a package.json file. info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this c..

@ 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..

* Firebase 의 auth() 를 사용하여 인증을 요청할 때, email 과 password 값을 빈 값으로 호출 시 android 에서만 에러 발생 Given String is empty or null ... import auth from '@react-native-firebase/auth'; // 로그인 export function signIn({email, password}) { return auth().signInWithEmailAndPassword(email, password); } // 회원가입 export function signUp({email, password}) { return auth().createUserWithEmailAndPassword(email, password); } ..

@ 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..