전체 글 211

iOS App Store 심사 제출 과정

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..

React Native 2026.08.26

React Native | Expo 리엑트네이티브에서 QR 코드 스캔 기능 구현하기

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

React Native 2026.08.10

React Native | Expo 리엑트네이티브에서 백그라운드 GPS 위치 추적 구현하기

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

React Native 2026.08.10

React Native | Expo 리엑트네이티브 푸시알림 A to Z

목표: 안드로이드 실기기에서 푸시 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..

React Native 2026.07.29

React Native | 리엑트 네이티브 스플래시 화면 만들기

목차스플래시 화면이란?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 설정만으로 이미지, 배경색, 크기..

React Native 2026.07.27

테스트 코드 작성 시점

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

테스트 코드 2026.07.07

[Jest] React에서 자주 같이 쓰는 문법

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(); ..

테스트 코드 2026.07.07

[Jest] 비동기 테스트 문법 / Mock 문법

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..

테스트 코드 2026.07.07

[Jest] expect 검증 문법

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({ ..

테스트 코드 2026.07.07

[Jest] 필수로 알아야 하는 Jest 문법

1. 필수로 알아야 하는 Jest 문법1) describe()테스트들을 묶는 그룹이다.describe("validatePhone", () => { // validatePhone 관련 테스트들}); 뜻은:validatePhone 함수에 대한 테스트 묶음 꼭 없어도 테스트는 돌아가지만, 실무에서는 거의 항상 쓴다고함2) test() / it()하나의 테스트 케이스를 작성할 때 쓴다test("010으로 시작하는 11자리 숫자면 null을 반환한다", () => { expect(validatePhone("01012345678")).toBeNull();}); it()도 같은 역할이다.it("010으로 시작하는 11자리 숫자면 null을 반환한다", () => { expect(validatePhone("010..

테스트 코드 2026.07.07