EXPO -> React Vite 로 리펙토링 (추후 방향성)

여러가지 이것저것의 이유로 블로그 작성이 뜸했고 (변명), 꽤나 심오한 문제로 인해 프로젝트 아키텍쳐가 변경되었기 때문에 이제와서 글을 작성하게 되었다. 핵심적인 내용은 React-Native 기반의 EXPO 에서 React Vite 로 넘어오기로 결정하였고, 현재 '앱' 의 출시는 상대적으로 어려워 질 것 같다는 점이다.

만약 EXPO 나 React native 검색을 통해 여기까지 찾아오게 되었다면 EXPO 사용은 다시한번 고민해봐야 할 것임을 장담한다 ...

---

0. EXPO 에서 React Vite 로 변경된 이유

초기 프로젝트 설계 단계에서 반응형 웹을 통해 웹과 앱에서의 UI/UX를 조절할 수 있었기 때문에, 전체적인 방향성을 웹앱(Web App) 형태로 잡게 되었다. 또한, 프론트엔드 개발 인력이 부족하여 Swift나 Android Studio와 같은 네이티브 언어로 각각 개발하기에는 무리가 있었기 때문에, 아이폰과 안드로이드(갤럭시)에서 모두 사용할 수 있도록 한 번의 개발로 대응 가능한 서드파티 도구인 EXPO를 활용하기로 결정하였다. 하지만 알림서비스 개발을 이어가는 중에 다음과 같은 이유에 방향성을 다시 잡는 회의를 거치게 되었다.

1. 실제 푸시 알림 기능은 에뮬레이터를 사용할 수 없다. 반드시 실제 기기로만 사용이 가능하다. (프론트 개발을 담당한 팀원은 모두 안드로이드 폰 & 윈도우 사용자였고, 백엔드 개발을 담당하고 있는 필자의 경우 아이폰 & 맥북 사용자였기 때문에 불가피하게 필자가 프론트까지 개입해야 했다.)
2. 필자가 사용하는 EXPO GO 의 버전은 SDK 52 인데, 공식 documentation 을 보면 SDK 53 부터는 알림 기능이 삭제되고, 네이티브에서 개발해야 한다고 경고문을 띄웠다.
3. EXPO 를 통해 개발한 앱을 실제 사용자가 사용할 수 있게 배포하기 위해선 아이폰, 안드로이드 사용자 모두 개발자 계정이 필요하다.

이로 인한 문제점을 가지고 있었기 때문에 더 이상 EXPO 로 개발하기엔 무리가 있다는 판단을 하였다. 

---

1. 변경된 이후의 프로젝트 방향성

여전히 웹앱 형태의 방향성을 고려하고 있다. 하지만 한번의 개발을 통해 두 마리의 토끼를 잡을 수 없다고 판단, React Vite 기반의 웹을 1차적으로 개발 완료 한 뒤, React native 를 활용하여 앱으로 확장해 나가기로 하였다. React Vite 와 React native 의 경우 모두 JavaScript 기반이기 때문에 비즈니스 로직, 함수, 상태관리 그리고 라우팅 개념이 비슷하다. 따라서 DOM 사용, 컴포넌트, CSS 파일 정도만 변경하면 될 것이라고 판단한다.

---

2. 푸시알림 -> SSE + Web Push, Service Worker

현재 EXPO 를 사용하였을 경우에는 Push Token 을 통해 사용자의 알림 기능 동의 여부를 판단, 동의했을 경우 해당 토큰값을 기준으로 알림을 보내게 된다. 하지만 웹의 경우 그 작동 방식이 다르다. 웹에서 알림을 받기 위해서 두가지 방식을 혼용한 하이브리드 방식을 활용할 계획이다. 이유는 다음과 같다.

1. 앱은 백그라운드 에서도 작동한다. 이 말은 앱을 실행중이지 않을 경우에도 푸시 알림을 보낼 수 있다는 것.
2. SSE 는 브라우저가 열려있을 경우에만 알림을 수신할 수 있음.
3. 따라서 웹에서 백그라운드에 있을 경우 알림을 보내기 위해선 OS 에서의 알림을 받을 수 있는 방식을 활용해야 한다는 것.
4. OS 단에서 알림을 받기 위해선 Web Push + Service Worker 방식을 활용해야 함.
5. 하지만 Web Push + Service Worker 의 방식은 SSE 방식 보다는 상대적으로 느림. 
6. SSE 는 "항상 열린 연결" 을 통해 알림을 바로 전달하는 반면 Web Push + Service Worker 의 경우 "중간 서버를 거쳐 요청-응답" 하는 과정을 거치는 방식이기 때문임.
7. 결과적으로 브라우저가 연결되어 있을 경우에는 SSE 를 활용, 브라우저가 연결되어 있지 않을 경우 Web Push + Service Worker 를 활용한다. (하이브리드 방식)

종합적인 흐름도는 다음과 같다.