Cordova 개발환경 구성하기 (for Window)


NCS 분류 문화,예술,디자인,방송 > 문화콘텐츠 > 문화콘텐츠제작
능력단위 앱 개발계획
학습모듈명 앱 개발계획

 

준비사항

이 포스팅의 내용을 진행하기 위해서는 아래의 포스팅에서 소개하는 항목들이 선행되어야 합니다.

Window 환경에서 JDK 설치 및 설정하기

Android Studio 설치하기

Hello Android > 안드로이드 에뮬레이터 생성 및 실행

 

 

Android SDK의 환경변수 등록하기

Android SDK 환경변수 경로 찾기

Androdi Studio에서 “File > Settings” 메뉴를 실행하여 환경설정 화면을 엽니다. (Mac의 경우는 Android Studio > Preferences…”)

환경설정 화면이 표시되면 왼쪽의 검색박스에서 “SDK”라고 검색합니다. 검색된 결과가 검색박스의 하단에 필터링 되면 “Android SDK” 항목을 선택합니다. 항목을 선택하고 나면 우측에 안드로이드의 버전별 API를 구성하는 화면이 표시되는데, 이 화면의 상단에 Android SDK 경로가 표시됩니다. 이 값을 복사합시다.

 

 

환경변수 설정하기

환경변수를 설정하기 위해서 컴퓨터 아이콘을 마우스로 우클릭하고 “속성” 메뉴를 선택합니다.

 

시스템 화면이 표시되면 왼쪽의 메뉴 중에서 “고급 시스템 설정”을 선택합니다.

 

“시스템 속성” 화면이 표시되면 하단부의 “환경변수” 버튼을 클릭합니다.

 

환경변수 화면에서 화면 하단부의 “새로 만들기” 버튼을 클릭하고 새 시스템 변수를 등록합니다. 변수 이름은 “ANDROID_HOME”으로 설정하고 변수의 값은 앞서 복사해 둔 Android SDK의 경로를 지정합니다.

 

다시 환경변수중에서 “Path”라는 항목을 찾아 “편집”버튼을 클릭합니다. 항목을 선택할 때는 반드시 화면 하단의 박스에서 선택하도록 하세요.

 

“시스템 변수 편집” 화면이 표시됩니다. 이 화면에서 가장 중요한 부분은 기존의 값을 삭제하면 안된다는 점 입니다. 기존의 값을 그대로 유지하면서 새로운 값을 추가해야 합니다. 새로 추가되는 값과 기존의 값을 부분하기 위해서는 값의 사이에 세미콜론(;)을 추가하면 됩니다. 새로 추가할 항목은 %ANDROID_HOME%\tools 와 %ANDROID_HOME%\platform_tools 입니다.

변수 값 박스에서 커서를 맨 앞으로 이동하고 “%ANDROID_HOME%\tools;%ANDROID_HOME%\platform_tools”라고 입력하면 됩니다.

 

 

ANT 설치 및 설정

ANT 다운로드

http://ant.apache.org/bindownload.cgi 페이지에 접속하여 화면 중앙에 있는 다운로드 링크를 통해 ANT 압축 파일을 내려 받습니다.

 

파일을 내려받은 후에는 C드라이브의 적절한 경로에 압축을 해제합니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

ANT 환경변수 설정

ANT의 경로를 환경변수에 등록하기 위해서 ANT의 경로를 복사해 둡니다.

 

Android SDK 설정 과정과 마찬가지로 새로운 환경변수를 등록합니다. 변수의 이름은 “ANT_HOME”이고, 변수 값은 앞서 Ant를 설치한 경로입니다.

 

Path 항목에 대한 편집화면을 열고 맨 앞에 “%ANT_HOME%\bin;”을 추가합니다. 기존 값과의 구분을 위해서 입력 후에 세미콜론을 추가해야 함을 잊지 말기 바랍니다.

 

 

Node.js 설치

Cordova는 node.js에 포함된 npm이라는 도구를 사용하기 때문에 Cordova 개발을 위해서는 반드시 node.js를 설치해야 합니다. node.js 설치 프로그램을 내려받기 위해서 http://nodejs.org 에 접속합니다.

사이트에 접속 후, 화면 중앙의 다운로드 버튼 중에서 왼쪽 항목을 선택합니다. 버전에 상관없이 왼쪽에 표시되는 항목이 안정화 된 버전이고, 오른쪽에 표시되는 항목이 안정화 되지 않은 버전입니다.

 

내려받은 설치 프로그램을 실행하여 node.js를 설치합니다. 설치 과정중에는 특별한 설정사항 없이 “next” 버튼만 계속 클릭하면 됩니다.

 

 

Cordova 설치

Cordova 기반의 개발에 필요한 모든 요소를 갖추었으므로 이제 Cordova를 설치해야 합니다. 설치를 위해서 명령프롬프트를 열도록 합니다.

 

Cordova의 설치 명령어는 다음과 같습니다.

설치는 약 1~5분 정도 진행됩니다. (네트워크 상황에 따라 다릅니다.)

 

아래는 설치가 완료된 모습 입니다.

 

Cordova의 설치를 확인하기 위해서 다음의 명령어로 설치된 버전을 확인합니다.

처음 명령어를 수행하면 사용경험을 전송할지 여부를 묻게 됩니다. Y나 N을 눌러서 응답하고 나면 버전이 표시됩니다.

[출처] http://www.itpaper.co.kr/cordova-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-window/

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED