본문 바로가기

react native12

[React Native] 통합 앱에서 프로파일별 controller와 model을 분리하는 기준 React Native 통합 앱에서 여러 프로파일을 하나의 코드베이스로 관리하다 보면 화면은 비슷한데 데이터 구조와 처리 방식이 조금씩 다른 경우가 많습니다. 처음에는 화면 컴포넌트 안에서 if 문으로 처리할 수 있습니다. 하지만 프로파일이 늘어나면 UI 파일이 데이터 변환, API 응답 정리, 화면 상태 판단까지 모두 떠안게 됩니다.처음에는 화면에서 바로 데이터를 맞추는 방식이 빠르게 느껴질 수 있습니다. 그런데 실제로 정리해보면 통합 앱에서는 화면이 공통 자산이 되기 때문에, 화면 안에 프로파일별 예외가 쌓이는 순간 유지보수가 어려워지는 것 같습니다.이럴 때 controller와 model을 분리하면 공통 UI의 조건문을 줄일 수 있습니다. model은 화면에서 사용할 데이터 형태를 정의하고, con.. 2026. 5. 20.
[React Native] 통합 앱에서 프로파일별 화면 접근을 route guard로 제한하는 방법 React Native 통합 앱에서 여러 프로파일을 하나의 코드베이스로 관리하면, 앱마다 접근 가능한 화면이 달라질 수 있습니다. 어떤 앱은 지도 화면을 사용하고, 어떤 앱은 리스트만 사용하고, 또 다른 앱은 설정 화면이나 외부 링크 기능을 제한해야 할 수도 있습니다.처음에는 메뉴에서 버튼만 숨기면 충분할 것 같았습니다. 하지만 정리해보니 화면 접근 경로는 메뉴 클릭만 있는 것이 아니었습니다. 딥링크, 푸시 알림 클릭, 내부 navigation 호출, 이전 화면 복원 같은 경로로도 특정 화면에 접근할 수 있습니다.그래서 프로파일별로 허용된 route를 정의하고, 화면 이동 전에 한 번 더 확인하는 route guard 구조가 필요합니다. 이 글에서는 React Native 통합 앱에서 enabledRou.. 2026. 5. 20.
[React Native] 통합 앱에서 일반 기기와 태블릿 화면을 함께 최적화하는 기준 React Native 앱을 만들 때 처음에는 일반 스마트폰 세로 화면만 보고 레이아웃을 잡기 쉽습니다. 저도 화면을 정리할 때 가장 먼저 떠올리는 기준은 보통 휴대폰 세로 화면이었습니다. 하지만 통합 앱처럼 여러 프로파일을 하나의 코드베이스에서 운영하면 화면 조건이 생각보다 훨씬 복잡해집니다.일반 휴대폰 세로 화면뿐 아니라 일반 휴대폰 가로, 태블릿 세로, 태블릿 가로, Fold나 대화면 기기까지 함께 고려해야 하기 때문입니다. 처음에는 단순히 너비를 꽉 채우면 될 것처럼 보이지만, 실제로 정리해보면 화면 최적화는 그렇게 단순하지 않습니다.화면 최적화는 단순히 width: '100%'를 넣는 문제가 아닙니다. 화면 크기에 따라 콘텐츠 최대 너비를 제한할지, 버튼을 한 줄로 둘지 줄바꿈할지, 리스트와 상.. 2026. 5. 19.
[React Native] 통합 앱에서 selectedProfiles로 빌드 대상을 관리하는 방법 React Native 통합 앱에서 selectedProfiles로 빌드 대상을 관리하는 방법React Native로 여러 앱을 하나의 코드베이스에서 운영하다 보면 빌드 시간이 길어지고, 테스트 범위도 금방 커집니다. 이때 모든 프로파일을 매번 빌드하기보다 selectedProfiles 같은 빌드 옵션으로 이번 작업에 필요한 앱만 선택하는 구조를 둘 수 있습니다.처음에는 빌드 옵션 하나만 추가하면 충분할 것 같았는데 정리해보니 selectedProfiles는 단순히 빌드 대상을 줄이는 옵션일 뿐, 앱 안에서 접근 가능한 화면이나 권한까지 자동으로 막아주는 기능은 아니었습니다. 이 부분을 구분하지 않으면 생각보다 쉽게 헷갈릴 수 있겠네요.selectedProfiles는 이번 빌드에 어떤 앱을 포함할지 정하.. 2026. 5. 19.
[React Native] 통합 앱에서 프로파일 회귀 테스트를 설계하는 방법 React Native 통합 앱에서 프로파일 회귀 테스트를 설계하는 방법단일 앱일 때는 홈 화면이 열리는지, 주요 버튼이 동작하는지 정도만 확인해도 큰 문제가 없어 보일 수 있지만, 통합 앱에서는 프로파일이 늘어나면 테스트의 기준도 같이 바뀌어야 한다. 여러 앱 프로파일을 하나의 코드베이스에서 관리하면 공통 컴포넌트 하나를 수정했을 뿐인데 특정 프로파일의 초기 화면, 메뉴, 권한 요청, 라우팅이 깨질 수 있기 때문이다.이럴 때 필요한 것이 프로파일 회귀 테스트다. 여기서 회귀 테스트는 예전에 되던 기능이 새 변경 이후에도 그대로 되는지 확인하는 테스트라고 보면 된다.이 글에서는 React Native 통합 앱에서 profile registry, selectedProfiles, route guard, fe.. 2026. 5. 19.
[React Native] 통합 앱에서 profile registry로 여러 앱 설정을 관리하는 방법 React Native 통합 앱에서 profile registry를 관리하는 방법React Native로 여러 앱을 하나의 코드베이스에서 운영하다 보면 가장 먼저 부딪히는 문제가 있다. 앱마다 다른 설정을 어디에 둘 것인가 하는 문제다.앱 이름, 패키지명, 첫 화면, 기능 사용 여부, 권한, 외부 링크, 데이터 소스가 조금씩 다르면 처음에는 if 문 몇 개로도 버틸 수 있지만 프로파일이 늘어나면 어느 순간부터 조건문이 화면 곳곳에 흩어지고, 새 앱을 추가할 때마다 예상하지 못한 화면이 같이 깨지기 쉽다.이럴 때는 profile registry를 별도로 두고, 앱별 설정을 한 곳에서 관리하는 방법이 있다. 처음 구현할 때는 조금 번거로워 보일 수 있지만, 여러 앱을 묶어서 운영할수록 설정의 위치와 검증 방.. 2026. 5. 19.