Hweb

(React + Capacitor) Android Signed AAB 빌드 절차

1. Android Studio에서 프로젝트 열기 터미널에서 아래 명령어를 실행하여 Android Studio로 M-BUS 프로젝트를 열고, 자동 실행되는 Gradle Sync가 완료될 때까지 기다립니다.npx cap open android 2. Generate Signed App Bundle 메뉴 진입 Android Studio 상단 메뉴에서 Build → Generate Signed App Bundle or APK... 선택 후, Android App Bundle을 체크하고 Next를 클릭합니다. 3. 기존 Keystore(키스토어) 정보 입력 (★ 중요) Play Console에 기존 등록된 com.metazone.mbus 앱의 업데이트를 위해 반드시 이전에 사용했던 서명 키를 사용해야 합니다...

1. Bundle IDCapacitor appId와 Apple Bundle ID를 동일하게 맞춤Apple Developer → Certificates, Identifiers & Profiles → Identifiers에서 등록App Store Connect 앱 생성 시 같은 Bundle ID 선택2. App Store Connect 앱 정보앱 이름, 기본 언어, 카테고리, 콘텐츠 권한, 연령등급 설정개인정보처리방침 URL 등록앱 개인정보 설문 작성가격 및 사용 가능 여부 설정배포 방식은 일반 사용자용이라 공개출시 방식은 수동 출시로 설정해서 심사 통과 후 바로 공개되지 않게 함3. 앱 개인정보4. 암호화 설정App Store Connect의 앱 암호화 문서에 별도 파일은 업로드하지 않음.대신 iOS의 I..

버스 기사용 앱을 개발하면서 승객의 QR 승차권을 스캔해 탑승 처리를 할 수 있는 기능을 먼저 테스트해봤다.아직 백엔드 API가 없는 상태라 이번에는 다음 범위까지 구현했다.카메라 권한 요청권한 거부 처리QR 코드만 인식QR 데이터 읽기동일 QR 중복 인식 방지스캔 성공/실패 피드백성공/실패별 진동 패턴결과 확인 후 다시 스캔권한 재요청이 불가능한 경우 설정 화면 이동추후 탑승 처리 API를 붙일 수 있는 구조 준비1. QR 스캔 라이브러리 선택React Native에서 QR 스캔을 검색하면 여러 라이브러리가 나온다.예를 들면:react-native-camerareact-native-qrcode-scannerreact-native-vision-cameraexpo-camera 이번 프로젝트는 Expo 기반..

이번에 버스 기사용 앱을 개발하면서 기사의 스마트폰 GPS를 이용해 버스의 실시간 위치를 추적하는 기능을 테스트해봤다.요구사항은 다음과 같았다.기사가 운행 시작을 누르면 위치 추적 시작앱을 백그라운드로 내려도 위치 추적 유지다른 앱을 사용해도 위치 추적 유지운행 중지를 누르면 위치 추적 일시 중단다시 운행 시작을 누르면 위치 추적 재개운행 종료를 누르면 위치 추적 종료추후 수집한 위치는 백엔드 API로 전송아직 백엔드가 없는 상태라 이번에는 앱에서 위치를 정상적으로 수집할 수 있는지까지 구현하고 실기기로 테스트했다.1. 필요한 패키지 설치Expo 프로젝트에서 위치 기능과 백그라운드 작업을 위해 다음 패키지를 설치했다. npx expo install expo-location expo-task-manager..

목표: 안드로이드 실기기에서 푸시 1건 받기!expo-notifications + Expo Push Service + Firebase FCM 조합으로 테스트해보겠다~ 구조 이해앱 ↓ Expo Push Token 발급Expo Push Service ↓Android: FCMiOS: APNs ↓사용자 기기 Firebase는 Android로 푸시를 전달하는 FCM 설정 때문에 필요하고, 앱 코드에서는 우선 expo-notifications를 사용하면 됌. Expo가 FCM과 APNs 차이를 상당 부분 감싸준다. 시작하기1단계: 현재 앱 식별자 확인app.json 또는 app.config.ts에서 Android package를 확인한다.{ "expo": { "android": { "packa..

목차스플래시 화면이란?expo-splash-screen 설치app.json 설정안드로이드 Adaptive Icon 설정_layout.tsx — 라우팅 구조index.tsx — 초기 리다이렉트 처리전체 흐름 정리 1. 스플래시 화면이란?스플래시 화면은 앱이 처음 실행될 때 잠깐 표시되는 로딩 화면이다.앱이 JavaScript 번들을 불러오고, 폰트나 이미지 같은 리소스를 준비하는 동안 빈 화면이 보이면 어색하니까, 그 시간 동안 보여주는 화면임.2. expo-splash-screen 설치 bashnpx expo install expo-splash-screen이 라이브러리가 해주는 것:앱이 준비되기 전까지 스플래시 화면을 유지시켜줌준비 완료되면 자동으로 사라짐app.json 설정만으로 이미지, 배경색, 크기..

1. 유틸 함수는 만들자마자 테스트예를 들어formatTimevalidatePhonecalculateDiscountformatPricegetReservationStatus 이런 건 화면 없이도 테스트할 수 있으니까 함수 작성 직후 테스트 쓰는 게 좋다.함수 작성→ 테스트 작성→ 통과 확인→ 사용처에 적용 2. 컴포넌트는 기능 단위 완료 후 테스트예를 들어 로그인 폼이면이메일 입력비밀번호 입력유효성 메시지로그인 버튼API 요청성공/실패 처리 이 정도가 구현된 뒤 테스트 작성.로그인 폼 개발 완료→ 주요 케이스 테스트 작성→ 테스트 통과→ QA 전달 3. 버그가 발견되면 테스트부터 추가예를 들어 QA에서 이런 버그가 나왔다고 해보면휴대폰번호 앞뒤 공백이 있으면 정상 번호인데도 실패 처리됨 그러면 바로 코드부..

1. React 테스트에서 자주 같이 쓰는 문법이건 Jest 자체보다는 React Testing Library 문법이다.컴포넌트 테스트로 넘어가면 자주 봄import { render, screen } from "@testing-library/react"; 1) render()컴포넌트를 테스트 화면에 렌더링한다.render(); 2) screen.getByText()화면에서 특정 텍스트를 찾는다.expect(screen.getByText("로그인")).toBeInTheDocument(); 3) screen.getByRole()버튼, input 같은 역할 기준으로 요소를 찾는다.expect(screen.getByRole("button", { name: "로그인" })).toBeInTheDocument(); ..

1. 비동기 테스트 문법API 호출 함수, Promise 함수 테스트할 때 필요하다.1) async/await가장 많이 쓰는 방식임test("사용자 정보를 가져온다", async () => { const result = await fetchUser(); expect(result.name).toBe("인영");}); 2) resolvesPromise가 성공하는지 확인할 때 쓴다await expect(Promise.resolve("success")).resolves.toBe("success"); 3) rejectsPromise가 실패하는지 확인할 때 쓴다.await expect(Promise.reject(new Error("fail"))).rejects.toThrow("fail"); 처음에는 async..

1. 필수 matcher 문법matcher는 toBe, toEqual, toBeNull 같은 검증 함수이다.1) toBe()문자열, 숫자, boolean처럼 단순한 값 비교할 때 많이 쓴다.expect(formatTime(60)).toBe("01:00");expect(1 + 2).toBe(3);expect(true).toBe(true); 입문 단계에서 제일 많이 씀.2) toEqual()객체나 배열 비교할 때 쓴다.expect({ name: "인영", role: "frontend" }).toEqual({ name: "인영", role: "frontend",}); 배열도:expect([1, 2, 3]).toEqual([1, 2, 3]); 주의할 점:expect({ name: "인영" }).toBe({ ..