728x90
프로그래밍 학습 방식은 상향식과 하향식이 있다
상향식은 원리와 하부구조와 같은 원리를 먼저 이해하고 응용기술을 학습하는 방식이며
하향식은 응용기술을 구현하면서 원리와 하부구조를 이해해 가는 방식을 말한다
이를테면 OS원리와 메모리구조, 알고리즘과 같은 하부구조나 원리를 먼저 학습하고 C언어, 닷넷을 공부하는 방식을 상향식이라 할 수 있는데 대체로 정석 공부법으로 통하며 프로그램을 제대로 시작하고 싶은 시간많고 의지충만한 이들에게 권하는 방법이다. 반면 언어의 문법을 빠르게 학습하고 웹 사이트나 응용프로그램을 개발하면서 부딪히는 이슈를 해결하면서 부족분을 채워나가는 방식을 하향식이라 할 수 있는데 대체로 많은, 비 전공이면서 빠르게 개발을 하고 싶은 이들에게 권장하는 방식이다
물론 이 분류는 순수히 개인적인 구분이다. 그러나 대체로 개발자라면 무슨 말인지 이해가 될 것이다.
수 많은 개발자들이 하향식으로 접근하고 있으며 안타깝게도 하향식에서 머물러 있기도 한다
대체로 상향식이 정도로 통하며 막 시작하는 입문자에게 권장하기도 한다
심지어 경력이 꽤 쌓인 개발자들도 자조 섞인 목소리로 하향식에 머문 자신과 다른 개발자들을 비판하곤 한다
물론 그런 비판 속에 필자 역시 100% 떳떳할 수 없다고 고백한다
이 글에서 이런 말을 언급하는 이유는, 개발자의 학습 형태나 자질은 논하고자 하는 것은 아니다
원론적인 측면에서 비판받고 있는 하향식 학습이, 경우에 따라선 의미 있기도 하다는 것을 말하려 한다
지금 빠르게 학습 중인 jQTouch 가 그에 해당한다. 일주일에 어느정도 끝을 보려 하는 이 공부는 사용법에 초점을 맞추고 있다. 내부적으로 jQTouch 가 어떤 코드로 돌아가는지 (매우 궁금하지만) 당장 필요하지는 않다.
특히 jQTouch와 같은 원천기술을 몇 단계 랩핑한 라이브러리는 그 원리의 이해가 꼭 필요하지도 않다.
따지자면 브라우저, 자바스크립트, jQuery, jQTouch 로 이어진 원리와 그 사용법의 학습으로 이어질 수 있는데 jQTouch 를 이용하는 목적에 비해 너무 많은 노력을 할애해야 한다는 것이다.
그리고 또, 흔히 비판받는 코딩 기법인 'Code and Fix' 형태의 학습방식도 취하고 있다
Code and Fix는 일단 코드부터 짜 보고 고친다는 뜻인데, 제대로 설계하지 않고 무작정 코드부터 짜고 적당히 버그를 고치면서 일하는 방식을 말한다. 대단히 비판받는 업무 방식으로 제대로된 설계와 잘 짜여진 코드의 중요성을 강조할 때 언급된다. 그러나 이 방식 역시 간단한 테스트나 프로토타입 수준의 학습에는 일면 효율적이기도 하다
뭐, 잡설이 길었지만 핵심은 한가지 이다
현재 개인적으로 빠르게 진행중인 jQTouch 학습은 다분히 하향식 그리고 Code and Fix 형태로 진행하고 있지만 주제와 학습 목적에 비추어 보면 나름 적절하다는 것이다
(물론 그 어떤 좋은 포장이라도, 개발이 매우 생소한 입문자라면 정도를 따르는 것이 좋다)
이제 주제로 들어가자. jQTouch 를 통한 페이지 전환이다
대부분 웹 개발자들은 '페이지 이동' 개념이 명확하다. A페이지 -> B페이지로의 이동은 링크로 통한다
웹의 하이퍼텍스트, 하이퍼링크 구조에 기반한 명백한 개념이지만 이 개념이 다른 환경에서는 걸림돌이 되기도 한다. 간혹 웹 개발자가 윈도우응용개발을 할 때 혼란을 느끼는 부분이기도 하다.
jQTouch는 다분히 웹앱에 초점이 맞춰진 개발 플랫폼이며 페이지라는 개념보다 뷰(View) 라는 개념이 더 어울린다. 즉 순수 웹 환경에서의 화면은 페이지인 경우가 많으며 화면의 전환은 곧 페이지의 이동을 의미하는 반면 웹앱에서의 화면은 뷰라 할 수 있으며 화면 전환은 뷰의 교체를 의미한다고 할 수 있다. 다시말해 뷰의 활성화(Show) 그리고 비활성화(Hide)의 개념이라 할 수 있겠다. 물론 jQTouch 에서도 링크를 통한 페이지 이동이 지원된다. 다만 기본적으로는 뷰의 전환이라는 개념이 사용된다.
내부 div 의 전환
jQTouch 가 지원하는 페이지 이동의 개념은 기본적으로 div 요소의 전환을 의미한다. 즉 다음과 같이 A라는 div 에서 B라는 div 로의 링크가 곧 화면의 전환이다. 이런 형태가 jQTouch 에서 매우 보편적인 화면 전환방법이다.
즉 jQTouch 기반 웹앱은 이런 형태의 화면 전환 처리를 권장한다.
외부 링크
내부 div 전환이외에도 일반적인 페이지 링크가 지원된다. 외부 링크를 사용할 땐 target 을 명시하여 이동대상을 지정할 수 있다. 다음 코드는 새창으로 새 페이지를 연다는 의미이다
만일 새창을 열고 싶지 않다면 target="_webapp" 을 설정하면 된다. 또 다른 방법으로는 rel 속성을 지정할 수 있다. 다음코드와 같이 링크태그에 rel 속성을 지정하면 페이지 이동이 가능하다
Back 버턴
jQTouch 에서는 div 로 화면을 전환했을 때 '뒤로가기' 기능을 자동으로 지원한다. 다음과 같이 a 태그 class 속성에 "back" 을 지정하면 이동 전 div로 다시 돌아간다
이때 사용되는 이미지는 jQTouch 객체 생성때 지정한 다음의 이미지가 이용된다
마지막으로 여기서 설명한 내용을 포함하는 데모이다. 차례대로 첫페이지와 div 전환, 페이지 이동을 캡쳐한 것이다
상향식은 원리와 하부구조와 같은 원리를 먼저 이해하고 응용기술을 학습하는 방식이며
하향식은 응용기술을 구현하면서 원리와 하부구조를 이해해 가는 방식을 말한다
이를테면 OS원리와 메모리구조, 알고리즘과 같은 하부구조나 원리를 먼저 학습하고 C언어, 닷넷을 공부하는 방식을 상향식이라 할 수 있는데 대체로 정석 공부법으로 통하며 프로그램을 제대로 시작하고 싶은 시간많고 의지충만한 이들에게 권하는 방법이다. 반면 언어의 문법을 빠르게 학습하고 웹 사이트나 응용프로그램을 개발하면서 부딪히는 이슈를 해결하면서 부족분을 채워나가는 방식을 하향식이라 할 수 있는데 대체로 많은, 비 전공이면서 빠르게 개발을 하고 싶은 이들에게 권장하는 방식이다
물론 이 분류는 순수히 개인적인 구분이다. 그러나 대체로 개발자라면 무슨 말인지 이해가 될 것이다.
수 많은 개발자들이 하향식으로 접근하고 있으며 안타깝게도 하향식에서 머물러 있기도 한다
대체로 상향식이 정도로 통하며 막 시작하는 입문자에게 권장하기도 한다
심지어 경력이 꽤 쌓인 개발자들도 자조 섞인 목소리로 하향식에 머문 자신과 다른 개발자들을 비판하곤 한다
물론 그런 비판 속에 필자 역시 100% 떳떳할 수 없다고 고백한다
이 글에서 이런 말을 언급하는 이유는, 개발자의 학습 형태나 자질은 논하고자 하는 것은 아니다
원론적인 측면에서 비판받고 있는 하향식 학습이, 경우에 따라선 의미 있기도 하다는 것을 말하려 한다
지금 빠르게 학습 중인 jQTouch 가 그에 해당한다. 일주일에 어느정도 끝을 보려 하는 이 공부는 사용법에 초점을 맞추고 있다. 내부적으로 jQTouch 가 어떤 코드로 돌아가는지 (매우 궁금하지만) 당장 필요하지는 않다.
특히 jQTouch와 같은 원천기술을 몇 단계 랩핑한 라이브러리는 그 원리의 이해가 꼭 필요하지도 않다.
따지자면 브라우저, 자바스크립트, jQuery, jQTouch 로 이어진 원리와 그 사용법의 학습으로 이어질 수 있는데 jQTouch 를 이용하는 목적에 비해 너무 많은 노력을 할애해야 한다는 것이다.
그리고 또, 흔히 비판받는 코딩 기법인 'Code and Fix' 형태의 학습방식도 취하고 있다
Code and Fix는 일단 코드부터 짜 보고 고친다는 뜻인데, 제대로 설계하지 않고 무작정 코드부터 짜고 적당히 버그를 고치면서 일하는 방식을 말한다. 대단히 비판받는 업무 방식으로 제대로된 설계와 잘 짜여진 코드의 중요성을 강조할 때 언급된다. 그러나 이 방식 역시 간단한 테스트나 프로토타입 수준의 학습에는 일면 효율적이기도 하다
뭐, 잡설이 길었지만 핵심은 한가지 이다
현재 개인적으로 빠르게 진행중인 jQTouch 학습은 다분히 하향식 그리고 Code and Fix 형태로 진행하고 있지만 주제와 학습 목적에 비추어 보면 나름 적절하다는 것이다
(물론 그 어떤 좋은 포장이라도, 개발이 매우 생소한 입문자라면 정도를 따르는 것이 좋다)
이제 주제로 들어가자. jQTouch 를 통한 페이지 전환이다
대부분 웹 개발자들은 '페이지 이동' 개념이 명확하다. A페이지 -> B페이지로의 이동은 링크로 통한다
웹의 하이퍼텍스트, 하이퍼링크 구조에 기반한 명백한 개념이지만 이 개념이 다른 환경에서는 걸림돌이 되기도 한다. 간혹 웹 개발자가 윈도우응용개발을 할 때 혼란을 느끼는 부분이기도 하다.
jQTouch는 다분히 웹앱에 초점이 맞춰진 개발 플랫폼이며 페이지라는 개념보다 뷰(View) 라는 개념이 더 어울린다. 즉 순수 웹 환경에서의 화면은 페이지인 경우가 많으며 화면의 전환은 곧 페이지의 이동을 의미하는 반면 웹앱에서의 화면은 뷰라 할 수 있으며 화면 전환은 뷰의 교체를 의미한다고 할 수 있다. 다시말해 뷰의 활성화(Show) 그리고 비활성화(Hide)의 개념이라 할 수 있겠다. 물론 jQTouch 에서도 링크를 통한 페이지 이동이 지원된다. 다만 기본적으로는 뷰의 전환이라는 개념이 사용된다.
내부 div 의 전환
jQTouch 가 지원하는 페이지 이동의 개념은 기본적으로 div 요소의 전환을 의미한다. 즉 다음과 같이 A라는 div 에서 B라는 div 로의 링크가 곧 화면의 전환이다. 이런 형태가 jQTouch 에서 매우 보편적인 화면 전환방법이다.
즉 jQTouch 기반 웹앱은 이런 형태의 화면 전환 처리를 권장한다.
<div id="A">
<a href="#B">Div Switch</a> <!-- A 화면에서 B화면으로의 이동 -->
</div>
...
<div id="B"> ... </div>
<a href="#B">Div Switch</a> <!-- A 화면에서 B화면으로의 이동 -->
</div>
...
<div id="B"> ... </div>
외부 링크
내부 div 전환이외에도 일반적인 페이지 링크가 지원된다. 외부 링크를 사용할 땐 target 을 명시하여 이동대상을 지정할 수 있다. 다음 코드는 새창으로 새 페이지를 연다는 의미이다
<a href="SecondPage.html" target="_blank">Page Transfer(_blank)</a>
만일 새창을 열고 싶지 않다면 target="_webapp" 을 설정하면 된다. 또 다른 방법으로는 rel 속성을 지정할 수 있다. 다음코드와 같이 링크태그에 rel 속성을 지정하면 페이지 이동이 가능하다
<a href="SecondPage.html" rel="external">
Back 버턴
jQTouch 에서는 div 로 화면을 전환했을 때 '뒤로가기' 기능을 자동으로 지원한다. 다음과 같이 a 태그 class 속성에 "back" 을 지정하면 이동 전 div로 다시 돌아간다
<a class="back" href="#">Back</a>
이때 사용되는 이미지는 jQTouch 객체 생성때 지정한 다음의 이미지가 이용된다
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
......................................
]
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
......................................
]
마지막으로 여기서 설명한 내용을 포함하는 데모이다. 차례대로 첫페이지와 div 전환, 페이지 이동을 캡쳐한 것이다
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>First Page</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#secondDiv">Div Switch</a></li>
<li class="forward"><a href="SecondPage.html" target="_blank">Page Transfer(target="_blank")</a></li>
<li class="forward"><a href="SecondPage.html" target="_webapp">Page Transfer(target="_webapp")</a></li>
<li class="forward"><a href="SecondPage.html" rel="external">Page Transfer(rel="external")</a></li>
</ul>
</div>
<div id="secondDiv">
<div class="toolbar">
<h1>Second Page</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#home">Back</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>First Page</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#secondDiv">Div Switch</a></li>
<li class="forward"><a href="SecondPage.html" target="_blank">Page Transfer(target="_blank")</a></li>
<li class="forward"><a href="SecondPage.html" target="_webapp">Page Transfer(target="_webapp")</a></li>
<li class="forward"><a href="SecondPage.html" rel="external">Page Transfer(rel="external")</a></li>
</ul>
</div>
<div id="secondDiv">
<div class="toolbar">
<h1>Second Page</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#home">Back</a></li>
</ul>
</div>
</body>
</html>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
|---|---|
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
| [jQTouch] jQTouch - 기본 환경 설정 (0) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (0) | 2010.10.12 |
