웹앱 개발 강좌

|  Apache Cordova를 활용한 웹앱 개발하기

조회 수 746 추천 수 2 댓글 3
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

2. Cordova 작업환경 구축하기

 

안녕하세요, 스포어 회원 여러분.

드디어 직접 앱을 개발하는 강좌가 시작됩니다.

 

강좌를 2번이나 말로만 해서 저도 뭔가 찝찝하네요.

그래도, 이제부터는 재미있기를 바라면서, 강좌 시작하겠습니다.

 

 

 

 

1. NodeJS 설치하기

Apache Cordova는 NodeJS를 기반으로 작동됩니다. 그렇기 때문에, 먼저 NodeJS를 설치해 보겠습니다.

 

1. https://nodejs.org/ 에 접속합시다.

002.png

 

2. 현재 버전을 다운로드 받습니다. (171022 기분 8.7.0)

003.png

 

3. 다운로드 받은 파일을 실행합니다.

004.png

 

4. 설치는 알아서 하시되, 아래 내용은 꼭 체크해 주세요.

005.png

 

5. 설치가 완료되면 명령 프롬프트를 통해 Node와 NPM의 설치상태를 확인합니다.

006.png

007.png

 

 

 

 

2. Cordova 설치하기

NodeJS가 설치가 완료되었다면, 이제 Cordova를 설치해 봅시다.

 

1. 명령 프롬프트를 실행해 아래 코드를 입력해 주세요.

npm install -g cordova

001.png

 

2. 자동으로 설치가 진행되며, 설치가 완료되면 아래와 같이 나옵니다.

002.png

 

3. 설치가 제대로 되었는지 확인해 봅시다.

003.png

004.png

 

 

 

 

3. Android 빌드를 위한 Ant 설치하기

Cordova는 플랫폼에 따라 추가적인 프로그램을 요구하기도 합니다.

그 중 안드로이드는 안드로이드 SDK와 Ant 등을 요구하는데, 먼저 Ant를 설치해 보겠습니다.

 

1. http://ant.apache.org/bindownload.cgi 에 접속한다.

001.png

 

2. Ant를 다운로드 받습니다.

002.png

 

3. 다운로드 받은 압축파일을 C: 드라이브 루트에 압축해제 합시다.

003.png

 

4. 환경변수 설정을 위해 "고급 시스템 설정"->"환경변수" 창으로 들어가자.

004.png

005.png

006.png

 

5. Path 변수에 값을 하나 추가하자. 압축을 푼 폴더\bin을 추가하면 된다.

007.png

008.png

 

 

 

 

4. Ant를 위한 Java SDK 설치하기

Ant를 설치했으나, Ant는 Java가 없으면 실행되지 않습니다. 그러니, Java SDK도 설치합시다.

 

1. http://www.oracle.com/technetwork/java/javase/downloads/index.html 에 접속합니다.

001.png

 

2. 1.8.X 버전의 Java를 다운로드 합시다.

002.png

003.png

 

3. 알아서 설치를 진행하시면 됩니다.

004.png

 

4. Java SDK의 환경변수를 설정해 줍시다. (JAVA_HOME)

005.png

006.png

 

5. Java SDK의 환경변수를 설정해 줍시다. (PATH)

007.png

008.png

009.png

 

 

 

 

5. Ant와 Java 테스트하기

Java를 설치했으니 Ant가 이제 실행됩니다. 테스트를 진행해 보죠.

 

1. Java 테스트

001.png

 

2. Ant 테스트 (오류가 나는것이 정상입니다.)

002.png

 

 

 

 

6. Android SDK 설치하기 (수정됨)

안드로이드 앱을 개발하려면 Android SDK가 필요합니다.

구글에서 제공하는 Studio를 통해 한번에 받아봅시다.

 

1. https://developer.android.com/studio/index.html 에 접속합니다.

001.png

 

2. 안드로이드 스튜디오를 다운로드 받습니다.

002.png

003.png

 

 

3. 다운로드한 파일을 실행합니다.

004.png

 

4. 설치를 알아서 진행하되, 아래 내용은 확인해 주세요.

005.png

006.png

 

 

5. 안드로이드 스튜디오를 실행합니다.

007.png

 

6. 알아서 설정을 진행하되, 아래 내용을 체크해 주세요.

008.png

009.png

 

 

7. 설정이 완료되면 종료합시다.

010.png

 

8. SDK매니저를 실행합니다.

011.png

 

9. Android-19 (킷캣)의 SDK를 설치합니다.

012.png

013.png

014.png

 

10. 환경변수를 설정해 줍시다. (ANDROID_HOME)

011.png

 

11. 환경변수를 설정해 줍시다. (PATH)

012.png

 

 

 

 

 

7. Gradle 설치하기

안드로이드 APK로 빌드를 하기 위해서는 Gradle이 필요합니다. Gradle도 설치해 봅시다.

 

1. https://gradle.org/releases 에 접속합시다.

001.png

 

2. 최신버전 다운로드 후, 압축을 해제합시다.

002.png

 

003.png

 

3. 환경변수 설정을 해 줍시다.

004.png

 

 

 

 

 

 

이번 강좌는 이까지 입니다. 다음 강좌를 기다려 주세요!

Math.floor(Math.rand() * 24 + 1) 시간 이내로 다시 돌아오겠습니다.

Who's 네모

profile

메인 카카오톡 ID : kanae98 (네모)

히키코모리 블로그 : https://ndevel.net

상품판매 사이트 : https://ndevel.com


서브컬쳐 카카오톡 ID : cyemo (세모)

아니메월드 : https://open.kakao.com/o/gA8MIx1


27시간 심심하므로 채팅은 언제나 환영! '25시부터 26시 사이에 채팅 상시 대기' 랜덤 추첨 진행중 - 당첨확률 50-10!%

  • profile
    이니스프리 2017.10.22 19:46

    캡쳐사진으로 차근차근 잘 설명해주셔서 감사합니다

    홈페이지에서 하시는 자바 강좌도 잘 보겠습니다 :)

  • profile
    마카롱 2017.10.22 20:50
    윈도우ㅜㅜ 윈도우 없으면 안되나요 ㅎㅎ
  • profile
    네모 2017.10.22 20:54
    제가 윈도우를 사용해서요...ㅠㅠ
    다만, macOS나 리눅스도 설치과정을 제외하면 99% 똑같습니다. 설치환경도 비슷하구요.

웹앱 개발 강좌

Apache Cordova를 활용한 웹앱 개발하기

List of Articles
번호 제목 글쓴이 날짜 조회 수
5 1. 웹앱이 무엇일까요 3 file 네모 2017.11.05 719
4 0. 시작하기에 앞서 6 file 네모 2017.11.05 403
3 4. 숫자야구 게임 앱을 만들어 봅시다! 4 file 네모 2017.10.24 547
2 3. Cordova 프로젝트 생성 6 file 네모 2017.10.23 1798
» 2. Cordova 작업환경 구축하기 (수정됨) 3 file 네모 2017.10.22 746
목록
Board Pagination Prev 1 Next
/ 1
서버에 요청 중입니다. 잠시만 기다려 주십시오...