폰갭(Phonegap) 설치하기

폰갭(Phonegap) 설치하기

저번에 했던건 이클립스에서 연동이 되었다면,

이번엔 이클립스를 거치지 않는 방법으로 폰갭(Phonegap)의 사용방법에 대해서 포스팅을 해볼까합니다.

이클립스에서 실행하는 폰갭은 실행하는 속도가 오래걸려서, 

'아파치'를 사용하고있었습니다.

아파치도 좋지만, 이건 올리는 족족 확인할 수있어서 정말 좋은거 같습니다. 

우선은 Node.js를 받아 주어야 합니다.

Node.js 바로가기

Node.js는 플랫폼 역할을 해줍니다.

첫페이지에 올라와있는 일걸 받아 주어도 좋지만,

만약에 64비트(bit)가 아니신 분들은 Downloads로 가주세요:D

들어가 보시면, LTS에 먼저 체크가 되어 있는데,

Stable에 체크를 해주시고, 자신의 피시와 맞는 사양을 선택해서 다운 받아 주시면 됩니다.

저는 윈도우를 사용하고 있으니, Windows Installer의 64비트가 됩니다.

다운로드 과정은 간단합니다.

특별히 바꾸거나 하는 부분은 없습니다.

다운이 완료되었다면 'cmd'를 실행 시켜주세요.

그리고, 'npm -version'을 입력하면, 버전이 저런식으로 버전이 뜹니다.

정말 빠른속도로 슉슉슉 올라가서 캡쳐는 뜨지 못했지만,

'npm -install -g phonegap'을 입력해 주세요.

입력해 하게되면, 엄청나게 빠른속도로 스크롤 바가 올라갑니다.

스크롤이 다올라 갔다면, 

이번엔 'npm install -g cordova'를 입력해 주세요.

아까와 같이 또 스크롤바가 엄청나게 파바박 올라갑니다.

완료가 되었다면, 한번 연결을 해볼까요?

먼저 'cd \'로 C드라이브로 연결을 해주고, 

'md projects'로 'projects'라는 저장 폴더를 생성합니다.

(저장할 파일을 만들어 주는 것입니다. 굳이 projects가 아니여도 상관없습니다.:D)

그리고, 'cd projects'로 방금 생성한 'projects'폴더로 들어갑니다.

현재 경로는 C드라이브에 'projects'폴더에 있습니다.

'phonegap create hello_world'로 'hello_world'라는 폰갭 프로젝트를 생성해 줍니다.

위 처럼 뜬다면, 올바르게 생성이 됬습니니다.

혹여나 저렇게 뜨지 않고, 오류 메시지가 뜬다면, 

설치과정 중 오류가 있었던 겁니다.

'cordova'를 입력해서 아무정보도 뜨지 않는다면, 

npm을 다시 설치해 보시는걸 권장드립니다.

만약 뜬다면, 'npm -install -g phonegap'와 'npm -install -g cordova'를 다시한번 입력해 재설치 해주세요.

정상적으로 오신분들이라면 'cd hello_world'라 작성해 주시면 위처럼 뜹니다.

여기까지 됬다면,

바로 핸드폰 어플로 연결해 바로 보실 수 있습니다.

어플을 받기전에 'listening on'부분의 숫자를 기억해주세요.

자신의 컴퓨터와 연결되는 서버 주소입니니다.

이제 제대로 되는지 확인해 보기위해 핸드폰에 어플을 설치해 봅시다.

구글 마트에서 'PhoneGap Developer'를 검색해 보시면 위와 같은 어플이 있을겁니다.

설치를 눌러 설치해 주세요.

설치되었습니다.

아이콘이 귀엽네요:D 

실행하기 이전에 해당 컴퓨터와 연결되어 있는 피씨와 

동일한 아이피가 필요합니다.

와이파이를 연결하고 실행 시켜주세요:D

실행해 보시면 이렇게 뜨는데 저기에 아까 위에서 기억해 놓으신 숫자를 적어주시면 연결됩니다.

핸드폰에 연결하긴 했지만,

이게 어떻게 되는건지 잘 모르시겠죠?

간단히 소스를 수정해 보겠습니다.

혹시 이클립스에서 내용을 작성하던 경로 기억하시나요?

경로가 비슷하답니다.:D

저장된 파일에서 'www'파일을 찾아 주어야 하니까요!

우선 우리가 만들어 주었던 

프로젝트는 C드라이브에 projects폴더에 'hello_world'라는 프로젝트를 만들어주었습니다.

찾아 들어가 봅니다.

가보게 되면, 우리가 찾던 'www'폴더가 바로 보이실겁니다.

그곳에 index.html이 바로 우리가 찾던 프로그램입니다.:D

총 경로 → "C:\저장폴더\프로젝트명\www"

메모장이나, 노트패드로 연결해서 열어보시면 익숙한 소스들이 보시게 될겁니다.

저는 일단 보여드리는 것이니, 

바디부분에 <h1>태그의 내용을 작성해 보겠습니다.

저장하는 순간, 핸드폰에 문장이 변경되는 걸 확인해 보실 수 있을겁니다.

완전 샤사삭!

신기합니다!

이제 새로운 것도 받았겠다,

좀더 새롭게 어플을 만들 수있을거 같습니다.

학원에 다니면서, 정말 신기하고, 재미있는 프로그램을 많이 만나고 있네요:D

이제 바로바로 핸드폰으로 확인까지 할 수있으니,

앞으로 배울 내용들이 더욱더 기대가 됩니다.