1일차 : Sencha Touch 2 개발 환경 구축

먼저 Sencha Touch 2 를 테스트 하기 위해서는 기본적인 개발 환경 구축이 필요하다.

오늘은 Tomcat 설치 및 가장 기본적인 프로그램을 생성하는 시간을 가져보도록 하겠다.

1. Tomcat 설치

톰캣이 필요한 이유는 센차터치를 활용하여 모바일 웹앱을 만들 때 서버로 부터 데이터를 주고 받는다는 이유 하나와,

HTML 파일을 서버에 두고 테스트 하기 위함이다. 무슨 말인지 잘 몰라도 일단은 넘어가자.

http://tomcat.apache.org/ 

여기 사이트로 가서 좌측에 download 부분에 Tomcat 7.0 을 선택한다.

그리고 중간 즈음에 

빨간색으로 체크된 것을 클릭해서 다운 받는다. 

다운로드가 완료되면 인스톨을 시키면 된다. 이 때 나 같은 경우에는 설치 위치를 D 드라이브로 잡았다.

아래 사진은 내가 설치한 위치 정보

자 이렇게 하면 톰캣이 설치가 된 것이다.

톰캣을 돌려 보고 싶으면 위의 사진에서 bin 폴더로 들어가면 그 안에 Tomcat7 실행파일이 있는데 이 것을 실행시키면 된다.

아래는 Tomcat7 을 실행시켰을 때 화면이다. 

2. Sencha Touch 2 설치

Sencha Touch 2 SDK 와 SDK Tools 를 Sencha website 로 부터 다운 받아야 한다.

2-1) Sencha Touch 2 SDK 

http://www.sencha.com/products/touch/download/

위의 링크된 주소로 가서 거기서 Free Commercial Version 에 e-mail 주소를 입력한 뒤 download 를 클릭한다. 아래와 같은 화면에 입력하면 된다.

그러면 내가 입력한 메일로 아래와 같은 형태의 메일이 온다. 메일 내용 중 download sencha touch 를 클릭하자.

그럼 압축 파일을 받게 되는데 해당 압축 파일을 적절한 위치에 풀어준다. 이 때 압축을 풀어주는 위치는 먼서 설치한 Tomcat 서버 관련

폴더 밑에 두는 것이 좋다. 압축을 풀었을 때 모습은 아래와 같다. 빨간색 박스를 보면 Tomcat 서버 및에 ROOT 밑에 st2 라는 폴더를 만들고 

그 안에 압축을 푼 것을 볼 수 있다.

Sencha Touch 2 SDK 와 SDK Tools 를 Sencha website 로 부터 다운 받아야 한다.

2-1) SDK Tool

http://www.sencha.com/products/sdk-tools/download

위의 링크를 클릭 한 뒤 Version 2.0.0 Beta 3 for Windows 를 선택!(Mac 이라면 아래의 Mac 아이콘 선택) 화면은 아래와 같다.

파일을 다운 받고 나면 해당 파일을 실행해서 설치해 준다.

3. Chrome 혹은 Safari 설치

이 두 개 중 하나의 웹 브라우저를 설치한다. 필자는 Chrome 을 활용하여 앞으로 쭈욱 설명할 것이므로, 가급적이면 Chrome 을 설치하는게 좋을 거 같다.

그렇다고 내가 Chrome 으로 부터 무슨 돈을 받는다던지 그런건 아니다.ㅋ

4. 지금까지 잘 진행해 왔다면,,

http://localhost:8080/st2/docs/

위 링크를 크롬의 주소창에 입력하고 엔터를 쳤을 때 아래와 같은 화면이 나와야 한다. 

url 에 빨간색 친 부분을 보면 localhost 로 되 있는 것을 볼 수 있다.

또 지금까지 잘 따라왔다면 아까 sencha touch 2 를 압축 푼 곳에 가서 sencha 라는 명령어를 입력하면 아래와 같은 사진이 떠야 한다.

지금까지 sencha touch 2 개발 환경 구축에 대해 알아봤다.

다음 시간은 가장 기본적인 센차터치 프로그램 생성에 대해 알아보도록 하자.