맥에서 코르도바 iOS 플랫폼 구축하기

코르도바는 모든 플랫폼에서 동작하는 앱을 만들어주는 개발언어 이å므로, 각 개발을 원하는 플랫폼을 따로 구축해 주어야 합니다.
안드로이드는 설치중 여러가지 문제가 발생해 (주로, 안드로이드 스튜디오 관련) 애를 먹었었습니다. 하지만 맥에서 Xcode를 설정하는 것이라 쉽게 일이 마무리 되었습니다.

공식문서 : https://cordova.apache.org/docs/en/9.x/guide/platforms/ios/index.html

1. 선행작업.
   실행을 위해서는 아래 2가지 작업이 선행되어야 한다.
   코르도바 설치 : https://nicgoon.tistory.com/186
   첫앱생성 : https://nicgoon.tistory.com/187

2. Xcode 설치 작업.
   공식문서를 읽어 보면, 2가지 Xcode 설치 방법이 존재하는데 저는 그냥 앱스토어에서 Xcode를 다운로드 받아 Xcode를 설치했습니다.

3. 명령어 라인 개발자 도구 설치.

아래 처럼 입력하면 개발자 도구가 뜨는 데, xcode는 설치되어 있으므로, 설치 버튼을 눌러 줍니다.

$ xcode-select --install

4. iOS 플랫폼 설치.

$ sudo cordova platform add ios

5. 시물레이터 배치.

플랫 폼을 생성했다면, xcode로 프로젝트를 실행하여, 시물레이터 설정을 해 줍니다. 이 도식은 공식문서의 이미지를 참고 하면 좋으며, 실행은 아래 처럼 그냥 하면됩니다.

$ open ./platforms/ios/앱이름.xcworkspace

6. 에뮬레이터 실행.

$ sudo cordova emulate ios

잘된다면 개발환경 설정이 완료된 것 이다.

맥에서 코르도바 안드로이드 플랫폼 구축하기.

코르도바는 모든 플랫폼에서 동작하는 앱을 만들어주는 개발언어 이므로, 각 개발을 원하는 플랫폼을 따로 구축해 주어야 한다.

공식문서 : https://cordova.apache.org/docs/ko/9.x/guide/platforms/android/index.html

1. 선행작업.
   실행을 위해서는 아래 2가지 작업이 선행되어야 한다.
   코르도바 설치 : https://nicgoon.tistory.com/186
   첫앱생성 : https://nicgoon.tistory.com/187

2. java 설치.
   환경 변수 문제로 인해 코르도바 트러블이 생길 수 있다. 최신 버전인 java 11 버전을 설치한다면, 코르도바는 java가 설치되지 않은 것으로 인식한다. 당연히 문제가 발생한다. 그러므로, 8 버전을 설치한다. (한국 번역본은 보지 않도록 한다.)

설치공식사이트 : https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

3. 안드로이드 스튜디오를 설치하면 Gradel이 자동으로 설치된다 하지만, 이 버전이 매우 낮다. 코르도바는 5.x때의 gradle을 사용하므로, 직접 설치를 해 주어야 한다.

설치메뉴얼 : https://gradle.org/install/

여기서 우리는 installing manually 항목대로 설치를 할 것 이다.
다운로드 페이지에서  binary-only나 complete를 다운로드 받으면된다. 맥 같은 경우 다운로드를 받으면, 바로 압축이 풀어 지므로, 그대로 지정한 폴더로 복사하면된겠다.

복사할 위치 : /opt/gradle

설치메뉴얼 처럼 한 번에 폴더가 생성되지 않는다, 대체로 아래처럼 입력하면 무난하다. (그냥 파인더로 생성해도 상관없습니다.)

$ sudo mkdir /opt
$ sudo mkdir /opt/gradle

그냥 파인터를 이용해 데이터를 복제하자.

환경변수는 아래와 같이 등록합니다.

$ export PATH=$PATH:/opt/gradle/gradle-5.3.1/bin

위의 방법이 메뉴얼에 나와 있는 방법인데, 터미널을 다시켜면 환경변수가 지워졌습니다.
이것을 해결하기 위해, 유저 홈디렉토리 (cd ~로 이동할 수있는), 폴더를 파인더로 찾아가 Shift + command + . 을 동시에 눌러 감춰진 파일들이 표시되도록 하였습니다.
여기서 .bash_profile 파일을 편집기(저는 vs code를 이용했습니다.)를 열어 위의 패스를 걸어 줍니다.

4. 안드로이드 스튜디오, 설치.
   안드로이드 설치하는 아래 사이트에 가면 자동으로 시작이된다.
   https://developer.android.com/studio/install?hl=ko

   안드로이드 스듀이로를 열어 tools > SDK Manager를 열어 다음 사항을 확인해 줍니다.
   1) Android Platform SDK 안드로이드 버전을 확인합니다.
   2) Android SDK build-tools 19 이상 혹은 최상위 버전.
   3) 안드로이드 SDK가 설치된 경로, (이것을 알아야 패스를 거어 줄수 있습니다.) 

   환경변수 설정해 주기.
   이것을 해 줘야 코르도바에서 안드로이드 관련 소스들을 찾을 수 있다. gradle 환경 변수를 설정했던 요령으로, 안드로이드를 위한 환경변수를 같은 파일에 추가해 줍니다.

   export ANDROID_HOME=안드로이드 sdk
   export PATH=$PATH:안드로이드 sdk/platform-tools:안드로이드 sdk/tools

5. 플랫폼 추가.

프로젝트를 생성해, 해당 폴더로 이동합니다.

$ sudo cordova create hello com.exaple.hello helloworld
$ cd hello

플랫폼을 추가해 줍니다.

$ sudo cordova platform add android

 추가된 플랫폼을 확인해 줍니다.

$ cordova platform ls

6. 빌드

모든 플랫폼 빌드.
$ sudo cordova build

안드로이드만 빌드.
$ sudo cordova build android

7. 테스트

$ sudo cordova emulate android

빌드 자체는 정말 잘된다 문제는 설정이 까다롭다는 것인데, 다행이 오류 코드를 자 뱉어 주므로, 이를 해결해 나가면 크게 문제가 없다.

8. 테스트가 되지 않을 때,

$ adb kill-server
$ adb start-server

위 두 명령을 차례로 쓴다면, adb가 차례로 재 시작된다. 그리고, 아래 명령을 통해 확인해 보면, 장치가 인증되지 않았다고 나올 것이다.
개발자 모드를 활성화 한 뒤, usb를 뺏다 꽂으면 문제가 해결이 된다.

$ adb devices

맥에서 코르도바 IDE를 설치.

1. Visual Studio Code 설치.

코르도바 사용을 위해 먼저 비주얼 스튜디오 코드를 다운로드 해 설치한다.
다운로드 주소 : code.visualstudio.com

황당하지만 맥용은 따로 설치할 필요없이 다운로드하면 설치가 끝이다. 그냥 애플리케이션 폴더로 이동해 사용하면 될 듯 하다.

2. 코르도바 프로젝트 설정.

코르도 바는 멀티 플랫폼 환경이므로, 프로젝트가 하나 생성되고, 그 속에 설정된 플랫폼들의 빌드 파일을 만들어 주는 식으로 개발을 할 수 있다. 터미널을 열고, 아래와 같이 입력하면 프로젝트가 만들어 진다.

당연한 이야기 지만, 터미널이 열려 있는 폴더 하위에 코르도바 프로젝트가 생성되므로, 주의가 필요하다. 윈도우 같은 IDE 같은 프로젝트 생성에 익숙하다면, 쉽게 실수 할 수 있다. 먼저 원하는 위치로 폴더 이동이 필요하다.

cordova create hello com.exaple.hello helloworld

권한 없음 오류가 날 경우는 아래와 같이 입력한다.

sudo cordova create hello com.exaple.hello helloworld

입력 옵션은 차례로 [프로젝트폴더명] [고유한도메인명] [프로젝트명]이다.

생성후 cd hello를 해 하위 폴더로 이동하고, ls 명령을 이용해 폴더를 확인해 보면 프로젝트가 생성되어 있는 것을 확인할 수 있다.

맥에서 코르도바 환경설정.

* 코르도바 설치를 위해 먼저, 코르도바 사이트로가 메뉴얼을 읽는 것이 좋다.  코르도바는 npm을 통해 설치가 되므로 항상 최신버전이다. 그래서 항상 사이트에 가서 이슈를 확인하고 버전을 확인해야 한다.
코르도바 사이트 : cordova.apache.org

1. nodejs 설치.
   노드 js 사이트 : nodejs.org
   버전 : 10.15.3 LTS
   설치 방법 : 사이트에 가서 그냥 다운로드 받고 설치하면된다. 크게 이슈가 될만 한 것이 없다.

설치버전 확인하기 : node -v

2. 콘솔을 이용해, 코르도바를 설치해 주도록 합니다.

$ npm install -g cordova

위와 같이 입력했는데, 설치가 되지 않고 오류가 날 수 있다. 권한 오류 인데 이럴때는 아래와 같이 코드를 입력해 주도록 하자.

$ sudo npm install -g cordova

그럼 패스워드를 입력하고, 설치가 진행된다.