Ionic Framework

출처

• Ionic Framework 개발 환경 설정 및 설치 [아이오닉 프레임워크] : 네이버 블로그

환경설정

set ANDROID_SDK_ROOT=C:\Android\sdk-tools-windows
set PATH=%PATH%;C:\Server\node-v18.20.3;%APPDATA%\npm;%ANDROID_SDK_ROOT%\platform-tools;%ANDROID_SDK_ROOT%\emulator

ionic 설치

D:\project>npm install -g ionic@5.4.16
D:\project>ionic -v
5.4.16

프로젝트 생성

D:\project>ionic start myApp tabs

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: Angular
√ Preparing directory .\myApp - done!
√ Downloading and extracting tabs starter - done!

Installing dependencies may take several minutes.

  ──────────────────────────────────────────────────────────────────

     Ionic Studio, a powerful, local editor made with love by Ionic

                  Lightning fast app creation
         Quickest & easiest way to get started with Ionic

        Learn more: https://ion.link/studio

  ──────────────────────────────────────────────────────────────────


> npm.cmd i
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead

added 1195 packages, and audited 1196 packages in 2m

220 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
> git.exe init
Initialized empty Git repository in D:/project/myApp/.git/
> git.exe add -A
warning: in the working copy of '.browserslistrc', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.editorconfig', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.eslintrc.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/extensions.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/settings.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'angular.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'ionic.config.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'karma.conf.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.component.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/explore-container/explore-container.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab1/tab1.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab2/tab2.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tab3/tab3.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs-routing.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.module.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/tabs/tabs.page.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/assets/shapes.svg', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/environments/environment.prod.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/environments/environment.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/global.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/main.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/polyfills.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/test.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/theme/variables.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/zone-flags.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.app.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.spec.json', LF will be replaced by CRLF the next time Git touches it
> git.exe commit -m "Initial commit" --no-gpg-sign
Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'xxx@DESKTOP-784ARID.(none)')
[WARN] Error encountered during commit. Disabling further git operations.

[INFO] Next Steps:

       - Go to your newly created project: cd .\myApp
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Run your app on a hardware or virtual device: https://ion.link/running-docs

실행

D:\project>cd myApp

D:\project\myApp>ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[ng] - Generating browser application bundles (phase: setup)...
[ng] √ Browser application bundle generation complete.

capacitor 기본 패키지 설치

D:\project\myApp>npm install -g @capacitor/core@5.1.1
D:\project\myApp>npm install -g @capacitor/cli@5.1.1
D:\project\myApp>capacitor --version
5.1.1

capacitor/android 패키지 설치

D:\project\myApp>npm install -g @capacitor/android@5.1.1

android

D:\project\myApp>npx cap add android
√ Adding native android project in android in 47.32ms
√ add in 48.01ms
[warn] sync could not run--missing www directory.
[success] android platform added!
Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/basics/workflow

[info] Opening Android project at: android.

cap init

D:\project\myApp>npx cap init
[?] What is the name of your app?
    This should be a human-friendly app name, like what you'd see in the App Store.
√ Name ... myApp
[?] What should be the Package ID for your app?
    Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in
    reverse domain name notation, generally representing a domain name that you or your company owns.
√ Package ID ... com.example.app
√ Creating capacitor.config.ts in D:\project\myApp in 7.19ms
[success] capacitor.config.ts created!

Next steps:
https://capacitorjs.com/docs/getting-started#where-to-go-next
[?] Join the Ionic Community! 💙
    Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more.
√ Create free Ionic account? ... yes
[?] Would you like to help improve Capacitor by sharing anonymous usage data? 💖
    Read more about what is being collected and why here: https://capacitorjs.com/telemetry. You can change your mind at
    any time by using the npx cap telemetry command.
√ Share anonymous usage data? ... yes

Thank you for helping to make Capacitor better! 💖
Information about the data we collect is available on our website: https://capacitorjs.com/telemetry

빌드

D:\project\myApp>npm run build

> myApp@0.0.1 build
> ng build

√ Browser application bundle generation complete.
√ Copying assets complete.
- Generating index html...20 rules skipped due to selector errors:
  :host-context([dir=rtl]) .ion-float-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-end:dir(rtl) -> Unknown pseudo-class :dir
√ Index html generation complete.

Initial chunk files                   | Names                   |  Raw size | Estimated transfer size
main.5780a7f2819da0c5.js              | main                    | 418.61 kB |               110.08 kB
polyfills.a945b0249cb630b5.js         | polyfills               |  34.70 kB |                11.25 kB
styles.d2b228d0a7e34779.css           | styles                  |  28.79 kB |                 4.43 kB
runtime.3f52e205fd467571.js           | runtime                 |   4.73 kB |                 2.27 kB

                                      | Initial total           | 486.84 kB |               128.03 kB

Lazy chunk files                      | Names                   |  Raw size | Estimated transfer size
polyfills-core-js.c76198334f717402.js | polyfills-core-js       |  94.03 kB |                28.56 kB
2885.07914c80a2400934.js              | -                       |  73.73 kB |                14.07 kB
3506.f1bc6225762d05be.js              | -                       |  55.68 kB |                 7.39 kB
2348.f47b57c1870919b7.js              | -                       |  47.08 kB |                 5.74 kB
7720.29d793ddce51db35.js              | -                       |  41.80 kB |                 9.39 kB
9344.3c79e54f9b487dd0.js              | -                       |  41.08 kB |                 5.70 kB
7076.59ff91c7b2168949.js              | -                       |  38.45 kB |                 6.87 kB
5222.ff26a67661322112.js              | -                       |  35.56 kB |                 6.43 kB
4591.e7a7265e81e3da53.js              | -                       |  28.50 kB |                 5.72 kB
8477.5a1d7782cb7ad812.js              | -                       |  28.23 kB |                 5.55 kB
2560.0a7bc99cfe318ca9.js              | -                       |  27.97 kB |                 5.26 kB
441.d6c6dc38fe064a81.js               | -                       |  27.09 kB |                 6.89 kB
5197.ec55c9b963a8f10e.js              | -                       |  24.99 kB |                 5.26 kB
8193.ec42552ea5af8b55.js              | -                       |  24.39 kB |                 4.44 kB
2075.fdd43d8e56169f84.js              | -                       |  24.18 kB |                 5.30 kB
6433.4151df5b6f30dbcd.js              | -                       |  24.17 kB |                 6.03 kB
8814.01c6630f830c5e72.js              | -                       |  23.18 kB |                 4.39 kB
4463.3b528b013cb14d92.js              | -                       |  22.29 kB |                 3.87 kB
5949.0d2694bbb759106c.js              | -                       |  20.80 kB |                 4.18 kB
3814.192ed711c121bbb4.js              | -                       |  20.78 kB |                 3.59 kB
common.28ef6e9c0b579e2e.js            | common                  |  20.53 kB |                 6.11 kB
2415.7fb0ecad5cc2bd2d.js              | -                       |  20.14 kB |                 5.07 kB
9977.b1441e2758751932.js              | -                       |  19.56 kB |                 1.98 kB
4406.801dc3b596d0a01b.js              | -                       |  19.07 kB |                 3.39 kB
polyfills-dom.bf542500b6fca113.js     | polyfills-dom           |  18.48 kB |                 5.16 kB
8066.c17ca0f6e80ad25b.js              | -                       |  16.70 kB |                 3.26 kB
8314.4818f467b9405d39.js              | -                       |  15.03 kB |                 3.14 kB
3511.266e06f47f10d808.js              | -                       |  14.59 kB |                 2.61 kB
1293.edd386430352426a.js              | -                       |  13.62 kB |                 4.41 kB
3162.808b0fc5ca2f047e.js              | -                       |  12.34 kB |                 2.50 kB
5712.dee2db82c57c5d6a.js              | -                       |  12.28 kB |                 3.89 kB
2375.cc91884e7539b704.js              | -                       |  11.85 kB |                 3.05 kB
8584.32115f49a90f7457.js              | -                       |  11.85 kB |                 2.42 kB
8970.d976f88aac373b61.js              | -                       |  11.81 kB |                 4.05 kB
4699.01733b3942afbe92.js              | ios-transition-js       |  10.68 kB |                 2.73 kB
6840.17839ae9fd6315cc.js              | -                       |  10.40 kB |                 2.31 kB
7372.ce92827f3ad2c2b7.js              | -                       |  10.03 kB |                 2.68 kB
1459.55be0475961bfcff.js              | -                       |   9.78 kB |                 3.15 kB
5100.6eba1730ffd58dd4.js              | -                       |   9.08 kB |                 1.53 kB
6024.129ca0127de0423c.js              | -                       |   7.25 kB |                 1.36 kB
7428.c1c7998cfe4d68c5.js              | -                       |   7.22 kB |                 2.19 kB
8805.51bf5a1b0007a860.js              | -                       |   6.42 kB |                 1.61 kB
4171.ca2e493f5a58fedf.js              | -                       |   6.22 kB |                 1.56 kB
7030.cf5128ce3d43bfdf.js              | -                       |   5.68 kB |                 2.04 kB
2144.5d46fa3641b801f2.js              | ios-transition-js       |   5.34 kB |                 2.08 kB
8361.6999f086673987db.js              | input-shims-0314bbe5-js |   5.04 kB |                 1.92 kB
1102.f4f7b64d666ca729.js              | -                       |   4.27 kB |                 1.53 kB
1049.3b9123fb26df3c32.js              | -                       |   4.24 kB |                 1.18 kB
5887.98b91cb4ef896dd6.js              | -                       |   3.37 kB |                 1.14 kB
964.a047a0655bd3ad37.js               | -                       |   3.17 kB |               969 bytes
9013.ebee29c37be87a93.js              | -                       |   2.88 kB |                 1.08 kB
6521.d6c81fd9c1411df5.js              | -                       |   2.29 kB |                 1.11 kB
4183.515f99e4c38e2301.js              | -                       |   1.85 kB |               761 bytes
5695.66247865f4658b0e.js              | tabs-tabs-module        |   1.80 kB |               662 bytes
7356.911eacb1ce959b5e.js              | index-79b30591-js       |   1.65 kB |               753 bytes
7240.6140dc51b67080fd.js              | -                       |   1.44 kB |               507 bytes
4711.e3500c3b84a19d85.js              | tab1-tab1-module        |   1.20 kB |               568 bytes
5113.fb59a4c1330a649d.js              | tab3-tab3-module        |   1.20 kB |               568 bytes
5378.fa069c1798e166e8.js              | tab2-tab2-module        |   1.20 kB |               569 bytes
1577.d89a56c29ce4c421.js              | -                       |   1.14 kB |               636 bytes
7179.80391eb100990080.js              | md-transition-js        |   1.07 kB |               488 bytes
3810.ad6dd10d2e425b4f.js              | status-tap-17122cea-js  | 528 bytes |               330 bytes

Build at: 2024-07-05T14:43:19.299Z - Hash: fe605ccf22b29b8d - Time: 2807ms

capacitor 동기화

D:\project\myApp>npx cap sync android
√ Copying web assets from www to android\app\src\main\assets\public in 428.78ms
√ Creating capacitor.config.json in android\app\src\main\assets in 687.10μs
√ copy android in 440.24ms
√ Updating Android plugins in 2.44ms
√ update android in 24.39ms
[info] Sync finished in 0.57s

안드로이드 스튜디오 실행

D:\project\myApp>npx cap open android
[info] Opening Android project at: android.