맥북 아이폰 cordova(코르도바) IOS 하이브리드 앱 개발환경 쉽게 따라하기 1

2017-03월 최신 맥을 이용한 맥북에서 아이폰 하이브리드 앱 개발환경 기본 셋팅 하는 방법이 없어서 직접 정리해봤습니다.

2019-11월 기준으로 다시 수정해서 올립니다.

다시 셋팅 하려고 하니 이곳 저곳 오류가 많이 나네요!!

네이티브 개발자인 저에게 하이브리드 앱을 개발 하라고해서 멘붕 이었지만,

긍정적인 저는 하이브리드의 개념을 정확히 이해 하는 좋은 계기가 되었습니다.

네이티브 와 하이브리드의 차이점은 

하이브리드의 개념이 네이티브의  webview를 이용하여 javascript와 통신 하는게 하이브리드의 끝인 줄 알았습니다.

간단한 통신은 그렇게 해도 상관 없을 것 같습니다.

IOS webview javascript 호출 : http://rhammer.tistory.com/77

금융권 프로젝트를 처음 나가서 회의를 하다 보면 전자정부 프레임워크를 중요시 하여 고객이 IOS 개발을 전자정부프레임워크(스프링프레임워크)와 비슷하게 개발하라는 지시를 받아 구글링 끝에 as-is phonegap(폰갭) to-be cordova(코르도바) 환경을 셋팅하였습니다.

코르도바 개발 방법에 대해서 나중에 시간 남으면 작성 하도록 하겠습니다.

참고로 제가 나중에 환경설정 다시 할때 잊어 버리지 않기위해 작성한 글 이기도 합니다.

(cordova 셋팅 완료 화면)

셋팅하고 보니 springFramework와 얼추 비슷하네요...

xocde 에서 프로젝트를 만들고 cordova Framework를 설치 및 셋팅 하는 방법이 아닙니다.

네이티브 코르도바 설치방법 시작하기

xcode 가 설치되어 있고, 개발자 계정($99)이 있어야 합니다.

https://cordova.apache.org/docs/ko/latest/guide/platforms/ios/index.html  사이트를 정독 하세요.

0.무작정 설치

$ sudo npm install -g ios-sim

Ios sim 와 ios-deploy 도구-하면 iOS 시뮬레이터로 iOS 애플 리 케이 션 및 iOS 장치에서 명령줄을 실행 합니다.

이 두가지는 설치 안해도 됩니다. cordova 설치에 집중하세

사이트를 읽는 도중에 npm install -g ios-sim  이 부분에서

npm 명령어를 실행하면 -bash npm: is a directory 찾을 수 없다고 나올 겁니다.

node.js 설치 후 다시 진행해야 합니다.

1.Node.js 설치

node.js 설치하는 이유는 npm 명령어를 실행시키기 위해서 입니다.

https://nodejs.org/en/

또는

https://nodejs.org/en/download/

맥 32/64bit 설치를 하시면됩니다. .tar.gz 로 압축 변경 후 해당 폴더에 환경설정을 하세요.

다운로드 받은 파일을 압축을 해제한 후 폴더를 원하는 곳에 이동 시킨후 환경설정 합니다.

설치 후 환경설정이 중요합니다.

맥북에서 ctrl + space "터미널" 환경을 열어야 합니다.

터미널 명령어 : vi .bash_profile

환경설정 파일을 vi 명령어로 오픈합니다.

아래 경로를 본인 설치한 위치 경로에  export 합니다.

export PATH=$PATH:/Users/Jnst/Documents/eclipseWorkspace/node-v6.10.0-darwin-x64/lib/node_modules/npm/lib

혹시 적용 하고도 안되면 아래와 같이 source 명령어를 실행하세요

source ~/.bash_profile

-- 2019.11.1 수정

npm install -g ios-sim

설치중 아래와 같은 오류가 발생했을때 

Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

$ sudo npm install -g ios-sim

권한때문에 sudo 명령어를 입력하지 않으면 설치가 되지 않습니다.

권한이 없다는 명령이니

sudo npm install -g ios-sim

명령어를 치시면 설치될 것 입니다.

2.Cordova 설치

npm 이 설치 되었다면 아래 명령어를 실행하시면 cordova가 설치됩니다.

$ sudo npm install -g cordova

권한때문에 sudo 명령어를 입력하지 않으면 설치가 되지 않습니다.

코르도바가 설치가 완료되면 /usr/local/lib/node_modules/cordova/bin/cordova/usr/local/lib 위치를 알려줄 것 입니다.

//2019.11.1 수정

/usr/local/lib/node_modules/cordova/bin/cordova

또는 수정이되면 이렇게 경로를 안내해 줍니다

해당 위치를 

터미널 명령어 : vi .bash_profile

환경설정 파일을 vi 명령어로 오픈 한 후 i 를 눌러 insert 모드에서 아래 export PATH를 입력합니다.

export PATH=$PATH:/usr/local/lib/node_modules/cordova/bin/cordova/usr/local/lib

또는 /usr/local/lib/node_modules/cordova/bin/cordova

코르도바가 설치가 되었으면 아래 ios-sim , ios-deploy 를 설치하세요

ios-sim , ios-deploy 가 설치가 제대로 안된다면 

npm 이 제대로 설치가 되지 않았거나 꼬인것 입니다.

미리설치 되어있던 곳에 잘못 설치 되어 path  경로가 안맞거나 잘못될 수 있습니다.

$ npm install -g ios-sim
$ npm install -g ios-deploy







ios-deploy 설치중 

The following build commands failed:

Ld /usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy normal x86_64

(1 failure)

npm ERR! code ELIFECYCLE

npm ERR! errno 65

npm ERR! ios-deploy@1.9.4 preinstall: `./src/scripts/check_reqs.js && xcodebuild`

npm ERR! Exit status 65

npm ERR! Failed at the ios-deploy@1.9.4 preinstall script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/initech/.npm/_logs/2019-11-01T05_34_42_367Z-debug.log

Error: EACCES, permission denied Ionic Cordova IOS

앞에 sudo 를 붙이시면 됩니다. ex sudo 

에러가났을 경우에 

아래 그대로 삭제 후 재 설치를 권장합니다.

initechui-MBP:~ initech$ node -v

v13.0.1

initechui-MBP:~ initech$ sudo npm cache clean -f

npm WARN using --force I sure hope you know what you are doing.

initechui-MBP:~ initech$ sudo npm install -g n

/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n

+ n@6.1.0

added 1 package from 4 contributors in 0.403s

initechui-MBP:~ initech$ sudo n stable

  installing : node-v12.13.0

       mkdir : /usr/local/n/versions/node/12.13.0

       fetch : https://nodejs.org/dist/v12.13.0/node-v12.13.0-darwin-x64.tar.gz

   installed : v12.13.0 (with npm 6.12.0)

initechui-MBP:~ initech$ sudo n stable

installed : v12.13.0 (with npm 6.12.0)

initechui-MBP:~ initech$ node -v

v12.13.0

initechui-MBP:~ initech$ 

initechui-MBP:~ initech$ npm -v

6.12.0

initechui-MBP:~ initech$ 

initechui-MBP:~ initech$ sudo npm install -g npm

/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js

/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js

+ npm@6.12.1

added 2 packages from 2 contributors, removed 2 packages and updated 12 packages in 10.517s

initechui-MBP:~ initech$ npm -v

6.12.1

initechui-MBP:~ initech$ 

initechui-MBP:~ initech$ sudo npm install -g ios-sim

/usr/local/bin/ios-sim -> /usr/local/lib/node_modules/ios-sim/bin/ios-sim

+ ios-sim@8.0.2

updated 1 package in 0.85s

initechui-MBP:~ initech$ sudo npm install -g cordova

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

+ cordova@9.0.0

updated 2 packages in 23.079s

Ios sim 와 ios-deploy 도구-하면 iOS 시뮬레이터로 iOS 애플 리 케이 션 및 iOS 장치에서 명령줄을 실행 합니다.

굳이 설치 안해도 device 로 연동하는데 문제가 없습니다. 계속 오류 나서 열심히 설치해봤지만... 시뮬레이터 개발할때 사용되는거라서 저는 패스 했습니다.

코르도바 만 잘 설치 하면 문제 없이 동작 합니다!!!

$ sudo npm install -g cordova

권한때문에 sudo 명령어를 입력하지 않으면 설치가 되지 않습니다.

명령어를 입력해 보세요~ 

자세한 설명 : http://stackoverflow.com/questions/25598377/error-eacces-permission-denied-ionic-cordova-ios

코르도바 가 설치가 완료 하고 환경 설정이 다 되었다면 ,

참고사이트 :

 https://cordova.apache.org/docs/ko/latest/guide/platforms/ios/index.html

https://cordova.apache.org/docs/ko/latest/guide/cli/

새 프로젝트 만들기

유틸리티 사용 하 여 코르도바 새로운 프로젝트 설정에 코르도바는 명령줄 인터페이스를 설명 하는 대로. 예를 들어 소스 코드 디렉토리에:

    $ cordova create hello com.example.hello "HelloWorld"
    $ cd hello
    $ cordova platform add ios
    $ cordova prepare              # or "cordova build"

cordova platform add ios@4.2.1 최신버전으로 ios 설치해야지 plugin 설치할때 오류가 나타나지 않습니다.

원하는 폴더에서 명령어를 실행하면 프로젝트가 완성되고 cordova 환경셋팅된 IOS 개발 프로젝트가 완료 됩니다.

감사합니다.

궁금한것은 댓글남겨 주시면 확인 후 말씀드리겠습니다!

맥북 아이폰 cordova(코르도바) IOS 하이브리드 앱 개발환경 쉽게 따라하기 2부