Surfin' Milkyway

웹앱 과정 - 제이쿼리 모바일 (1)

16 Apr 2020 | jQuerymobile

제이쿼리

  • 자바스크립트의 라이브러리

제이쿼리 모바일

  • jQuery를 확장한 프레임워크
  • HTML5 태그 기반 개발 방식으로 배우기 쉬움
  • 대부분의 모바일 플랫폼을 지원
  • 폰갭과 조합이 용이함

부트스트랩은 pc, mobile 어느 장비에서나 화면을 편리하게 볼 수 있도록 하는 것 but 제이쿼리 모바일은 모바일만의 특성을 참고하여 만든 것

제이쿼리가 아니라 css가 모바일에 맞게 구성되어 있다고 생각하면 됨

프레임워크(라이브러리) 연결 방식

CDN(Contents Delivery Network) 방식

  • 일정 서버에 이 파일을 두고 필요할 때 끌어다 쓰는 방식
  • 자동으로 가장 가까운 서버에서 다운받도록 하는 기술
  • 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라진다.
  • 해당 서버와 웹사이트를 제공하는 서버에서 병행 다운로드가 가능하기 때문에 모든 page에서의 지연을 줄여 준다. 하지만 로컬에서 호스팅될 때는 오히려 지연시간이 늘어날 수도 있다.
  • 인터넷과 연결이 되어 있어야만 나온다.
  • 주소가 바뀌면 사용 불가능
  • 항상 library 버전의 의존성(?)을 설정해주어야 한다. (jQuery에서는 자주 일어나는 일은 아니지만, 가능성은 있다) ```HTML

### 다운로드 방식
- 일반적으로는 많은 경우 다운로드 방식을 사용한다.
```HTML
<link rel="stylesheet" href="jquery.mobile.1.4.5.min.css" />

어떤 것을 다운받든 간에 라이브러리 페이지에 가 보면 보통 두 가지의 버전이 존재한다.

  1. 최신 버전
  2. stable 버전

다운받을 때 웬만하면 stable 버전을 다운받을 것

일반적으로 IE6 혹은 예상치 못한 오류에 대비하기 위하여 이렇게 쓸 수 있다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.2.min.js"><\/script>')</script>

jQuery도 자바스크립트 파일이므로 </body> 앞에 삽입할 것

CSS3 파일, 제이쿼리 스크립트 파일, 제이쿼리 모바일 스크립트 파일 순으로 HTML5 마크업에 포함되어야 한다.

프레임워크 기본 구성 형식

  • data- : 커스텀 데이터 속성으로, HTML5 마크업 안에서 제이쿼리 모바일 기능을 호출하기 위한 방법 제이쿼리 모바일 프레임워크가 이를 해석하고 자동으로 HTML5의 구조를 변경하여 페이지를 화면에 표시
  • data-role="page" : 페이지 컨테이너(page container) 정의
  • data-role="header"
  • ‘data-role=”content”’
  • ‘data-role=”footer”’

커스텀 데이터 속성은 HTML5의 표준속성이 아닌, 제이쿼리 모바일 프레임워크와 이를 사용하는 사용자 사이의 미리 정의된 약속이다. HTML5 비호환 브라우저에서 커스텀 데이터 속성을 해석하지 못하더라도 오류 없이 동작한다. 필여할 경우 개발자도 직접 data-로 시작하는 속성 이름을 정의하고 필요한 속성 값을 지정할 수 있다.

화면 구성 및 페이지 연결

  • 단일 페이지 템플릿 : 하나의 HTML 문서 안에 하나의 페이지를 정의
  • 다중 페이지 템플릿 : HTML 문서 안에 둘 이상의 페이지를 정의 첫 페이지 외의 다른 페이지들은 숨겨져 있다가 페이지 링크를 통해 화면이 전환되면서 표시된다.

다중 페이지 템플릿은 초기에 모든 페이지를 읽어 들이는 부담이 있지만 한번 로드된 후에는 페이지 연결 속도가 매우 빠르다. -> 순차적으로 읽어야 하는 페이지나 자주 함께 사용되는 페이지들은 다중 페이지 템플릿으로 구성하는 것이 좋다. 단일 페이지 템플릿은 첫 페이지는 빨리 보여주지만 요청할 때마다 페이지를 매번 읽어와야 하므로 응답 시간은 늦어진다.

페이지 연결 방식

  • 일반적으로 웹앱은 여러 화면[페이지]들이 유기적으로 연결됨
    1. 내부 페이지 연결 방식
    2. 외부 페이지 연결 방식

내부 페이지 연결

  • 하나의 HTML 파일 안에 여러 페이지를 명세하여 서로 연결
  • 각 내부 페이지들은 Ajax를 통해 내부 링크 방식으로 연결된다.
  • 같은 HTML 파일 안에 함께 정의된 페이지들은 항상 내부 페이지 연결 방식을 취한다.
  • 제이쿼리 모바일은 페이지를 이동할 때마다 화면 전환 효과를 자동으로 적용한다.
  • 비동기 방식으로 페이지 일부만 대체함으로써 빠른 응답과 자연스럽고 부드러운 사용자 경험을 제공
  • 내부 링크로 연결되는 내부 페이지와 외부 페이지는 브라우저에 의해 하나의 DOM 트리 객체로 관리된다.

외부 페이지 연결

  • 여러 HTML 파일 안에 페이지들을 나누어 명세하고 서로 연결
  • 이전 페이지를 메모리에서 제거하고 새 페이지로 새롭게 대체한다.

페이지 도메인 링크 방식

  • 내부 페이지 연결 방식은 항상 내부(도메인) 링크 방식

외부 페이지의 내부 링크 방식

  • 기본적으로 하나의 HTML 문서는 하나의 DOM 트리를 구성
  • 제이쿼리 모바일은 내부(도메인) 링크 방식으로 연결하면 DOM 트리를 새롭게 생성하는 것이 아니라 연결된 외부 페이지를 현재의 DOM 트리에 추가
  • DOM 트리에서 중복되는 엘리먼트 노드만 제거된다.
  • 물리적으로는 다른 파일 안에 있더라도 내부 링크 방식으로 연결된 페이지들은 하나의 DOM 트리를 구성 -> Ajax에 의해 자연스러운 화면 전환 애니메이션을 사용 가능

외부 페이지의 외부 링크 방식

  • Ajax를 사용하지 않음
  • 풀페이지(full-page) 링크 방식
  • 기존 DOM 트리는 제거하고 새로운 페이지로 DOM 트리가 구성됨 -> link에 의한 예상치 못한 변경을 차단 가능

Ajax를 통한 페이지 이동은 웹 서버를 통해 페이지를 읽어 올 경우에만 동작한다. (내 웹 페이지 -> google 페이지로 이동할 경우 동작하지 않음)

  • rel="external" : ajax를 사용하지 않고 일반 HTTP 요청 형태로 페이지를 읽어 오도록 한다. 다른 웹 사이트나 다른 도메인 안에 위치한 페이지를 링크할 때 사용한다.
  • data-ajax="false" : ajax를 사용하지 않고 일반 HTTP 요청 형태로 페이지를 읽어 오도록 한다. 같은 도메인 내에 존재하는 페이지를 읽어올 때 사용한다.

다른 페이지의 다른 자바스크립트 라이브러리 간에 링크 과정에서 충돌이 발생할 수 있다. 이를 피하기 위해 외부 도메인 링크를 설정함으로써 제이쿼리 모바일의 자바스크립트 실행을 중지하기도 한다.

페이지 전환

페이지 전환 효과

  • CSS3의 transition 스타일 속성에 기반
  • <a> 링크 태그 안에 data-transition 속성값을 설정하면 된다.
    • side : 왼쪽으로 수평이동 (기본 효과)
    • ‘sideup’ : 위쪽으로 수직이동
    • ‘sidedown’ : 아래쪽으로 수직이동(sideup의 반대효과)
    • sidefade : 수평 이동 후 서서히 나타남
    • flip : 페이지 회전(페이지 중앙 Y축 기준)
    • fade : 페이드인(서서히 나타남)
    • pop : 페이지 확장(화면 중앙에서 확대됨)
    • turn : 페이지 뒤집기
    • flow : 페이지 축소 후 좌우이동
    • ‘none’ 또는 공백 : 미적용 (전환효과 적용하지 않음)
  • data-direction="reverse" : 역방향이나 반대 애니메이션 효과가 적용됨
  • data-rel="back" : 이력 정보를 통해 바로 이전 페이지로 되돌아간다. 링크 없이도 가능. 이때 href 속성값은 무시되며 자동으로 역방향의 페이지 전환 효과가 적용된다. 하지만 브라우저에 따라 제이쿼리 모바일이 지원되지 않는 경우도 있으므로 href 속성이 단순 페이지 링크로 처리될 경우를 대비해 정확한 이전 페이지 ㄹ이크를 항상 설정해두는 것이 좋다.

외부 프로그램 링크

모바일 응용 프로그램과의 링크도 지원한다.

<!-- 이메일 -->
<a href="mailto:1002galaxy@gmail.com">
<!-- 전화번호 -->
<a href="tel:01012345678" target="_blank">
<!-- SMS -->
<a href="sms:01012345678" target="_blank">
<!-- 맵(위성좌표) -->
<a href="http://maps.google.com/maps?q=37.511611,127.098293&hl=ko" target="_blank">
<!-- 맵(주소) -->
<a href="http://maps.google.com/maps?q=대한민국+서울특별시+강남구+삼성1동+159-1&hl=ko" target="_blank">

참고

Related Posts

Comments