[Sencha Touch] Hello World While이 에 작성. 2,709번 읽힘.
이 글은 http://www.sencha.com/learn/hello-world 의 글을 한글로 재전개 하면서 기본적인 내용들을 생략하고 재밌고 이해하기 쉽게 각색 한 것입니다. 기본적으로 HTML, CSS, JS 에 대한 지식이 조금 부족하신 분들은 이해가 어려울 수 있으니 질문하고 싶은 내용은 댓글로 해주세요.
Sencha Touch 의 세계로 오신 것을 환영합니다!
이 글에서는 기본적으로 어플리케이션을 만드는 법을 배울 것입니다. 화면에다가 ‘Hello World’를 출력하는 방법을 배웁니다.
Sencha Touch 다운 받기
아직 Sencha Touch SDK를 다운 받지 않으셨으면 다운받으세요. 문서, 예제 어플리케이션, 리소스 파일들, 그리고 제일 중요한 Sencha Touch 를 구동시키기 위한 자바스크립트 라이브러리와 CSS 파일들이 있습니다.
SDK를 다운받아보면 장난아니게 파일이 크다고 생각 할 것 입니다. 하지만 그건 다 뻥튀기고, 죄다 예제 파일들의 용량입니다. jQuery UI 나 ExtJS 들은 그걸 구동하기에 CSS, JS파일 그리고 꽤 많은 이미지 파일을 필요로 합니다. 하지만 Sencha Touch 는 겨우 css 파일 1개(sencha-touch.css)와 js 파일 1개(sencha-touch.css), 총 2개의 파일만 있으면 됩니다.
어플리케이션 구조
이제 헬로월드 하나 만들어볼까요? 우선 hello-world 라는 폴더를 하나 만들고 그 폴더 안에 index.html 라는 빈 파일과, lib 라는 폴더도 하나 더 만듭시다. 그리고 그안에는 아래와 같이 Sencha Touch 라이브러리 파일을 갖다 넣으세요. 사실 아래 선택된 3개의 파일만 있어도 됩니다. 다른 파일들은 넣거나 말거나!
The HTML file
Sencha Touch 는 HTML5 기반입니다. 그냥 기본적으로 아래와 같이 초기문서를 작성하시면 됩니다. 메모장이든, 워드패드든, Scite든, Notepad+든 당신이 원하는 어떤 에디터로든 상관 없습니다. index.html 파일을 열어서 아래와 같이 내용을 채우세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>저기 head, title, script, link, body 태그가 뭘 의미하는지 모르시는분 있으시다면 지금부터 이해하기가 좀 힘들 수 있습니다. HTML에 대한 어느정도 지식을 충전 하시고 난 뒤에 Sencha Touch 를 도전하시는 것을 추천합니다.
어쨌거나 저 소스로 제일 최소한의 기본적인 골격을 완성했습니다. 그냥 보통의 HTML문서와 다를바가 없습니다. Sencha Touch 용 js 파일과 css 파일이 추가 된 것 말고는요.
어플리케이션 코드
일반적으로 어플리케이션이나 웹페이지를 만들때 자바스크립트 코드는 sencha-touch.js 파일처럼 따로 .js 파일을 만든 후에 script src 태그로 링크하여 씁니다. 하지만 지금 만들 코드는 너무나 간단해서 새로 파일을 만드는 것 조차 귀찮은 짓이므로 문서 내에 포함시켜서 한번 해보겠습니다. 나중에 코드길이가 길어질때는 꼭 .js 파일을 따로 만들어 링크해야합니다. 문서내에 지금처럼 자바스크립트 코드를 포함시키는 행위는 높은 트래픽을 유발하며 꽤 많은 용량을 웹페이지 로딩시에 잡아먹게 합니다. 많이 잡아먹어야 이미지나 동영상 만큼 하겠냐만은 티끌모아 태산이라는 말도 있는 것 처럼 이 작은 파일 한두개를 신경쓰는게 내 주머니에서 나가는 비용과 내 홈페이지에서 만들어지는 돈의 갭을 넓혀줍니다.
자, 그럼 위의 코드를 아래의 코드로 바꿔줍니다. 그냥 복사해서 갖다 붙여넣지만 말고, 위의 코드와 아래의 코드가 뭐가 다른지 비교라도 한번 해보고 집어넣으세요. 비교해보는거 5초도 안걸립니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
html: 'Hello World!'
});
}
});
</script>
</head>
<body></body>
</html>변경된게 뭔지 아시겠나요? 위와 알아서 비교해보시기 바라며 뭔가 변경된지는 안가르쳐드릴껍니다. 대신 변경된 놈에 대한 설명을 해드리겠습니다.
new Ext.Application({ ... });
위의 코드가 자바스크립트로 삽입 된 것이 보일겁니다. 이 부분은 Sencha Touch 를 시작하는 완전히 첫 단계입니다. 마치 Initializer 처럼요. Ext.Application 말고도 다르게 시작할 수도 있긴 한데 아무튼 그건 지금 신경 쓸 필요 없고, 이놈이 Sencha Touch 의 제일 첫 단추라고 보시면 됩니다.
Secha Touch 인데 왜 new ST.Application 이나 new Sencha.Application 이 아니고 Ext.Application 이라고 시작하는거죠?
위처럼 Ext.는 부분에 대해서 의문을 가지실 분이 있을 것입니다. Ext. 는 Ext.js 에서 나왔습니다. Ext.js 가 뭐냐고요? Ext.js 는 Sencha Touch 를 개발한 개발사에서 만든 또 다른 자바스크립트 라이브러리인데, 이게 Sencha Touch 가 만들어지기 훨씬 전에 만들어졌던겁니다. 이 회사에서 새로 모바일용으로 만든 자바스크립트 프레임웤이 Sencha Touch 입니다. 그래서 아마 제 생각에는 Ext.JS 의 향수때문에 Sencha Touch 에도 Ext. 라는걸 붙인거 같습니다. ㅡ까지는 제 생각일 뿐이고 이해를 돕기 위해 이렇게 설명해드린 것입니다. 간단히 Sencha Touch 를 개발한 회사가 예전에 개발한 자바스크립트 라이브러리라고 그냥 생각하시면 될거 같습니다. 아마도 훗날 Ext.JS와의 연동과 연계성등을 위해서 저렇게 한 것 같습니다. 그냥 소속감을 위한 것일수도 있구요.
launch: function() { ... }
이 부분도 중요합니다. 이부분은 문서가 완전히 로딩 됐을때 실행되는 함수를 코딩하는 부분입니다. 완전히 로딩이란, 위에 HTML 소스에 적어둔 것들의 로딩을 말합니다. .js 파일이나 .css 파일이 로딩되는 것을 말하는 것이고, 이 파일들이 로딩 완료되면 위 launch 에 있는 함수가 실행되게 됩니다.
new Ext.Panel({ ... });
저 함수안에 우리는 이런 코드를 넣을 수 있습니다. 이번에는 Ext.Panel 입니다. 패널이라는데 이 패널이 뭐냐면 그냥 Sencha Touch 에서 여러 UI를 만들때 쓰는 놈입니다. 진짜 이름 그대로 패널을 만드는 놈입니다. 박스처럼 생긴놈도 만들고, 사이드바도 만들고, 툴바도 만들고, 하단툴바도 만들고 뭔 패널이든 다 만듭니다.
그중에 우리가 만들 패널은 아주 쉬운놈입니다.
fullscreen: true, html: 'Hello World!',
딱 요소의 의미만 보면 알 수 있을 것입니다. fullscreen 인 패널을 하나 생성하고 그 안에 html 은 헬로월드라는 글씨를 써주란 의미입니다. 더이상 설명 할 것이 없습니다.
결과 보기
웹브라우저로 방금 만든 페이지를 한번 열어보세요. index.html 을 열면 되겠죠? 아래와 같이 나올 것입니다. 아, IE로 접속하시면 안됩니다. 구글크롬이나 사파리같은 Webkit 기반 브라우저로 접속하셔야합니다.
이걸 폰에서도 똑같이 볼 수 있습니다. 방금 만든 파일들을 웹서버에 올리고 그 웹서버를 폰으로 접속하세요. 스마트폰만 된다는거 아시죠? 아이폰과 안드로이드폰에서 가능합니다. 웹서버 구동을 어떻게 하냐는 질문은 여기서 묻지마세요.
아이폰과 안드로이드에서는 위와 같이 보입니다.
참고로 아이패드에서도 보이는데, 화면크기가 워낙에 크다보니 컴퓨터로 연 것과 꽤 비슷합니다.
이것으로 장난아니게 간단하고 쓸때 없는 헬로월드 프로젝트 만들기를 마칩니다. 하지만 당연하게도 이건 시작에 불과합니다.
우분투에서 svn 명령어 실행시 libneon-gnutls.so.27가 없는 오류 While이 에 작성. 2,345번 읽힘.
나는 현재 리눅스를 2대 쓰고 있는데, 한대는 조금 깨끗한 우분투이고 한대는 두번째 리눅스를 써보면서 깐 것이라 조금 더러운 우분투이다. 그 조금 더러운 우분투가 얼마나 더럽냐면 svn 명령어를 써도 아래와 같은 오류가 날 정도로 더럽다.
svn: error while loading shared libraries: libneon-gnutls.so.27: cannot open shared object file: No such file or directory
아, 그렇다고 위의 오류가 나는 모든 리눅스가 더럽다는 뜻은 절대로 아니다. 아무튼 더러운 잡소리는 집어치우고 저 오류를 해결하는 방법을 찾아봤다.
libneon-gnutls.so.27 가 정말로 없을까?
가끔 저기 나오는 저 메시지가 구라틱할때가 있다. 메시지가 No such file or directory 가 나오더라도 10초정도 들여서 확인쯤은 해보자. 저 라이브러리 파일은 원래 /usr/lib 에 존재하므로 그 폴더로 가서 ls 를 해보자. 하면서 libneon 만 표시해주기 위해 grep 를 쓴다.
while@ubuntu:/usr/lib$ cd /usr/lib; ls -al | grep libneon -rw-r--r-- 1 root root 851362 2009-11-06 18:32 libneon-gnutls.a lrwxrwxrwx 1 root root 24 2011-08-15 03:11 libneon-gnutls.so -> libneon-gnutls.so.27 lrwxrwxrwx 1 root root 17 2011-08-15 03:15 libneon-gnutls.so.27 -> libneon-gnutls.so.27.2.0
아마도 이렇게 되있을 것이다. 아닐수도 있다. 분명 아닐껀데, 그냥 대충 저런식으로 있다고 치고 지금 설명을 해줄 것이다. -> 로 표시된 부분은 심볼릭링크로 연결된 부분이다. 그냥 바로가기정도의 개념이라고 이해하면 된다. 우리가 필요로 하는 libneon-gnutls.so.27 이 저기 분명히 있다. 그런데 -> 로 되있다. 연결되있단 이야기이다. 결국 libneon-gnutls.so.27.2.0 을 가르키고 있는데 이 파일은 눈씻고 찾아봐도 없다. 그러기에 결국 libneon-gnutls.so.27 은 없는 파일이라고 경고가 출력 된 것이다.
libneon-gnutls 설치해보기
그래서 결국 궁극적인 목표는 저 파일을 되살리는 것이다. 기본적으로 저 파일명을 봤을때 저 패키지를 apt-get 으로 한번 설치 해보는게 보통의 순서일 것이고 그 방법은 아래와 같다.
apt-cache search libneon을 해서 패키지들을 찾아본다. libneon25, libneon26, libneon27 등이 많이 나온다. 파일명이 so.27 이니까 27을 고르면 된다.
libneon27 - An HTTP and WebDAV client library libneon27-dbg - Detached symbols for libneon27 libneon27-dev - Header and static library files for libneon27 libneon27-gnutls - An HTTP and WebDAV client library (GnuTLS enabled) libneon27-gnutls-dbg - Detached symbols for libneon27 (GnuTLS enabled) libneon27-gnutls-dev - Header and static library files for libneon27 (GnuTLS enabled)
여기서 컴파일용 패키지는 dev 이다. 그런데 2가지가 있다. 위에서 봤듯이 우리는 libneon27-gnutls-dev 가 필요하다.
apt-get install libneon27-gnutls-dev
로 설치한다.
그리고 이제 svn 을 쳐보자. svn help 를 입력하라고 경고메시지가 띄워지는가? 아직 끝이 아니다. 아무거나 svn co 한번 해보고 되는지 확인. 되면 성공. 여기서 끝.
아직 안되면 libneon27-dev 를 설치해보기
아직 똑같은 에러가 난다면 아마 /usr/lib 에 아직도 제대로된 그 .so.27 이 안깔렸을 것이다. 내가 그랬고 어찌저찌하다가 해결하기는 했다. 그래서 내가 한 해결 방법은 아래와 같다.
apt-get install libneon27-dev
위와 같이 설치하면, ls /usr/lib | grep libneon 를 해봤을때
lrwxrwxrwx 1 root root 16 2011-08-15 03:11 libneon.a -> libneon-gnutls.a lrwxrwxrwx 1 root root 17 2011-08-15 03:11 libneon.so -> libneon-gnutls.so lrwxrwxrwx 1 root root 17 2011-08-15 03:11 libneon.so.27 -> libneon.so.27.2.0 -rw-r--r-- 1 root root 163768 2009-11-06 18:32 libneon.so.27.2.0
-gnutls 가 붙지 않은 파일들이 생긴다.
그럼 아래와 같이 해준다.
cd /usr/lib; ln -s libneon.so.27 libneon-gnutls.so.27
그리고 svn 을 작동시켜보면 될 것이다.
또 오류
포맷후 재설치를 하던가 svn 을 포기하길 바란다.