초보개발자의 소소한 기록

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

# 업로드 키 vs 앱 서명 키 업로드 키 인증서 : 생성한 .abb 파일을 Google Play Console에 업로드 할 때, 구글에서 검증을 위해 사용하는 것 앱 서명 키 인증서 : 구글에서 최종적으로 서명하는 키 즉, 개발자가 업로드 키로 서명 후 .abb 를 Google Play Console 에 업로드 --> 구글이 앱 서명 키로 자동 변경 후 스토어 출시 # 업로드 키 및 앱 서명 키로 나눠지 이유 개발자가 업로드 키를 분실할 경우를 대비해서, 중간에 검증단계를 넣어 앱 서명 키의 키 스토어를 구글에서 보관하는 기능을 추가 # 외부 연동 시 Firebse 연동 시는 앱을 업로드 하기 위한 것이 아니라, 출시된 앱과 연동을 위한 것이기에 앱 서명 키 인증서의 지문을 등록해야 함 오류 케이스 테..

개발 완료 후 Google Play Store 출시를 위해, release용 인증서를 생성하고 확인함 1. /android/app 위치에서 아래 커맨드 실행 # location : [project]/android/app $ keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 2. 아래 질문들에 답한 후, 마지막에 'y' 입력 3. 아래와 같이 [project]/android/app 위치에 my-upload-key.keystore 가 생성됨 4. gradle.properties 파일에 코드를 추가 # [project]..

출시를 위해 Google Play Console 에 App 등록 시, 기존에는 .apk 파일이 등록되었는데 2021년 8월 부터 Abb 파일로만 등록이 가능하다고 한다. * reference : https://android-developers.googleblog.com/2021/06/the-future-of-android-app-bundles-is.html # location : [project] $ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle # location : [project]/android $ ...