초보개발자의 소소한 기록

@ List * 5.3 다양한 내비게이터 ** 5.3.1 드로어 내비게이터 --> Drawer 라이브러리 에러로 Pass ** 5.3.2 하단 탭 내비게이터 ** 5.3.3 머티리얼 상단 탭 내비게이터 ** 5.3.4 머티리얼 하단 탭 내비게이터 ** 5.3.5 머티리얼 하단 탭 내비게이터 헤더 타이틀 동기화하기 * 5.4 내비게이션 Hooks ** 5.4.1 useNavigation ** 5.4.2 useRoute ** 5.4.3 useFocusEffect ** 5.5 정리 @ Note 1. Drawer 라이브러리 에러 - 라이브러리 설치 시 에러 (해결 완료) > reference : https://bocoder.tistory.com/66?category=904878 - const Drawer = c..

* React Navigation - Drawer Navigation 설치 시 오류 yarn add @react-navigation/drawer yarn add react-native-gesture-handler react-native-reanimated * Reference : https://reactnavigation.org/docs/drawer-navigator/ # pakage.json ... "dependencies": { "@react-navigation/drawer": "^6.1.8", "react-native-gesture-handler": "^2.1.0", "react-native-reanimated": "^2.3.1", ... } ... * Drawer Navigation 사용을 위해 ..

@ List * 5.1 설치 및 적용하기 ** 5.1.1 의존 패키지 설치하기 ** 5.1.2 라이브러리 적용하기 * 5.2 기본적인 사용법 ** 5.2.1 네이티브 스택 내비게이터 ** 5.2.2 스크린 이동하기 ** 5.2.3 라우트 파라미터 ** 5.2.4 뒤로가기 ** 5.2.5 헤더 커스터마이징하기 @ Note 1. react-navigation 의존 패키지 설치 // 모듈 설치 yarn add @react-navigation/native // 의존 라이브러리 설치 yarn add react-native-screens react-native-safe-area-context - reference : https://reactnavigation.org/docs/getting-started 2. 주요 ..

@ List * 4.3 새 항목 등록하기 * 4.4 할일 완료 상태 토글하기 * 4.5 항목 삭제하기 ** 4.5.1 벡터 아이콘 사용하기 ** 4.5.2 항목 삭제 함수 만들기 ** 4.5.3 항목을 삭제하기 전에 한번 물어보기 * 4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기 ** 4.6.1 Promise가 무엇인가요? ** 4.6.2 AsyncStorage 설치하기 ** 4.6.3 AsyncSotrage의 기본 사용법 ** AsyncStorage 적용하기 * 4.7 정리 @ Note 1. 최대값 반환 내장함수 : Math.max() - todos.length > 0 ? Math.max(...todos.map(todo => todo.id)) + 1 : 1; 2. react-native-..

@ List * 4.1 불변성을 지키면서 객체와 배열 업데이트하기 ** 4.1.1 불변성을 지켜야 하는 이유 ** 4.1.2 배열의 불변성을 지키는 방법 * 4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기 ** 4.2.1 todos 상태 만들기 ** 4.2.2 TodoList 컴포넌트 만들기 ** 4.2.3 TodoItem 컴포넌트 만들기 ** 4.2.4 항목 사이에 구분선 보여주기 ** 4.2.5 완료한 항목에 다른 스타일 적용하기 @ Note 1. 렌더링 성능 최적화 방식이기 때분에 불변성 지킬 것 - 항목 추가 시 : spread 연산자, concat() > const numbers = [0, 1, 2, 3]; const nextnumbers = [...number, 4];..

@ List ** 3.1.5 이미지 사용하기 * 3.2 TextInput으로 사용자 키보드 입력받기 ** 3.2.1 KeyboardAvodingvire로 키보드가 화면을 가리지 않게 하기 ** 3.2.2 useState로 텍스트 상태 값 관리하기 ** 3.2.3 커스텀 버튼 만들기 ** 3.2.4 TextIput에 onSubmitEditing 및 returnKeyType 설정하기 * 3.3 정리 @ Note 1. 스타일링 단위 - ppi (pixel per inch) : 1inch에 몇 px이 들어갈 수 있는지 의미 - dpi (dots per inch) : ppi와 유사하며 인쇄물에서 사용하는 단위 - react native 스타일링 시 크기는 dp 로 설정 > dp (density-independen..

@ List * 3.1 프로젝트 기반 다지기 ** 3.1.1 프로젝트 생성하기 ** 3.1.2 오늘 날짜를 알려주는 DateHead 컴포넌트 만들기 ** 3.1.3 StatusBar 색상 바꾸기 ** 3.1.4 레이아웃 준비하기 @ Result # App.js import React from "react"; import { View, Text, StyleSheet } from "react-native"; import DateHead from "./components/DateHead"; // for IOS StatusBar import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"; import AddTodo from "...

@ List * 2.8 카운터 만들기 ** 2.8.1 UI 준비하기 ** 2.8.2 Counter 컴포넌트에 Props 설정하기 ** 2.8.3 App에서 상태 관리하기 * 2.9 정리 @ Result #App.js import React, { useState } from "react"; import { SafeAreaView, Button, StyleSheet } from "react-native"; import Counter from "./components/Counter"; const App = () => { const [count, setCount] = useState(0); const onIncrease = () => setCount(count + 1); const onDecrease = () ..

* React Native 관련 책이 드디어 출간되어 구매 하였고, 하나씩 따라하며 기초를 다시 한 번 학습하기 위함 * reference : https://book.naver.com/bookdb/book_detail.nhn?bid=21166160 @ List * 2.1 나만의 컴포넌트 만들기 * 2.2 Props * 2.3 defaultProps * 2.4 JSX 문법 * 2.5 StyleSheet로 컴포넌트에 스타일 입히기 * 2.6 Props 객체 구조 분해 할당 * 2.7 useState Hook으로 상태 관리하기 @ Result # App.js import React, { useState } from "react"; import { SafeAreaView, Button } from "react-..

* bug case 1. PC-A 에서 react-native run-android 커맨드 실행 시, 정상적으로 빌드 및 실행 되는 것을 확인함. 2. PC-A 에서 git push 3. PC-B 에서 git clone 4. PC-B 에서 react-native run-android 커맨드 실행 시, 정상적으로 빌드된 후 crash 발생. * 결론은, npm 버전이 달라서 발생한 버그였고 정확하게는 npm 7 에서 발생하는 버그였음 > PC-A npm version : 6.14.15 (node v14.18.1) > PC-B npm version : 7.x.x * error log 를 확인하기 위해, react-native init 으로 새 프로젝트를 생성 후 bug case 를 테스트 했더니 아래와 같이..