electron으로 데스크탑 앱 배포를 한바퀴 겪어봤으니, 이제 react native로 모바일 앱에 도전해보자.

만들 것은 단순한 도장판 앱. 이번에도 내가 쓰려고 만들 것. (앱스토어에 도장판이라고 치면 아무것도 안나오더라고..)

처음에는 이전에 만들던 미미메모를 모노레포로 만들어서 데스크탑 앱/모바일 앱을 하나의 레포에 넣으려고 했는데, 아래와 같은 이유로 포기했다.

서로 다른 빌드 환경

node api에 웹팩 번들러를 쓰는 electron, expo와 메트로 번들러를 쓰는 react native..
환경이 달라도 너무 다르다. 루트에서 모든 빌드를 해결하는 깔끔하고 멋진 모습을 상상했는데 현실은 루트 데브패키지가 터져나가려고 한다.

그리고 새삼 생각해보건대, 데스크탑 앱에서 쓰던 모듈이 모바일에서 그대로 실행될지도 의문이다...
기기별 분기처리를 해서라도 쓸 수는 있겠지만 그러면 공통 모듈로 쓰는 이유가 있나?

기껏해야 css나 공유할 수 있을 것 같은데, 단순 디자인시스템만 공통으로 쓸거면 그냥 스토리북을 채용하는게 더 나았을 것.

결론적으로, 서로 너무 다른 환경이기 때문에 모노레포를 채용하는 건 의미가 없는 짓 같다는 생각이 자꾸 들었다.

내가 둘 다 익숙한 개발자였다면 시도해봤겠지만..
현재 둘다 이제 세팅부터 시도해보는 입장이니, 까다로운 구성을 일부러 가져갈 필요는 없다고 생각했다.

차라리 간단한 앱을 빠르게 만들어서 애자일 과정을 한바퀴 돌려보자.

초기 세팅

구조가 뭔가..바뀌었다?

1년전쯤 리액트 네이티브 할때랑 구조가 많이 바뀐 것 같은데..??
뭔가 넥스트처럼 됐다..?
공식문서를 일단 한번 훑고 시작해야겠다.

안에 뭐가 이렇게 많아

리액트도 첫 화면에 뭐가 잡다하게 들어있긴 했다만 expo로 시작하니 컴포넌트 폴더와 앱 폴더가 꽉꽉 차있다..........
하나하나 자꾸 에러 뜨는 엑스포에 현타가 올 즈음...

reset-project.js 가 들어있다??

역시나!!!
보니까 실행하면 기존에 들어있던 것들을 싹 없애준다!!

node ./scripts/reset-project.js

nativewind 세팅

1년사이 리액트 네이티브에서도 테일윈드처럼 쓸 수 있는 css 라이브러리가 나왔다고 한다!! 야호!!
내가 제일 싫어하던 style개끼는 꼴을 이제 안봐도 된다 ㅠㅠ~~

그냥 공식에서 하란대로 tailwind.config.js 넣고 타입 설정 해주고 한 것밖에 없어서 딱히 쓸게 없군요.

어쨌던 대략적인 초기 세팅은 끝났으니, 이제 본격적으로 개발해주면 된다.

작업 정리

해야 할 일은 다음과 같음.
목표는 5월 내에 모든 작업을 마치고 배포까지 진행하기!
할 수 있을 것인가...

• 기존 정보 storage에 저장 및 불러오기
• 도장판 퍼블리싱
  • 도장판 만들기 모달
    • 최소 7개, 최대 365개
    • 유형 포도알 or 커스텀 선택 가능
    • 제목 설정 가능
    • 도장판 최대 30개. 위에 인덱스로 계속 쌓임
  • 포도알 도장판
  • 이미지를 불러오는 커스텀 도장으로 사용하기
  • 도장 찍을 때, 도장판 완료시 애니메이션

파이어스토어 연결을 할까 했는데, 처음 보는 앱에서 구글 로그인을 하라고 하면 나같아도 안 할것같음. 🤔
우선 내부 스토리지를 이용합시다.

영어로 정식 명칭은 stacker라고 하는데.. 뭔가 한국 도장판과는 느낌이 다른 것 같다. 일단 앱 출시시 키워드에는 stacker를 넣긴 하겠지만, 정식 명칭은 mimi-stamp로.