React Native Realm: 안드로이드에서 .objects 가 빈 object로 나오는경우

요즘 회사에서 React Native 😇...  을 하고 있습니다. 

이쯤 되면 도대체 포지션을 어디에 잡아야 할지 잘 모르겠지만 암튼 시키는 건 다합니다. 자바 빼고 ^^

 

회사에서 진행하는 프로젝트가 있었는데, RN을 도입해서 iOS, Android OS 둘다 지원하는 게 어떠할까?라는 생각에

제안하게 되었고, 배포 까지는 꽤나 시간 여유가 있고 기술적으로 앱에 큰 기능이 없기 때문에 RN으로 진행하게 되었습니다.

 

사실은... 계속 해보고 싶었으나 RN을 non-ts로 접근 하기에는 분명 무리가 있고 ts로 접근해야 하는데
typescript을 0.1mg 도 안 해본 사람이라, 그러다가 타 프로젝트의 프런트/백엔드를 TS을 하는 덕에 RN도 시도할 수 있게 된 것 같습니다.

 

물론 🤯  이러다가 뭐하나 제대로 할 줄 아는 게 있을까... 모르겠지만...

 

요즘 프로젝트 셋업은 개발이라고 하기도 뭐하게 cli 1줄로 기초 셋업이 되기 때문에 아주~편~해진 것 같습니다. 

제가 옛날~에 js 포기했던 게 package.json부터 손보라고 해서 에라 하고 던졌던 기억이....

 

뭐 React 자체는 싫어하지만 리 엑트의 컴포넌트라던가, Hook이라던가 개념은 알고 있어서 문서 읽으면서 따라오는 건 문제가 없었다만,

1차적인 UI, 기능 제작은 가능한데 Redux을 잘 사용 하기는 이런 건 아직 어려운 것 같습니다.

-> 전체 상태변화는 zustand을 쓰기로 했습니다. 이쪽이 더 간결하고 쉬워서....

 

 

여하튼 위에는 간략하게 최근 이야기고, 아래는 오늘 겪은 일

 

---

 

프로젝트 구성:

React Native + React navigation + React Native Realm

 

코드:

(실제 코드를 들고 올 수는 없으니  대충 작성했으니 이해해주세요! 🤪  이걸 보시는 당신이 저보다 고수입니다...!!!)

import Realm from 'realm';

const BeerPocket = {
	name: "beer_pocket",
	primaryKey: "_id",
	properties: {
		_id: "int",
		name: "string"
		createdAt: "string",
	}
}

interface DBLibraryInterface {
	getDB(): Promise<Realm>
	getBeers(name: string): Realm.Results<BeerPocket>
	insertBeer(props: { index: number, name: string })
}

class DBLibrary extends DBLibraryInterface {
	
	async getDB(): Promise<Realm> { return await Realm.open({ schema: [BeerPocket] })}
	async getBeers(name: string): Realm.Results<BeerPocket> {
		const db = await this.getDB();
		return db.objects('beer_pocket').filtered('name == $0', name)
	}
	async insertBeer(props: { index: number, name: string }) {
		const db = await this.getDB();
		db.write( () => {
			db.create('beer_pocket', { _id: props.index, name: props.name, createdAt: Date.now() })
		})
	}
}

const libdb = new DBLibrary()
export default libdb

 

문제:

- getBeers에서 Realm.Results 가 Object {}으로만 실제 값이 있는 상황에도 불구하고 비어있는 값만 반환함

 

테스트:

- iOS: InsertBeer 이후 getBeer에 정상 반환됨

- Android: InsertBeer는 정상 getBeer에 빈(Object {})값이 반환됨

 

---

 

혹시 DB스키마를 엉망이라 realm 자체가 생성안된거 아닐까?

참고로 Realm.defaultPath, Realm.path 로 파일위치를 알수있었습니다.

 

1) iOS 시뮬레이터: path 따고 터미널에서 cd로 이동해서 파일을 구했습니다.

2) Android 에뮬레이터: Android Studio > View > Device File Explorer 에서 /data/data/${packageName}/files/${name}.realm 에서 구했습니다.

참고:
안드로이드는 실제 단말에서 테스트하다가 단말에서는 /data/data 하위 접근이 안된다고해서 시뮬레이터로 옮겼습니다.

 

앱내에 생성된 realm 데이터베이스는 Realm Studio로 조회가 가능하고, insert 까지는 정상적으로 돌아간 것으로 확인

 

탐색 2:

답은 구글링이다 ㄱ

😱😱😱😱😱😱

 

 

첫 번째 찾은 것, 제대로 선언해라

Realm returns blank when not using React Native Debugger · Issue #2500 · realm/realm-js

 

extends로 Realm.Object을 더 명확히, static schema로 더 class 화된 Realm Object을 만들라고 답변이 있길래 (저 질문답변말고도 기타 등등)

이것도 그래서 수정하긴 함 ( 위 코드는 수정전 코드)

 

응 안됌~ 

 

 

그리고 그다음에 찾은 것...

처음에는 구글 이전에 내 코드가 문제인 줄 알고 문서 보고 지지고 볶고 수정하고 다시 만들고 했는데..

 

realm.object() returning array with empty object · Issue #3710 · realm/realm-js

 

1) react-native-reanimated 가 hermes을 사용함

2) 하지만 realm은 hermes 지원 안 함.

 

그래서 react-native-reanimated을 일단 삭제하고 다시 빌드하니 정상적으로 DB쿼리값이 반환됨 🥳 

 

---

... 는 이걸 알기까지 3시간이 걸렸다!

 

 

 

혹시 저와 같은 함정에 걸리실 분 있을까 봐 작성해봅니다.

잘 모르니까 어떻게 검색해야하는지 함정에도 잘 빠지는것같습니다, 언제쯤 해야 검색도 고수가될련지..

어짜피 코드는 제가 안짜고 구글ㅇㅣ..

 

물론 다른 해결책은 있겠지만.. 오늘 해결안 방법은 이겁니다.

 

 

 

다만, 아직 프로젝트 초기라 애니메이션이나 이런 부분은 감안하지 않았지만,

애니메이션을 넣은다면 이야기가 나올 것 같은데 그건 그때 가서 생각해보도록 해봅시다...

 

 

오늘의 삽질 이야기 끝