본문으로 바로가기

[Hybrid] jQuery Mobile 페이지 전환 방법

category Study/Mobile App Dev 2015.03.12 17:38


jQuery Mobile 은 기본적으로 Single Page Application 으로 되어 있습니다. 따라서 우리가 데스크탑 PC의

브라우저서 보는 것과 같은 여러 페이지의 이동이 실질적으로 jQuery Mobile로 만든 App에서 발생하는 것

은 아닙니다. 다만 jQuery Mobile에서는 마치 여러 페이지를 이동하는 것처럼 보이도록 해줄 뿐 입니다.


물론, 모바일 App에서도 데스크탑 PC 브라우저에서 처럼 여러 페이지를 옮겨갈 수 있도록 구현할 수는 있

습니다. 단, 그것은 분류상 모바일웹 방식으로 만들어진 것으로 우리가 흔히 말하는 App이라고 볼 수는

없을 것입니다.


jQuery Mobile App 에서 페이지 전환을 구현하는 방법으로 2가지 방법이 있으며, 각각의 장단점은 다음

과 같습니다.



2가지 페이지 전환 방법




1. page 1개당 1개의 HTML 파일로 만드는 방법 (추천)


 - Main HTML DOM 에 다른 페이지 HTML 을 껴넣는 방식으로 모바일웹과 달리 로딩된 Main HTML은 

   계속 유지 됩니다.


 장점 : 분업하기가 편하다.

 단점 : 속도가 약간 저하된다.  

 

 Main HTML DOM에 다른 HTML을 껴넣을 때 DOM 트리를 다시 구성하는 리플로우가 발생하여 상대적으

 로 약간의 속도저하가 발생할 수 있습니다.





2. 1 개의 HTML에 여러 page를 작성하는 방법 (비추천)


 - Main HTML에 div 태그를 이용하여 여러개의 page를 배치하고, jQuery Mobile 라이브러리를 통해

   show/hide 방식으로 페이지를 전환하는 방법입니다.

 

 장점 : DOM 트리에서 리플로우가 일어나지 않기 때문에 상대적으로 빠르다.

 단점 : 분업하기가 어렵다. 초기 로딩 속도가 느리다.




두번째 방식은 첫 로딩 시 방대한 Main HTML을 로딩하기 때문에 App 구동 초기에 상당히 느릴 수 있습

니다. 따라서사용자 관점에서 모바일 App의 초기 로딩은 굉장히 중요한 부분이기 때문에 비추천하는 방식

입니다. 


또한 하나의 Main HTML 파일에 여러명의 개발자가 붙게되어 분업하기 어려운 단점이 있기 때문에 

첫번째 방식을 권장합니다. 





 


댓글을 달아 주세요