Vue에서 Cordova를 위한 Android 플랫폼 빌드 환경 설정

 


Vue에서 Cordova를 위한 Android 플랫폼 빌드 환경 설정
Cordova에서 최종 목표인 안드로이드 플랫폼 실행(설치?) 파일을 만들기위해서는 Android Platform을 위한 빌드 환경을 설정해야 한다. 즉, 안드로이드 앱을 만들기 위해 꼭 필요한 Java SDK, Android SDK, 빌드 환경 설정 등이 설정되어 있어야 한다는 말이다.
Crodova를 통해 안드로이드 앱을 만들어 낸다는 말은 결과적으로 안드로이드 앱 빌드 및 패키징시 꼭 필요한 SDK(Software Development Kit)가 있어야 한다는 말이다.

아래와 같은 순서로 빌드 환경을 설정해보자.
  • JDK 설치 및 환경설정
  • Android SDK 설치 및 환경설정

1. JDK(Java Development Kit) 설치 및 환경설정

JDK 다운로드는 여기서(https://www.oracle.com/java/technologies/downloads/#java8) 다운로드 하면 된다.

다운로드 페이지를 방문하면 아래와 같은(2022년기준) 다운로드 화면을 볼수 있다. 여기서 자신의 OS 맞는 파일을 다운로드 하자. 

Windows OS를 사용하므로 jdk-8u301-windows-x64.exe 를 다운로드 받았다

JDK 8 다운로드


라이센스 동의 화면

위와 같이 요즘엔 라이센스 동의 화면이 표시되고, 다운로드 버튼을 클릭하면 로그인하라고 이야기한다. 오라클에 가입 안되어 있으면 회원가입도 해야 한다. 상당히 귀찮다 ㅠ,.ㅜ
어째건 회원가입하고 이메일 인증 받고 로그인하면 다운로드 받을수 있다.

여기서 주의할 점은 JDK Version이 8이라는 것이다. Java 8은 2014년 오라클이 Java를 인수후 첫번째 버전이라고 알려져있다. 그리고 현재 가장 일반적으로 많이 사용되는 버전으로 알고 있다. 또한 Cordova 공식 가이드에서도 JDK 8을 설치하도록 설명하고 있다.

다운로드 받은 파일을 클릭하여 설치를 진행하자. 그냥 아래와 같이 기본으로 설치를 진행하자. Next, Next 하면 마지막에 Close 버튼 화면이 표시된다.



설치가 끝나면 아래와 같은 화면이 표시된다.



환경변수 설정

윈도우에서 찾기를 통해 아래와 같이 "고급 시스템 설정"이라고 입력하면 설정 화면을 바로 표시할수 있다.

마우스로 직접 찾아가고 싶다면 아래를 참조하세요

Windows 설정 - 시스템 - 정보 - 시스템 정보 - 고급 시스템 설정 - 환경 변수






위와같이 "환경변수"를 클릭하고 가능하면 "시스템 변수"에 추가하도록 한다. "새로 만들기"를 클릭하면 아래의 입력화면이 표시된다.


그리고 방금 추가한 환경 변수 값을 시스템 변수의 path에도 추가하자. 위에서 입력한 변수 값으로 으로 입력해도 되지만 아래와 같이 변수 이름(%JAVA_HOME%\bin)을 통해 입력하도록 한다.



정상적으로 설치 및 설정되었는지 확인을 위해 cmd 명령창에서 아래와 같이 입력(java -version)해보면 확인이 가능하다.





2. Android SDK 설치 및 환경설정

Android SDK를 설치를 위해서는 AndroidStudio를 설치한 후 이를 통해 SDK를 설치해야 한다. 그래서 먼저 AndroidStudio를 여기서(https://developer.android.com/studio/index.html) 다운로드 받자



다운로드 버튼을 클릭하면 아래와 같은 동의 화면이 표시되는데 제일 하단으로 이동하면 체크후 다운로드 받을수 있는 버튼이 활성화 된다.


다운로드 받은 파일을 클릭하여 설치를 진행하자. 아래와 같은 하면이 표시되면 "예"를 클릭후 그냥 기본 환경으로 "Next -> Next -> Next -> Install"을 진행하자.


설치가 완료되고 나면 아래와 같이 성공 화면을 볼수 있다. 그리고나서 Android Studio를 실행시키자.



아래와 같은 화면이 표시되면, 그냥 "OK"클릭하고 넘어가자.


아래와 같은 화이 초기 개발 환경에 대한 설정 화면이 표시되는데, Next로 기본 설정 환경으로 넘어가자(필요시 확인하여 자신에 맞는 환경으로 설정해도 무방하다).


마지막에 이 화면이 나오면 Finish를 클릭하자.


이제 우리가 설치하려고 했던 Android SDK를 설치하는 화면이 표시되고, 진행 상태가 표시된다. SDK의 용량이 상당하므로 네트워크 환경에따라서 상당한 시간이 걸리므로 여유를 갖고 차한자 하면서 기다리시길....^^


설치가 되는 중간에 아래와 같은 화면이 표시되면 "예"를 클릭해서 넘어가자.


혹시나 아래와 같은 화면이 표시되도 당황하지 말고 "Finish"를 클릭해서 설치를 끝마친다.


이제 Android Studio의 Welcome 화면이 보여질 것이다.
아래와 같이 "More Actions -> SDK Manager " 버튼을 클릭해보자.


이와 같이 우측에서 Android SDK를 클릭하면 좌측에 Android 12.0 API Level 31의 Status가 Installed가 표시되면 일단 SDK는 정상적으로 설치된것이니 다음의 환경설정으로 넘어가자.


환경설정

위에서 설명한 환경 변수 화면을 띄우자



새 새스템 변수에 아래와 같이 입력하여 추가하도록 한다. 디렉토리 위치를 모를 경우 "디렉토리 찾아보기"를 통해 입력해도 된다.
  • 변수이름 : ANDROID_HOME
  • 변수값 : C:\Users\sentr\AppData\Local\Android\Sdk


아래와 같이 시스템 변수에 Path를 추가하자

%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
%ANDROID_HOME%\platform-tools

또는 

C:\Users\sentr\AppData\Local\Android\Sdk\tools
C:\Users\sentr\AppData\Local\Android\Sdk\tools\bin
C:\Users\sentr\AppData\Local\Android\Sdk\platform-tools

여기까지 성공했다면 이제 Android 플랫폼 빌드 환경이 성공한 것입니다. 이걸로 부족하거나 보다 상세한 내용은 아래 사이트를 참고하세요


참고 사이트

댓글

댓글 쓰기

이 블로그의 인기 게시물

[JAVA] 변수란? 변수타입?

이미지
프로그램 언어를 배울때 항상 먼저 배우거나 집고 넘어가는 것이 있죠? 네 맞습니다.  변수 라는 것입니다. C언어나 Java에서는 int, char, float 등 자료형에 따라 다르고, Javascript에서는 모든 변수를 그냥 var로 사용하죠. 물론 또 개발 언어마다 조금씩 차이가 있습니다. 하지만, 기본적으로 "변수"라는 기본 개념은 모든 언어에서 모두 동일합니다. 이번 포스팅은 이 변수에 대하여 낱낱이 파헤쳐 봅시다.  아! 참고로 변수에 대하여 정말로 낱낱이 땅끝까지 파헤치자면 이 한번의 포스팅으로는 부족합니다. 따라서 오늘은 일차적으로 가장 기본이 되는 변수의 정의와 원시타입에 대해서만 낱낱이 살펴보도록 하겠습니다. 변수란 무엇일까? 자! 일단 변수란 무엇일까요? 변수란? 물어보면 가장 먼저 사람들은 당당히 말을 하죠.  "변하는 수" 물론 이 말도 틀린 말은 아닙니다. 우리 프로그래밍에서는 변수라는 공간에 값이 항상 변하는 그리고 그런 용도로 사용하려는 것이 변수니까요. 변수는 영어로 "Variable"라고 읽습니다. 이것을 사전에서 찾아보면 "변화하기 쉬운, 변덕스러운, 다양한" 이라는 의미를 갖습니다. 뭐 이 말도 틀린 말은 아니네요. 하지만! 우리는 개발자로도 더 프로그래밍 적인 의미를 원합니다. 그래서 이렇게 정의를 했죠. 변수란? 데이터(값)을 저장할 수 있는 프로그램의 저장 공간! 서론이 길었네요. ^^. 항상 무언가 정의를 내리기란 쉽지 않습니다..ㅎㅎㅎ 변수를 좀 더 이해하기 위해 아래의 그림을 예를 들어 보겠습니다. 위와 같이 우리가 물을 마셔야 한다면, 물을 마시기 위해 당연히 물 컵이 있어야겠죠.  아! 물통에 입을 대고 드시는 분들도 계시지만... 그러면 엄마한테 혼납니다. ㅎㅎ 아무튼 이렇게 물을 마시기 위해 물을 담을 컵을 준비하는 것을 프로그래밍에서는 "데이터를 사용하기 위해 변수를 선언한다" 라고 이야기 할 수 있습니다.  그럼 ...
자세한 내용 보기

[JAVA] 문자셋(Charset)

이미지
문자셋의 역사 2022년 현재를 기준으로 가장 많이 사용되고 많이들 알고 있는 문자셋(Charset)은 UTF-8일 것이라 생각합니다. 물론 여러분들이 프로그래밍을 공부했거나 컴퓨터 공학을 전공했다면 ASCII 뿐만 아리나 UNICODE 등 다양한 문자셋을 알고 있겠죠. 그래서 이렇게 많은 문자셋들이 왜 생겨서 우리를 괴롭히는지 그리고 다 공부해야하는지 궁굼해 하는 분들이 많으실거라 생각하여 짧게 문자셋의 역사와 자주 사용되는 문자셋 몇개를 정리해 보려 합니다. 일단 문자셋의 대략적인 역사 또는 발전기를 아래와 같은 그림으로 살펴보도록 하죠. 위에서 보는 바와 같이 최초의 컴퓨터는 알파벳권에서 처음 개발 및 사용되었다고 합니다. 그래서 초기에 컴퓨터를 만들 당시 알파벳만 사용하면 되었던 것이죠. 그 시대 배경을 보더라도 글로벌 시대도 아닌 냉전 시대였으니 뭐 당연한거라고 생각할 수 있었을거 같습니다. 그렇게 시작되었던 초기 컴퓨터에서 0과 1밖에 모르던 컴퓨터에서 사람이 사용하기 위해 글자를 표시할 방법을 컴퓨터 과학자들이 의논하게 되죠. 고민끝에 컴퓨터에서는 데이터를 부호화하는 방법으로 숫자를 문자로 치환하는 방법을 생각하게 됩니다. 예를 들어 0은 NULL 이라는 아무것도 없다라는 기호로 그리고 숫자 65면 문자 알파벳 대문자 ‘A’로 66면 대문자 ‘B’ 이렇게 쭈욱 이어지다가 소문자 ‘a’는 97로 정하게 되죠.  이렇게 사람이 볼수 있는 문자를 컴퓨터 언어인 코드번호로 변경 또는 ‘부호화’하는 방법을 ‘인코딩(Encoding)’ 이라고 하고. 코드번호를 사람이 알아들을 수 있는 문자로 다사 되돌리는 것을 복호화 또는 ‘디코딩(Decoding)’이라고 합니다. 인코딩 : 문자, 숫자, 기호 등을 컴퓨터의 내부처리를 위해 숫자코드번호로 변경하는 것. 디코딩 : 컴퓨터의 내부처리 숫자코드번호를 문자, 숫자, 기호 등을로 다시 복원하는 것. 그래서 처음으로 이러한 기준을 만들었던 것이 ASCII(American Standard Code for Info...
자세한 내용 보기

[JAVA] 문자열 비교[== vs equals()]의 차이

이미지
자바에서 기본 자료형(원시타입)의 비교 연산은 일반적으로 == 연산자를 사용합니다. 하지만 String의 경우는 == 연산자를 사용하여 비교하면 안전하지 않죠? 안전하지 않다는 말은 무슨 뜻일까요? String의 경우 여러분들이 편하게 아무생각(?) 없이 사용하는 리터럴 즉, 대입 연산자를 이용해 바로 상수를 대입하는 방식으로 사용할 경우에는 일반적으로 == 를 이용해 값을 확인해도 문제가 없습니다. 하지만 사용자로 부터 입력을 받아 사용할 경우 동일한 값을 입력 받더라도 비교 연산자(==)는 동일한 값인데도 false를 반환하죠. 즉 아래와 같이 코드를 작성했다고 가정합시다.  Scanner sc = new Scanner(System.in); String id = sc.next();      // 사용자한테 ‘abc’를 입력 받았다고 가정. System.out.println(id == “abc”); // 비교연산자(==)를 이용해 비교하면 false. // 그래서 우리는 String의 메소드인 equals()를 이용해 비교하면 true를 반환합니다. System.out.println(id.equals("abc")); 이처럼 비교연산자(==)와 equals()는 왜 차이가 나는 것인지 한번 살펴보기로 하겠습니다. 먼저 그림을 보도록 하겠습니다. 위 그림에 대한 결론부터 이야기 하자면 String과 같은 클래스에서의 비교연산자(==)는 객체의 주소을 비교하는 것이고, equals()는 주소가 가리키는 실제의 값, 즉 문자열을 비교하는 메소드입니다. 따라서 우리는 String를 사용할 때 항상 안전하게 그리고 생각하지 말고 equals()를 사용하라고 배우죠. 위의 그림에서 선언한 각각의 변수들 주소를 이클립스에서 출력해보면 다음과 같습니다. String str1 = "Hello"; String str2 = "Hello"; String str3 = new String("World...
자세한 내용 보기