expo custom plugin 좌충우돌 typescript 에러

 expo 프로젝트에서 android manifest 파일을 수정해야할 일이 있었다.

그래서 custom plugin 을 만들어보기로 했다.

plugin.ts를 만들어 app.json plugins에 넣으면 에러가 난다. typescript를 제대로 인식하지 못하는 것이다.

expo 기본 프로젝트에서 생성되는 tsconfig.json 파일은 expo/tsconfig.base 이 파일을 상속하는데,

"compilerOptions" 에 "module": "preserve"라고 되어 있다.

이것때문에 루트에 존재하는 app.json에서 해당 ts 파일을 불러올수가 없다.

이것을 "commonjs"로 변경하면 잘 되긴 하는데, 영 찝찝하다.

그래서 prebuild만을 위한 tsconfig.plugin.json 파일을 따로 생성해주고

app.config.ts를 생성해주고 그 상단에서 해당 파일은 tsconfig.plugin.json을 사용하도록 처리해주면 된다.

tsconfig.plugin.json

{

"extends": "./tsconfig.json",

"compilerOptions": {

"module": "commonjs",

"moduleResolution": "node",

"allowJs": true,

"customConditions": null

},

"include": ["app.config.ts", "plugins/**/*.ts"]

}

app.config.ts

import { register } from "ts-node";

register({ project: "./tsconfig.plugin.json" });

import { ExpoConfig } from "expo/config";

export default ({ config }: { config: ExpoConfig }) => {

config.plugins?.push("./path/to/plugin/ts");

return config;

};

이렇게 해주면 해결된다.

** 문제점 발견

이렇게 설정을 해주면 expo install을 할때 문제가 발생한다. 아마 expo install을 하는 과정에서 app.json을 건드리게 되는데 이게 app.config.ts까지 타게 되는데 라이브러리를 설치할때는 commonjs가 아니라 기존의 preserve 로 동작해야하나보다. 

그때는 귀찮지만, app.config.ts의 파일이름을 잠깐 다른걸로 변경해두면 된다.

좀더 엘레강스한 해결법은 못찾았다.

리액트 네이티브 코드푸시 적용하기

리액트 네이티브를 선택하는 이유중 가장 큰 2가지는

• 멀티 플랫폼을 지원한다.
• 코드푸시를 통해 앱스토어의 리뷰를 받지않고도 빠른 업데이트가 가능하다

구글에서 검색해보면 documentation을 번역해놓은게 많지만

처음 접하는 사람은 대략적인 개념정리가 필요한 경우가 많아

내가 공부한 것을 공유하고자 한다.

리액트 네이티브로 어플을 만들게 되면

안드로이드와 ios의 네이티브로 껍데기를 만든 후 그 안에 

자바스크립트/타입스크립트로 리액트를 사용해 로직과 껍데기를 만드는 것이다.

여기서 코드푸시란 

1. 자바스크립트/타입스크립트 부분을 
2. 특정 조건마다 (ex. 어플 실행마다 / 화면 전환 할때마다 등등)
3. 새로 릴리즈된 버전으로 업데이트 하는것이다.

코드푸시는 Microsoft의 appcenter로 들어가게 되었다.

따라서 Microsoft appcenter (https://appcenter.ms/) 에서 서비스가 된다.

https://learn.microsoft.com/en-us/appcenter/distribution/codepush/rn-get-started

공식홈페이지를 보고 설정을 하는게 좋다.

그리고 마지막

multi deployment

이건 조금 많이 고민이 된다.

A/B testing을 위해서라도 유저들을 구분해서 Staging과 Production 릴리즈를 구분해서 설치할 수 있으면 좋을것 같다.

이걸 하는 방법은 2가지가 있는데

• 유저가 Staging / Production 버전을 선택할 수 있게 한다.
• Authenticated된 유저를 Staging 버전을 사용하게 한다.

리액트 코드부분에서 어떤 deployment를 선택할지 설정하는 방법은 좀더 고민해 봐야겠다.

[React native] 화면간 전환, Async Storage 불러오기 (feat. useFocusEffect)

앱을 만들때,

무언가를 로컬로 저장하고 싶으면 

간단한 경우 Async storage를 많이 이용한다.

App
┗ Home Screen
┗ Write Screen

1 2 3 4

type RootStackParamList = {     Home: undefined;     Write: undefined; }

cs

이런 구조의 앱에서 (나는 Native stack navigator를 사용했다.)

1. Write Screen 에서 글을 입력한다.
2. Async Storage 에 저장한다.
3. Home Screen 으로 돌아간다.
4. 업데이트 된 list를 보여준다.

Write에서 글을 작성하고 그걸 Async storage에 저장하는것까지 잘했지만,
Home Screen으로 돌아갔을때 다시 useEffect가 트리거 되지 않아서 고민을 많이 했다.

React Navigation에서 navigate 함수를 사용해
Home screen -> write screen으로 넘어간 경우에는

1

navigate("Write")

cs

Home Screen 위에 Write Screen 이 덮어지게 되고
그 후 Write Screen 에서 Home Screen으로 돌아오더라도 
useEffect가 트리거되지 않는다.

결론부터 말하자면 useFocusEffect를 사용하면 된다.

Hook 이름에서 바로 알수 있지만,
해당 스크린이 Focus를 가지게 되면 트리거 된다.
(처음 띄울때 + 다른 screen 이동 후 다시 돌아올때)

해당 hook안에서 Async Storage를 load 하면 된다.