본문 바로가기

분류 전체보기60

React Native 통합 앱 profileId 조건문 지우기 (Controller와 Model 분리) 여러 프로필을 하나의 코드베이스로 관리하는 React Native 통합 앱을 개발하고 운영하다 보면 꼭 마주치는 문제가 있습니다. 화면 레이아웃은 거의 비슷한데, 프로필마다 데이터 구조나 API 응답 필드, 처리 방식이 조금씩 다른 경우입니다.저의 경우도 처음에는 귀찮아서 화면 컴포넌트 안에서 if (profileId === '...') 같은 조건문으로 대충 때우며 빠르게 개발했습니다. 하지만 프로필이 서너 개 이상 늘어나기 시작하니까 UI 파일 하나가 데이터 변환, API 응답 정규화, 화면 상태 판단까지 전부 떠안으면서 코드가 아주 난장판이 되더군요.나중에 제가 다시 보면서 고치려고, 화면 컴포넌트의 복잡도를 낮추고 유지보수하기 편하게 Controller와 Model을 분리하는 기준을 정리해 둡니다... 2026. 5. 20.
React Native 통합 앱 프로파일별 화면 접근 제어 (Route Guard 구현하기) React Native로 여러 앱(프로파일)을 하나의 코드베이스로 묶어서 운영하다 보면, 앱마다 보여줘야 하는 화면과 막아야 하는 화면이 달라지는 경우가 자주 생깁니다. 예를 들어 어떤 앱은 지도 기능이 필요하고, 어떤 앱은 공지만 보여주면 되는 식입니다.처음에는 단순히 메뉴에서 버튼만 숨기면 끝날 줄 알았습니다. 하지만 실제로 서비스를 운영해보니 사용자가 화면에 진입하는 경로는 생각보다 훨씬 다양하더군요.메뉴 및 탭 버튼 클릭딥링크(Deep Link)를 통한 외부 진입푸시 알림(Push Notification) 클릭내부 코드 내 navigation.navigate 직접 호출앱 재실행 시 기존 화면 상태 복원메뉴만 대충 숨겨두면, 메뉴에는 없는 화면인데 딥링크나 푸시 알림을 타고 비활성화된 화면으로 쓱 .. 2026. 5. 20.
[React Native] 멀티 프로파일 통합 앱 태블릿 및 반응형 화면 최적화 기준 정리 React Native로 앱을 개발하다 보면 처음에는 보통 스마트폰 세로 화면만 보고 레이아웃을 잡기 마련입니다. 저의 경우도 레이아웃을 정리할 때 가장 먼저 떠올리는 기준은 휴대폰 세로 화면이었습니다.하지만 하나의 코드베이스로 여러 프로파일(플랫폼 내 서비스 계열)을 동시에 운영하는 통합 앱을 만들다 보면 화면 조건이 생각보다 훨씬 복잡해집니다. 일반 휴대폰 세로/가로 모드는 물론이고, 태블릿 세로/가로, Fold 같은 대화면 기기까지 전부 하나의 코드로 대응해야 하기 때문입니다.처음에는 단순히 width: '100%'만 주면 알아서 늘어날 것 같지만, 실제로 운영해 보면 화면 최적화는 그렇게 만만하지 않습니다. 콘텐츠 최대 너비를 제한할지, 버튼을 한 줄로 둘지 줄바꿈할지, split-pane(리스트.. 2026. 5. 19.
[React Native] 통합 앱에서 selectedProfiles로 빌드 대상을 관리하는 방법 React Native로 여러 앱을 하나의 코드베이스에서 몰아서 관리하다 보면 빌드 시간이 말도 못하게 길어집니다. 한 놈만 수정했는데 엉뚱한 앱까지 같이 빌드되느라 피드백이 늦어지기도 하죠.저의 경우 이번 작업에 필요한 앱만 선택해서 빌드하려고 selectedProfiles라는 빌드 옵션을 주고 관리하고 있습니다. 처음에는 단순한 빌드 스위치 정도로 생각했는데, 운영하다 보니 화면 접근 권한이나 라우팅 문제와 얽혀서 헷갈리기 쉽더군요. 자꾸 까먹어서 잊어버리지 않게 실무 기준으로 정리해 둡니다.내가 겪은 문제와 원인하나의 프로젝트에서 여러 앱을 빌드할 때 기준 없이 관리하면 아래와 같은 상황이 터집니다.release 빌드에서는 딱 하나의 앱만 필요한데, debug에서는 여러 앱을 동시에 확인해야 함.특.. 2026. 5. 19.
React Native 통합 앱 프로파일 회귀 테스트 설계 및 적용하기 React Native로 여러 개의 앱 프로파일을 하나의 코드베이스에서 관리하는 통합 앱 구조를 운영하다 보면, 꼭 예상치 못한 곳에서 버그가 터지곤 합니다.공통 컴포넌트나 모듈 하나를 가볍게 수정했을 뿐인데, 엉뚱한 프로파일의 첫 화면이 깨지거나 뜬금없이 권한 요청 팝업이 튀어나오는 식입니다. 처음에는 "빌드만 통과하면 문제없겠지" 싶지만, 빌드는 문법 오류나 의존성 문제만 잡아줄 뿐 각 앱별 화면 정책까지 보장해주지 않습니다.이럴 때 필요한 게 예전에 잘 되던 기능이 이번 수정 후에도 그대로 잘 도는지 확인하는 프로파일 회귀 테스트입니다. 매번 손으로 다 눌러볼 수는 없으니, 나중에 제가 다시 보면서 적용하려고 실무 기준을 정리해 둡니다.회귀 테스트가 부족할 때 겪는 문제들통합 앱 환경에서 프로파일별.. 2026. 5. 19.
React Native 통합 앱에서 여러 앱 설정(Profile Registry) 관리하기 React Native 통합 앱에서 여러 앱 설정(Profile Registry) 관리하기React Native로 소스 하나에서 여러 개의 앱을 묶어서 빌드하고 운영하다 보면, 가장 골치 아픈 게 앱별 설정 관리입니다. 앱 이름, 패키지명, 첫 화면, 사용하는 기능이 조금씩 다 다른데, 처음에는 if 문 몇 개로 버티다가 앱이 늘어나면 코드가 누더기가 되고 예상치 못한 화면이 같이 깨지기 쉽습니다.저의 경우도 예전에 특정 앱에서만 보여야 하는 메뉴가 다른 앱에 튀어나오거나, 새 앱을 추가했는데 첫 화면이 빈 화면으로 뜨는 삽질을 한 적이 있습니다.이럴 때는 Profile Registry(프로파일 레지스트리)를 별도로 두고, 앱별 설정을 한 곳에서 데이터로 관리하면 유지보수가 훨씬 편해집니다. 나중에 제가.. 2026. 5. 19.

티스토리툴바