경력만 많은 초보개발자

✔ ionic build

- 빌드하기 (웹 리소스 컴파일)

- 이 명령어는 build 폴더에 최신 웹 파일을 생성합니다.

- 앱의 UI를 수정했을 때

- 웹 코드 변경 후 모바일 앱에 반영하기 전

✔ ionic cap sync

- 빌드하기 

- capacitor.config.ts나 capacitor plugins의 변경사항을 native 프로젝트에 반영합니다.

- 웹 코드를 변경한 후 앱에 반영할 때

- 플러그인 추가/삭제 후

- capacitor.config.ts 파일을 수정했을 때

✔ ionic cap add android

- Capacitor Android 플랫폼 추가

✔ ionic cap update android

- Capacitor Android 플랫폼 업데이트

✔ ionic cap open android

- Project 를 Android studio로 열기

✔ ionic serve 

- Server 실행

Guideline 2.1 - Information Needed

The app uses the AppTrackingTransparency framework, but we are unable to locate the App Tracking Transparency permission request when reviewed on iOS 17.6.1.

Next Steps

Explain where we can find the App Tracking Transparency permission request in the app. The request should appear before any data is collected that could be used to track the user.

If App Tracking Transparency is implemented but the permission request is not appearing on devices running the latest operating system, review the available documentation and confirm App Tracking Transparency has been correctly implemented.

If your app does not track users, update your app privacy information in App Store Connect to not declare tracking. You must have the Account Holder or Admin role to update app privacy information.

해설.

앱은 AppTrackingTransparency 프레임워크를 사용하지만 iOS 17.6.1에서 검토할 때 AppTrackingTransparency 권한 요청을 찾을 수 없습니다.

다음 단계
앱 추적 투명성 권한 요청을 앱에서 찾을 수 있는 위치를 설명하라. 요청은 사용자를 추적하는 데 사용될 수 있는 데이터가 수집되기 전에 나타나야 한다.

App Tracking Transparency가 구현되었지만 최신 운영 체제를 실행하는 장치에 사용 권한 요청이 나타나지 않는 경우 사용 가능한 문서를 검토하고 App Tracking Transparency가 올바르게 구현되었는지 확인합니다.

앱이 사용자를 추적하지 않으면 앱스토어 커넥트에서 앱 개인정보를 업데이트하여 추적을 선언하지 않는다. 앱 개인정보를 업데이트하려면 계정 보유자 또는 관리자 역할이 있어야 한다.

요약 해보면 :

AppTrackingTransparency 프레임워크를 사용하는 것을 발견했지만, 앱 추적 투명성(App Tracking Transparency) 권한 요청 팝업이 표시되지 않았다는 내용입니다.

위치추적 알람이 뜨도록 수정후 ~ 승인되면 추가로 작성.

수정후 ~ 승인 Pass

배포 신청중 자주 볼수있는 메세지를 정리하고자한다.

Guideline 1.5 - Safety

1.5 Developer Information People need to know how to reach you with questions and support issues. Make sure your app and its Support URL include an easy way to contact you; this is particularly important for apps that may be used in the classroom. Failure to include accurate and up-to-date contact information not only frustrates customers, but may violate the law in some countries or regions. Also ensure that Wallet passes include valid contact information from the issuer and are signed with a dedicated certificate assigned to the brand or trademark owner of the pass.

Issue Description

원인.

개발자들에게 연락하는 방법을 알아야 한다고 한다.

우선 조치 해봤습니다.

Url : 개인정보 처리 방침주소를 적고 에 상단에 연락처를 추가하고 재심사 요청해봤다.

* 맨 아래 연락처가 있었음에도 해당 심사에 걸리고 맨위에 적어놓으니 Pass 네요.

iOS 설정 파일 수정

iOS 플랫폼의 설정 파일을 수정해야 합니다.

1) App Tracking Transparency 설정

iOS 14 이상에서는 사용자 추적 권한을 요청해야 합니다. 이를 위해 Info.plist 파일에 NSUserTrackingUsageDescription 키를 추가해야 합니다. Xcode에서 다음과 같이 설정합니다.

• Xcode에서 Info.plist 파일을 엽니다.
• 다음을 추가합니다:

<key>NSUserTrackingUsageDescription</key>
<string>이 앱은 맞춤 광고를 제공하기 위해 사용자 추적을 사용합니다.</string>

3) SKAdNetwork Identifier 추가

AdMob은 SKAdNetwork를 통해 광고의 효과를 측정합니다. Info.plist에 SKAdNetworkIdentifier 항목을 추가해야 합니다. AdMob에서 제공하는 최신 SKAdNetworkIdentifier 목록을 확인하여 추가합니다.

https://developers.google.com/admob/ios/quick-start?hl=ko#import_the_mobile_ads_sdk

SKAdNetwork의 역할

Apple은 iOS 14에서 앱 트래킹 투명성(ATT, App Tracking Transparency) 정책을 도입하면서 사용자 개인 정보 보호를 강화했습니다. 이 정책에 따라 앱은 사용자의 광고 추적 권한을 명시적으로 요청해야 하며, 사용자가 이를 거부할 경우 기존의 IDFA(Identifier for Advertisers)를 통해 광고 성과를 추적하는 것이 어렵습니다.

이를 대신하여 Apple은 SKAdNetwork라는 프레임워크를 제공하여, 사용자가 추적을 거부하더라도 광고 네트워크가 특정 광고 캠페인의 성과를 추적할 수 있도록 합니다. SKAdNetwork는 사용자의 개인 정보를 보호하면서도, 광고주의 광고 성과 분석이 가능하도록 설계되었습니다.

2. ios/App/App/Info.plist 파일을 열어 다음과 같은 내용을 추가합니다:

<key>GADApplicationIdentifier</key>
<string>YOUR_ADMOB_APP_ID</string>

AdMob SDK 초기화 코드 추가

광고가 적절히 로드되고 초기화되도록 코드에서 AdMob SDK를 초기화하는 것이 중요합니다. Capacitor를 사용하는 경우, capacitor.config.json에 appId를 설정해야 하며, 앱 초기화 시 AdMob 초기화 코드를 추가해야 합니다.

Xcode에서 빌드 설정 확인

Xcode에서 iOS 프로젝트를 빌드하기 전에 다음 사항을 확인하세요.

• Deployment Target: 프로젝트의 Deployment Target이 iOS 9.0 이상으로 설정되어 있는지 확인하세요.
• Bitcode 설정: Enable Bitcode 설정을 확인하세요. AdMob이 Bitcode를 지원하는 경우 이를 활성화할 수 있습니다.

2. Firebase 설정

- 사이트에서 사이트 등록후 

GoogleService-Info.plist 을 ios/App/App 아래 복사한다.

AppDelegate.swift 파일에 Firebase 초기화를 추가합니다.

import UIKit

import FirebaseCore

import GoogleMobileAds

@UIApplicationMain
@objc class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:
    [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        GADMobileAds.sharedInstance().start(completionHandler: nil)

        FirebaseApp.configure()

        return true
  }
}

pod 추가 (xcode 14.2사용중에 버전이 안맞아 다음과같이 설정함.

  # pod 'FirebaseCore'

  # pod 'FirebaseAnalytics'

  pod 'FirebaseCore', '~> 9.0'

  pod 'FirebaseAnalytics', '~> 9.0'

App.tsx 추가

import { initializeApp } from 'firebase/app';

import { getAnalytics } from 'firebase/analytics';

const firebaseConfig = {

apiKey: "YOUR_API_KEY",

authDomain: "YOUR_PROJECT_ID.

firebaseapp.com",

projectId: "YOUR_PROJECT_ID",

storageBucket: "YOUR_PROJECT_ID.appspot.com",

messagingSenderId: "YOUR_MESSAGING_SENDER_ID",

appId: "YOUR_APP_ID",

measurementId: "YOUR_MEASUREMENT_ID" };

// Firebase 초기화

const app = initializeApp(firebaseConfig);

const analytics = getAnalytics(app);

아래 사이트를 확인해보면 코드가있다.

https://firebase.google.com/docs/ios/installation-methods?hl=ko

1. Homebrew 설치

Homebrew는 터미널 환경에서 명령어 한 줄로 프로그램을 설치 및 제거할 수 있는 Mac 용 패키지 관리 애플리케이션으로 맥북 사용자라면 반드시 설치해야 하는 필수 애플리케이션입니다.

설치시 다음과 같이 터미널에서 실행

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

패스워드 입력후 기다리면 설치가 완료됨..

brew --version 

으로 설치된것을 확인

환경변수가 등록이안될시

# zshrc에 homebrew path 추가

$ echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc

# zshrc 반영

$ source ~/.zshrc

Homebrew 사용하기

brew search <패키지_이름>

wget 찾기

brew search wget

패키지 설치

brew install wget

설치목록 확인

brew list

정보확인

brew info wget

패키지 업데이트

brew upgrade wget

패키지 삭제

brew uninstall wget

명령어 확인

brew

프로그램 설치 관련

• brew update : brew를 최신 버전을 업데이트
• brew search <패키지명> : 설치 가능한 프로그램 검색
• brew install < 패키지명>[@버전] : 프로그램 설치[@특정버전]
• brew upgrade <패키지명> : 패키지 업그레이드
• brew upgrade : 모든 패키지 업그레이드

정보 확인

• brew list : 설치된 프로그램 목록
• brew info <패키지명> : 패키지 정보 보기
• brew outdated : 업그레이드 필요한 프로그램 찾기

삭제

• brew cleanup <패키지명> : 최신 버전 이외의 버전 삭제
• brew uninstall <패키지명> : 특정 패키지 삭제

시스템 상태 확인

• brew doctor : Homebrew 설치 상태 점검

Homebrew 제거하기

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"

1. iOS 플랫폼 추가

ionic capacitor add ios

ionic cap sync

*폴더 이동 후 

cd ios/App

pob install

* Xcode에서 프로젝트 열기

ionic cap open ios

- 이 명령어는 Xcode를 열고 프로젝트를 자동으로 로드합니다.

5. 빌드 및 실행

- Xcode의 상단 메뉴에서 Product > Build를 선택하여 프로젝트를 빌드합니다. 빌드가 성공적으로 완료되면, iOS 디바이스 또는 시뮬레이터에서 실행할 수 있습니다.

참고: 실제 디바이스에서 실행하려면 개발자 프로필이 설정된 장치가 필요합니다.

위 단계들을 따라 설정하면 Ionic React 프로젝트를 Xcode에서 성공적으로 실행할 수 있습니다.

배너 광고를 대상이며 예제를 중점으로 적었습니다. 

1. 필수 설치사항 

- capacitor-community/admob

npm install @capacitor-community/admob

참고 사이트 : https://www.npmjs.com/package/@capacitor-community/admob

2. AdBanner.tsx 작성

- 편리한 관리 차원에서 새로운 파일작성후 불러다쓰게끔 

2. 광고 영역 및 초기화 App.tsx (부분소스)

다음과같이 Ionic React 기준 으로 Admob 를 추가하기위해서는 특별히 복잡한기능은 없다.

- 안드로이드일경우

Andriod Studio 에서 오픈이후 

AndroidManifest.xml 에 다음과 같이 추가가 필요.

<application
    .....
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-xxxxxxxxxxxxxxx~xxxxxxxxxx"/>

예시로 

> npm install @capacitor/filesystem

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: schoolMeals@0.0.1
npm ERR! Found: @capacitor/core@5.7.7
npm ERR! node_modules/@capacitor/core
npm ERR!   @capacitor/core@"^5.7.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @capacitor/core@"^6.0.0" from @capacitor/filesystem@6.0.0
npm ERR! node_modules/@capacitor/filesystem
npm ERR!   @capacitor/filesystem@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:

위와같이 오류가 났을때 capacitor/core 버전을 올릴수없다면

아래와 같이 하위 버전 설치할수있게끔한다.

> npm install @capacitor/filesystem@^5

1. Ionicons

* IONIC 에서 제공하고있는 아이콘 이다.

https://ionic.io/ionicons

아이콘을 사용하기 예시)

2. react-icons

* 

https://react-icons.github.io/react-icons/

1. 설치

> npm i react-calendar

2. 소스

달력부분만 소스를 정리하면 다음과 같다.

기본으로했을때 달력 css 가 보기 힘들수있기때문에 일부 수정이 필요할수있다.

3. 기본옵션 (자주 쓸만한것)

3-1. calendarType

사용해야 하는 달력 유형입니다.

'gregory, 'hebrew', 'islamic', 일 수 있습니다 .

'iso8601'. "gregory"또는 로 설정하면 "hebrew"주의 첫날이 일요일로 변경됩니다. 

으로 설정하면 "islamic"주의 첫날이 토요일로 변경됩니다. 

"islamic"또는 로 설정하면 "hebrew"주말이 금요일부터 토요일까지 표시됩니다.

3-2. formatDay

기본으로 사용할경우 날짜가 1일 2일 3일 이런식으로 나올수있다.

변경해주려면 달력에서 다음과 같이 옵션을 지정해줄필요가 있다.

4. 참고 URL

해당 소스 또는 옵션을 알아보기 위해서는 다음 GIT에서 확인할수있다.

https://github.com/wojtekmaj/react-calendar