은하수 골목

앞에 작성했었던 포스팅에서 제이쿼리 모바일(jQuery mobile)의 기본 UI에 대해서 포스팅했던적이 있었습니다.

이번엔 그때 그 코드들을 좀 더 세분화 설명을 해볼까 합니다.

하이브리드 앱을 하게 되면, 기본적으로 제이쿼리를 필연적으로 사용하게 됩니다.

따라서, 기본적으로 제이쿼리가 링크 걸려 있어야 합니다.

이클립스에서 폰갭을 실행했을 때 기본으로 올라오는 코드들입니다.

언듯 보면, 빨간 상자만 지우고 그냥 사용해도 무관해 보이지만,

그대로 사용했다가는 제이쿼리도 먹지 않고,

제이쿼리 모바일에서 기본적으로 제공하는 UI도 사용할 수 없습니다.

사용하려면 어떻게 해야 할까요?

멀리 가지 않아도 바로 사용할 수있는 방법 중 하나는 

생성된 파일에 보면 우리가 코딩 하는 'index'파일이 들어있는 

'assets'폴더안에 보면 기본적으로 딸려있는 파일이 있습니다.

버전은 낮지만, 제이쿼리 모바일에서 제공하는 파일들 맞습니다.

<link>와 <script>를 시켜주는 건 'min'이라고 적혀있는 파일들을 시켜줄 예정입니다.

('min'이라고 적혀있는 건 압축해 배포용으로 작성됬다는 의미라고 합니다.)

각각 열어보시면, 여러가지 소스들이 쭉 나열되어 있는 걸 보실 수있습니다.

'jquery-1.7.2.min'파일에는 순수(?) 제이쿼리가 작성되어 있습니다.

제이쿼리 모바일 자체가 기본적으로 제이쿼리에서 시작이 되다보니 제이쿼리 자체코드도 연결이 되어있어야 합니다.

'jquery.mobile-1.1.0.min.css' 파일은 여러 클래스 스타일이 적혀있는데, 

여기서는 다양한 테마와 아이콘등을 표시하는 스타일 시트입니다.

마지막 남은 'jquery.mobile-1.1.0.min.js'는 본격적인 제이쿼리 모바일의 실제 자바 스크립트입니다.

이 파일에서 모든 동작이 일어난다고 해도 과언은 아니지요!

즉 이 파일이 없다면, 

제이쿼리가 하나도 실행이 안되는 거죠!

이 파일들을 기본적으로 위에 상자처럼 경로를 정확히 입력해 링크를 걸어주시면,

사용이 가능합니다.

여기서 주의할 점이 있다면 <link>와 <script>순으로 작성해야 한다는 건데요.

순서가 바뀌게 되면, 오작동을 하게됩니다.

주의해 주세요:D

요런 방법으로 기존에 있는 파일에 링크를 걸어 사용하는 것도 가능하지만,

제이쿼리 모바일 사이트에서 제공하는 링크를 걸어주는 방법도 있습니다.

제이쿼리 모바일 바로가기

제이쿼리 모바일 페이지에 가서 Download창으로 갑니다.

보시면, 버전별로 파일들이 쭉있습니다.

빨간상자안에는 요것들이 링크가 걸려있습니다.

요걸 그대로 긁어가서 사용해도 동일하게 사용할 수 있습니다.

저는 상위 버전을 사용하기 위한 목적도 있지만, 편리하기도 해서 요방법을 주로 씁니다.ㅎㅎ

요 사이트를 잘 사용하게 된다면, 여러가지로 효과도 볼 수있습니다.

제이쿼리 모바일은 업그레이드 될 때 마다 기능이 추가되는 것 뿐 아니라,

기존에 있던 기능이 빠지기도 합니다.

원하는 기능이 각각 버전이 다르다면, 절망이겠죠?

상위 버전을 쓰다가 전 버전에서만 지원되던 모션이면 절망이죠..

그럴땐 위에 필요한 버전의 필요한 파일들을 그때 그때 받아서 링크를 걸어 사용하는 것도 가능합니다.

하지만, 링크를 걸땐 충분히 주의해서 사용해주세요!

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

이번엔 이클립스를 거치지 않는 방법으로 폰갭(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

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

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

학원에서 저번주에 자바발표가 끝나고 이제 다시 하이브리드 앱제작을 배우고 있습니다.

오랜만에 다시 앱을 배우려니 반갑기도 하고, 

그새 까먹은 부분도 있어서 당황스럽기도 합니다.8ㅅ8

하이브리드 앱을 만들면서 기초라고 해도,

너무 디자인이 없으면 심심하지 않겠습니까?

따로 디자인을 하지않아도 기본적인 이쁜 아이콘을 사용할 수있습니다.

바로 'jQuery mobile(JQM)'에서 기본으로 제공하는 UI에 대해서 이야기 해볼까 합니다.

그걸 조합해서 만들게 되면 참 쉽고 활용적이게 만들 수 있습니다.

기존에 있던 것들을 조합해서 만들기만 하면 되니까요.:D

jQuer ymobile 바로가기

여기에 접속하게 되면, Download에 들어가 주세요.

들어가게 되면, 버전별로 다운을 받을 수도 있고, 

소스를 따올 수도 있습니다.

아래에 'Copy-and-Paste~'

영역을 복사해서 <head>부분에 붙여 주면 됩니다.

그리고 사용하면 기본적으로 제공하는 것을 사용할 수있습니다.

버전에 따라서 사용할 수 있는 스타일이나, 효과가 다릅니다.

그건 나중에 사용하시면서 버전을 추가를 해주시면 됩니다.

1.4.5버전이 아니라 밑으로 내려보면 전버전들을 볼 수있습니다.

1.3.2버전의 기본 제공 UI입니다.

1.4.5버전은 순서랑 종류가 조금 다르긴 한데, 일단 기본은 이렇게 있습니다.

여기서 골라 사용할 수도 있고, 

원하는 대로 색상을 변경해서 다운받아 사용하는 방법도 있습니다.

기본툴만 있어도, 연습은 하기엔 참 편리하죠.

사용하는 방법은 <body>부분에서 <div>영역을 설정해 사용합니다.

<div>로 영역을 잡아서 'data-theme'으로 위의 테마를 각각 설정해 줄 수도 있습니다.

활용하기 나름이죠.:D

UI의 영역이 전체적으로 기본설정이 되어있다보니,

data-role의 영역이 UI 효과에 영향을 줍니다.

data-role에 대해서는 다시한번 포스팅을 하도록 하겠습니다.:D

자바스크립을 조금이라도 공부하신 분들께는 아주 쉬운 게 아닐까 싶습니다.

앞서서 폰갭을 실행해서 간단한 기초 작업 배경을 만드는 걸 다뤘었는데요,

거기에 이어서 초 간단한 예제를 올려 봅니다.

버튼과 메시지 창을 만들어서 클릭하면, 메시지가 바뀌는 예제 입니다.

간단하지만, 계속 쓰이는 기초적인 부분이라고 생각합니다.

메시가 바뀔창과 클릭할 버튼을 생성해 줄 건데요,

메시지가 바뀔창은 span으로 영역을 잡고, id값을 줍니다.

그리고 간단히 변화를 알아 볼 수있도록 Message 라고 입력했습니다.

클릭했을 때 변화를 주기 위해 버튼에는 'onClick' 으로 이벤트를 줍니다.

효과는 function으로 아까 onClick을 호출해 올라옵니다.

그리고, body에 있는 id값을 호출해 해서 text트로 원하는 문자를 찍어 줍니다.

이렇게 작성된걸 띄워보면 이렇게 뜨실 겁니다.

Message값은 그대로 올라가고,

버튼을 생성할 때 value값을 준게 버튼의 이름으로 해서 요렇게 모양이 잡힙니다.

그리고 클릭을 하면 메시지가 변합니다!

안드로이드를 하면서 편한건 기초적인 개발환경이 제공되어 있어서,

CSS를 사용하는게 거의 없다는 건데요,

여기엔 사용이 안되어 있지만, 기본적으로 안드로이드 용으로 제공되는 기초 스타일 시트가 있어서, 

잘 활용하면, 제공되는 것만으로도 제법 그럴 싸 해집니다.

그거에 대해선 다음에 다시 포스팅을 해 보도록 하겠습니다.:D

이클립스(eclipse)를 설치만 하고, 아직 환경설정은 들어가지 않았는데요,

목록이 많아서 조금 복잡해 보이긴 하는데, 간단히 해보겠습니다.

window에서 마지막입니다.

위에 진하게 표시해둔 표시를 찾아 들어가서 Text file encoding을 UTF-8로 고쳐줍니다.

모든 텍스트를 모든 언어로 표시하겠다는 표시입니다.

체크하고 Apply를 눌러주세요.

수정하고, 틈틈히 Apply를 눌러주세요:D

이번엔 spell checking을 해제해 줍시다.

실제로 코딩을 할 때 매우 방해되고 거슬린다고 하네요..:D

편하신 분들은 체크 해 놓아도 좋지만, 코딩하는데, 약자며 뭐며 자꾸 스펠이 틀렸다며 쫏아다니면 귀찮긴 할 듯합니다.

여기저기 경고 뜨는걸 무시해 주는 건데, 코딩 한두개 적어보며 연습해 보는 건데, 정확히 모든걸 적지 않았다고, 경고문구가 뜨면 불편 할거 같습니다.

전부 Ignore으로 바꾸어 주세요.

import의 편리함을 위해 값을 1로 수정해 주는거라고 하는데, 이제 막 접한 초보인 저는 잘 모르겠습니다.

한두달 뒤쯤이면 스스로 실감 할 수있겠죠.ㅎㅎ

텍스트 컬러나 텍스트크기 등등 기본설정도 바꾸신다고 하는데, 저는 지금 기본설정이 마음에 들어 바꾸진 않았습니다.

혹시나 마음에 들지 않거나 폰트가 작으신 분들은 General > Appearance > Colors and Fonts 에서 부분별로 선택해서 원하시는 대로 설정 가능합니다.:D

안드로이드 SDK에 이어서 폰갭(Phonegap)의 설치와 실행을 해보려고 합니다.

폰갭을 설치하게 되면, 기본 설치 환경을 기본으로 설정해 준답니다.

기본 틀은 짜여져 있어서, 내용과 스타일만 채워주면 됩니다.

먼저 이클립스(eclipse)를 실행해 주세요.

앞전에 이클립스의 설치를 못하신분들은 앞글을 확인해 주세요:D

이클립스 설치

상단 메뉴에서 Help에서 이클립스 마켓에서 들어가 주세요.

마켓에 여러가지가 있습니다.

프로그램 안에서 먼가 다운받아서 하는게 처음이라서 완전 신기신기+ㅅ+ !

마켓에 어플이 많으니, 'phonegap'이라고 검색해 주시면, 저기 Install 버튼이 보이실 겁니다.

저는 이미 설치가 되어 있어서 Installed라고 적혀 있네요..;

클릭하면, 아래의 리스트가 나타납니다.

저는 저번과 동일하게 학교와 환경을 맞춰주기위해서 다 체크해서 받았습니다.

선택을 한 후 Confirm을 눌러주면 로딩이 끝나고, Finish 버튼이 활성화 됩니다.

Finish를 누르면 다운이 되는 것이 보일거에요.

기다려 주면 중간에 묻는 창이 나타는데 OK를 눌러주시고, 다받아지면, 다시 실행할거냐고 물어봅니다.

Yes를 눌러주면, 다시 이클립스가 다시 시작되면, 상단 아이콘 리스트에 폰갭 아이콘이 등장 합니다.

이게 보인다면, 설치는 끝나셨습니다.

이제 한번 어떻게 뜨는지 시행을 해봐야 겠지요.

생성된 아이콘을 꾹 눌러 주세요~

확인하고 눌러주시면, 위에 창이 뜹니다.

아마 jQuery Mobile은 체크가 처음엔 안되있으실 거예요.

체크를 해주시고, Next!

project name은 임시로 'Hi' 라고 적어 보겠습니다.

Next!

*Project Name의 첫자는 대문자로 적어주세요.

위 처럼 체크되있다면 그냥 Next!

요창이 뜨면, Package Name은 뭐라고 원래 적혀있는게 있는데, 그걸 지워 주고 저렇게 적어주세요.

'com.app.Hi' 라고 적어주시면, Finish 버튼도 활성화 됩니다.

클릭 해주시면, 왼쪽창에 새롭게 'Hi'라는 폴더와 여러 내용의 파일이 붙어서 떠있습니다.

*Package Name은 'com.app.'Project Name' 입니다.

이때 적는 Project Name은 소문자여도 상관없습니다.

처음 뜨는 페이지는 아마 Hi > assets > www 안에 'index.html'이실 겁니다.

거기에 프로그램을 짜면 됩니다.

하지만, 이대로는 아무리 프로그램을 잘짜도 실행이 되지 않습니다.

자세이 보시면 Hi와 하위 폴더 중 src에 붉은색의 X표가 있습니다.

이 붉은색 X표를 지워 줘야 겠지요!

추적해 들어가면 'MyPhoneGapAcitivity.java'란 파일이 있습니다.

클릭해서 해서 보면, 빨간 네모창과 쪽에 import가 두번 적혀있습니다.

하나를 지우고, 저장해 주면, 빨간X표는 사라집니다.

저게 폰갭의 고질적인 오류라고 하는데, 어쩔 수 없으니, 실행할 때마다 지워 줍시다!

이제 index.html로 들어가서 작성을 해주시면 됩니다.:D

파란박스안에 있는 내용은 마음껏 바꿔 주셔되 됩니다.:D

이왕 실행해 보는거 간단하게 수정해서 시험해 보셔도 좋을거 같습니다.

상단 아이콘들 중 초록색 플레이 모양을 눌러 주시면, 이제껏 설정 했던 보람을 느끼 실수 있습니다.!

안드로이드가 돌아가면서, 작성한 프로그램을 실행 시켜 줍니다~ 

이렇게요!

혹시나 재생을 눌렀는데, 안뜨시는 분들은 앞에 포스팅했던, SDK의 AVD가 제대로 등록되어있는지 확인해 주세요,

SDK 실행하기 포스팅에서 등록하는 방법이 있습니다.:D

AVD 등록

등록이 됬는데도 안되는 분들은 index.html을 오른쪽 버튼을 눌러서 박스의 경로를 따라 Run Configurations...를 실행 시켜 주세요.

실행이 되었다면, Browse...를 열어서 해당 파일을 눌르고 OK >Run을 누르고 다시 재생버튼을 눌러 주시면 되실 겁니다.

나중에 파일이 많아지면 훨씬 자주 쓰니 기억해 두시는게 좋으실 듯 합니다.

저번에 SDK를 설치를 하였습니다.

이번엔 실행을 해보도록 하겠습니다.

혹시나 설치를 못하신 분들은 이전글에서 설치를 확인해 주세요:D

이전글 확인은 클릭해 주세요:D

eclipse를 실행 해 주시고, Help에 Install New Software...에 들어가 주세요.

들어가 시면 아래 창이 나옵니다.

위에 Add...를 클릭해 주세요.

창이 나오면 name값과 Location에 동일히 적어주고 OK를 눌러주세요.

혹시나 오류가 뜨시는 분들은 Location란에 'http://'를 'https://'로 고쳐서 적어봐 주시면 완만히 넘어가실 겁니다.

설정이 제대로 먹혔다면 보이지 않았던 아이콘이 떠있습니다.

체크~

체크를 하고 다음을 눌러주면 이렇게 리스트가 있습니다.

어려운건 딱히 없네요:D

위 쪽 체크해 주셔야 Finish  버튼이 활성화 됩니다.

체크해 주시고, Finish~

이제 다운로드가 진행 됩니다.

영어로 여러 알림 창이 뜹니다.

OK가 있는건 OK 

OK가 없는건 Cancel 혹은 No 등등을 눌러 주시면 됩니다.

다운이 완료되면 eclipse가 다시 실행 됩니다.

이렇게 됬다면 완료!

하지만, 이렇게 설치를 끝내도 아직은  SDK를 활성화 되지 않았습니다.

완전히 실행 하기 위해선 조금더 설치가 필요 합니다.

위처럼 window에서 아이콘을 찾아 갑니다.

요런 설정 창이 뜨면 Action Set Availability에 들어가면 표시된 아이콘을 체크해 활성화를 시키고, OK버튼을 눌러 줍니다.

이것 까지 완료되면 드디어 아이콘이 생성됩니다.

요렇게 안드로이드 마크가..!

하지만 이렇게 끝나지 않습니다.

Android SDK Manager를 클릭!

(편의를 위해 이렇게 넓게 잡았습니다.)

아마 열어보시면, 첫번째 빨간 박스에 체크가 되어있으실 겁니다.

그러면 체크를 풀어 주고, 두번째 빨 간박스를 체크해 주세요.

저는 아직 기초를 배우고 있어서 많은걸 다운 받지 않고, 기초에서 실습할 내용 위주로해서 받았습니다.

필요하신게 있으면, 추가로 받으셔도 되고, 언제든 이 메뉴에 들어와서 추가로 받으실 수 있습니다.

하위 요소들을 일일이 체크하고 풀어주시는 것 보단 제가 표시해논 곳을 한두번 클릭 하셔서 하시는게 더 빠르실 거예요~

체크를 하고 Install~

여기도 빨간 박스처리한 곳을 활성화 시켜서  Install~

다운로드가 다 진행이 되면 꺼 주시면 됩니다.

이제 실행이 재대로 되나 체크해 볼까요?

아까 window메뉴에서 새로이 활성된 안드로이드가 2마리였죠?

처음에 위에 있는 아이를 데리고 했다면, 이번엔 밑아 아이로 실행을 시켜 봅시다.

이 이미지에선 표시가 안됬는데, create...을 클릭해 주세요

클릭해 주시면, 요런 창이 뜹니다.

name은 자유로 지정해 주세요~

저는 갤럭시 시리즈를 쓰고 있으니 갤럭시로 설정해 볼게요~

넥서스는 아니지만요,...;

skin도 no skin으로 바궈주시고,

그리고, SD카드 사이즈도 랑 박스도 변경해 주세요~

그리고 OK~

위에 설정하신 이름이로 이런 아이콘이 뜹니다.

그러면 요렇게 한번 클릭하고, Start!

핸드폰 화면처럼 로딩이 되네요!

요렇게 바탕화면이 든답니다.!!

심지어 실행은 전화 빼고 다됩니다.

느리고, 전화는 안되지만, 처음 실행하고선 완전 신기해서 들여다 보았답니다.

요 방법으로 핸드폰 모델을 여러개로 바꾸어 가며 실행해 볼 수있어, 호환성도 알아보기 쉽겠지요?

기초 공부로 홈페이지 제작을 하다가 이제 본격적으로 하이브리드 앱을 만드리기 위해서 필요한 프로그램 설치 및 컴퓨터 내 환경설정을 해주게 됬습니다.

사용하는 대표 프로그램은 JDK / eclipse/ SDK 3가지이고,

각각의 용도에 대해 간단히 말해 보면

JDK는 개발 키트 세트이고,

eclipse는 키트들을 불러오는 메시지 창,

SDK는 어플로 잘 실행 되는지 확인 할 수있는 확인창 입니다.

설치 순서는 JDK > eclipse >SDK 순으로 설치 해 주세요~

다운 받으실 때는 크롬으로 받으시는 걸 추천드립니다.

익스플로져는 접속이나 다운에서 오류가 생길 수 있습니다.

1. JDK

Oracle <클릭

위 사이트에 들어가서 이미지대로 클릭클릭 해주시면 됩니다.

이미지가 조금 복잡해 보이지만 전혀 복잡하지 않아요~ 순서대로 클릭클릭 해주세요

확대 한걸 보시면 저 라디오 버튼을 클릭해 주시면 클이 엄청 써진 창으로 변화 되면서 밑에 있는 리스트를 클릭 할 수있게 되는데요,

그러면 이제, 자신의 컴퓨터 버전에 맞는 프로그램을 설치해 주면 됩니다.

혹시나 버전을 모르신다면, 내컴퓨터>속성을 확인해 주세요.

그러면 아래의 창이뜬답니다.

제가 사용하는 컴퓨터는 '64비트 운영체제' 이네요~

확인이 되셨으면 자신에게 맞는 버젼을 찾으셔서 받아서 실행을 합니다.

실행을 하셨다면 딱히 수정할게 없이 계속 Next를 눌러서 넘겨 줍니다.

경로는 바꾸지 않는걸 추천드립니다.

잘 설치가 되었는지 궁금 하시겠죠?

그렇다면 실행에서 cmd를 실행 시켜 주세요~

시작에 바로 없다면 보조 프로그램에 실행이 있답니다.

실행이 되면 밑줄 부분을 쳐주시면 됩니다.

그러면 버젼 정보가 뜹니다.

만약 뜨지 않는 다면 설치가 제대로 되지 않은 겁니다.

Java가 제대로 설치 되지 않으면 eclipse도 실행 할 수없고, eclipse가 실행되지 않으면, SDK도 실행되지 않습니다.

2. eclipse

eclipse<클릭

eclipse도 설치는 크게 어렵지 않습니다.

클릭클릭~ 다운을 받아주세요~

주의점! 아까 운영체제확인해 주셨지요? 2번에서 운영체제를 둘중 선택하라고 써있습니다.

eclipse는 알집으로 받아집니다.

알집을 원하시는 곳에 풀어주세요~

다 풀었다면 위 이미지 처럼 목록이 쭉 있는데 그중에 체크 된 아이를 실행 시켜주세요.

처음엔 로딩이 조금 길답니다.

기다려 주셨다면 위에 창이 뜹니다.

저건 앞으로 프로젝트를 어디에 저장 할까 묻는 내용입니다.

잘 찾을 수 있는 파일을 설정해 주시고,

아래에 더이상 묻지 말라고 아래 박스를 체크해 주고, OK를 눌러주시면 더이상 묻지 않습니다.

이러면 eclipse도 설치가 완료 되었습니다.:D

3. SDK

Developers<클릭

마찬가지로 위에 사이트에 접속해 주시고, 바로 스크롤을 쭉쭉쭉 내리다 보면 저렇게 쓰인 아이가 있습니다.

이제 클릭 클릭~

설치 할 때 체크 주의 해 주시고, 이미지엔 없지만, 설치 경로를 기억 하신다면 상관없지만, 아니라면 편한 곳에 설치해 주셔야 합니다.

나중에 설정체크를 할때 경로를 기억하고 있으셔야 합니다.

이렇게 하면, 기본 설치는 끝났습니다.:D

다음 포스팅은 기본 환경 설정으로 해볼까 합니다.

학교랑 집이랑 기초 설정을 맞추고 있는데, 햇갈리네요;

저는 SDK를 이미 경로를 잘 못 설정해서 못찾아서 다시 설치했답니다.;;

여러분들은 실수 하지마시고, 한번에 설치하시기 바랍니다.