[App] Ionic framework 설정

2022. 12. 2. 10:51개발/Ionic framework

Android app 을 제작하기 위해서

Ionic framework 환경을 구성한다.

 

Windows 10 환경에 Ionic 5 버전을 설치한다.


Java SE jdk 설치

https://www.oracle.com/java/technologies/downloads/#java8-windows

 

Download the Latest Java LTS Free

Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.

www.oracle.com

1. 위 링크에 접속해 Java jdk 를 설치

jdk 란 java development kit 로

바이너리 형식으로 제공되는 소프트웨어 개발 키트다.

해당하는 exe파일을 다운 받고 설치한다.

2. windows 에서 시스템 검색

3. 고급 시스템 설정

4. 고급->환경 변수

5. 시스템 변수 에서 Path 선택 후 편집

6. 새로 만들기 클릭 후 찾아보기 

7. 설치된 Java 경로를 따라 bin 폴더 선택 후

폴더 찾아보기 창 확인

환경 변수 편집 창 확인

8. 사용자 변수 새로 만들기

9. 변수 값 -> 디렉터리 찾아보기 -> jdk폴더 선택 (bin 선택 아님 주의)

10. 위와 같이 생성되면 

환경 변수 창 확인

시스템 속성 창 확인

11. 윈도우 재부팅

java -version
echo %JAVA_HOME%

12. CMD 에서 java 버전 확인 후 echo 실행


Android Studio 설치

https://developer.android.com/studio

 

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

1. Android Studio 설치

2. Custom 선택 및 JAVA_HOME JDK 선택

3. Android Virtual Device 선택

4. 설정 완료 후 New Project -> Basic Activity 선택

5. 프로젝트 명 지정 후 Finish

6. 환경 변수 설정으로 이동

7. 사용자 변수 새로 만들기

8. admin / AppData / Local / Android / Sdk 선택

9. 위와 같이 설정 확인

10. 시스템 변수 Path 선택 후 편집

11. C:\Users\admin\AppData\Local\Android\Sdk\platform-tools 경로 복사

AppData 폴더가 보이지 않는 경우

파일 보기->숨긴 항목 체크

12. 환경 변수 Path 에 추가

13. C:\Users\admin\AppData\Local\Android\Sdk\build-tools 도 추가

환경 변수 확인


Node.js 설치

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

1. Node.js 를 설치한다.


npm ionic cordova 추가

node -v
npm -v

1. cmd 창을 열어 node,npm 설치 확인

npm install -g @ionic/cli cordova

2. ionic npm 설치

ionic -v
cordova -v

3. ionic 및 cordova 설치 확인

cordova -v 입력 후 statistics report No 설정


Visual studio code / Git 설치

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

https://git-scm.com/downloads

 

Git - Downloads

Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp

git-scm.com

 

 

 

 

이로써 Ionic framework 를 사용하기 위한 모든 준비를 완료했다.