AsyncStorage
참고블로그
암호화 되지 않은 비동기적인 데이터를 관리하는 key-value 저장 시스템이다.
앱 전역에서 사용 가능. LocalStorage 대신 사용해야 한다.
install : npm install @react-native-async-storage/async-storage
useEffect(() => {
// 현재의 최신 todos를 AsyncStorage에 저장
const saveTodos = async () => {
await AsyncStorage.setItem("todos", JSON.stringify(todos)); // todos는 배열 또는 객체임 // 배열이나 객체는 asyncstorage 집어 넣기 전에 JSON파일로 변환시켜서 저장시켜줌.
};
if (todos.length > 0) saveTodos();
}, [todos]);
useEffect(() => {
const getData = async () => {
const resp_todos = await AsyncStorage.getItem("todos"); // todos 배열
const resp_cat = await AsyncStorage.getItem("category");
setTodos(JSON.parse(resp_todos));
setCategory(resp_cat);
};
getData();
}, []);
- 배열이나 객체는 asyncstorage 집어 넣기 전에 JSON파일로 변환시켜서 저장시켜줌. (3 Line 참조)
- ⭐️ 배열이나 객체는 storage에 집어넣기 전에 stringify가 필요하다.
- async await 안에서 무조건 AsyncStorage를 사용하여 비동기화 처리 해야함.
- useEffect로 조건부로 비동기 실행하게하기.
Firebase
✅ Firebase는 계속해서 메소드 내용 업데이트하여 언제든 꺼내 볼 수 있도록 만들기.
Firebase 공식 문서 링크
구조
Collection > Doc > Field
- Collection : Doc만을 가질 수 있고, 값을 넣을 수 없음.
⭐️ 폴더개념이며, 여러 파일을 담는 구조다. (Doc === File) - Doc : Field를 가질 수 있고, 하위에 Collection을 가질 수 있음.
⭐️ (파일 개념) - Field : Doc에 데이터들이
key : value로 있는 곳.
⭐️ (파일의 상세 데이터들이 있는 곳)
꼭 알고 가야하는 내용
localStorage가 모든 데이터를string형식으로 저장한다.- 객체를 저장하려면, 문자열이나 JSON으로 변환해야 한다.
const book = {
name:’1984’,
author:’George Orwell’
} // 객체 자료구조로 이루어진 book 변수.
window.localStorage.setItem(‘books’, JSON.stringify(book);
// key -> 'books', value -> '객체 자료구조로 이루어진 book변수를 넣고, JSON.stringify(book)을 이용하여 JSON으로 변환.'
--------------------------------------------------
// getItem()으로 데이터를 불러오면?
window.localStorage.getItem(‘books’) // 위에서 key값으로 'books' 지정.
“{“book”:”1984”,”author”:”George Orwell”}” // JSON형식으로 key:value가 들어감을 확인/..
--------------------------------------------------
// JSON형식으로 된 데이터를 다시 재사용하기 위해서,
// JSON.parse() 메서드를 사용하여 객체로 변환해야 한다.
JSON.parse(window.localStorage.getItem(‘books’));setItem()
localStorage에key : value를 저장한다.
window.localStorage.setItem('book', 'The Lord of the Rings');
getItem()
// key : 'book', value : 'The Lord of the Rings',getItem()
- 주어진 key로 로컬 저장소(Firebase DB)에 접근합니다.
window.localStorage.getItem(‘book’); // 도출 값 : The Lord of the RingsremoveItem()
- 해당 메서드는
key : value를 제거합니다.
window.localStorage.removeItem(‘book’);
// 'book' 과 'The Lord of the Rings'이 삭제됨.clear()
- 해당 메서드는 호출될 때 localStorage의 모든 것을 삭제합니다.
window.localStorage.clear();length
- localStorage의 길이를 반환합니다.
window.localStorage.length; // returns an integer
key()key()
- localStorage의 해당 위치에 있는 key를 반환한다. 해당 메서드는 하나의 매개변수와 인덱스가 필요함.
window.localStorage.key(index);getDoc()
- 하나의 데이터를 추가하기.
- addDoc()과 같이 쓰이는데, 새롭게 생성된 데이터의 고유 id값을 참조하기 위해서이다.
// 데이터 추가하기 (addDoc) / async 생략되어있음. 참고해야함.
const docRef = await addDoc(collection(db, '컬렉션명'), 추가할 데이터)
// db 데이터 서버에 접속하여 접근하고싶은 '컬렉션명'을 적고, 추가할 데이터를 입력.- firestore에 추가되면서 자동으로 생성된 아이디를 참조하기 위해서 getDoc()을 사용한다.
// 추가한(생성한) 데이터 id값 부여. (getDoc) / async 생략되어있음. 참고해야함.
const _doc = await getDoc(docRef)
_doc.id // 생성된 고유 id. 새로 추가(생성)한 데이터의 고유 id 부여.getDocs()
- 모든 데이터 가져오기.
// 모든 데이터 가져오기 (getDocs) / async 생략되어있음. 참고해야함.
const movieListData = await getDocs(collection(db, 'moive'))
// db라는 데이터베이스 서버에 접속하여 Collection에 있는 'movie' Doc를 선택. movie Doc의 모든 데이터 내용을 가져오기. getData()
onSnapshot()
updateDoc()
JSON.parse()
- JSON형식으로 된 데이터를 다시 재사용하기 위해서, JSON.parse() 메서드를 사용하여 객체로 변환해야 한다.
JSON.parse(window.localStorage.getItem(‘books’));
✨상위 #꼭_알고가야하는_내용 Code 참조할 것.
React Native
배열 연산자
- RN에서 inline style로 여러 스타일 속성을 주고 싶을 때, 사용.
// React Native
const styles = StyleSheet.create({
square: {
background: "blue",
width: 100,
height: 100
},
round: {
borderRadius: 10
}
});
// 이렇게
const RoundView = () => <View style={[styles.square, styles.round]} /> <KeyboardAvoidingView>
모바일에서 input창을 누르면, 키보드가 나오게 되는데 이 때, 해당 태그를 쓰지 않으면 키보드 높이만큼 화면을 가려버리기 때문에 요소들이 보이지 않게 된다.
해당 태그로 감싸주게 되면, 내부에 있는 요소들이 키보드 크기만큼 밀려 올라옴.
Javascript
?? 연산자
a.k.a Nullish coalescing operator
undefined나 null값 들어왔을때 default value 셋팅하려고 사용한다.
nullish 병합 연산자 ??는 왼쪽 피연산자가 null or 이면 오른쪽 피연산자를 underfined를 반환. 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자다.
이것은 왼쪽 피연산자가 or 뿐 아니라 거짓 값이면 오른쪽 피연산자를 반환하는 논리 OR(||) 연산자의 특별한 경우로 볼 수 있음.
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
- 배움에는 끝이 없다.