하이브리드 앱 개발에서 location.href 사용 후 뒤로가기 무한루프에 빠진 이유

작성자:
 하이브리드 앱을 개발하면서 단순한 페이지 이동 로직을 만들었다. 버튼을 누르면 location.href 로 다른 페이지로 이동하고, 이전 버튼을 누르면 다시 돌아오는 구조였다. 웹에서는 이전 버튼을 자주 사용하지 않기 때문에 이 부분을 깊게 테스트 해 본적이 없다. 그런데 하이브리드 앱(WebView)에서 테스트하는 순간 문제가 바로 드러났다. 뒤로가기를 누르면 이전 페이지로 돌아가는 것이 아니라 같은 페이지를 계속 반복하면서 무한루프처럼 동작하기 시작했다. 처음에는 WebView 문제라고 생각했다. 하지만 원인은 location.href 와 히스토리 스택 구조였다. location.href 로 이동할 때마다 히스토리에 페이지가 계속 쌓이고 뒤로가기를 눌렀을 때 페이지가 다시 로드되면서 이동 스크립트가 또 실행되는 구조가 만들어진 것이다. 흐름은 이렇게 반복된다. A 페이지 → location.href → B 페이지 B 페이지 → 뒤로가기 → A 페이지 A 페이지 로드 → location.href 실행 → B 페이지 이 과정이 계속 반복되면서 하이브리드 앱에서는 뒤로가기 무한루프가 발생한다. 웹에서도 발생하는 문제지만 하이브리드 앱에서는 시스템 하단의 뒤로가기 버튼이 존재하기 때문에 이 문제가 훨씬 쉽게 드러난다. 특히 Android 물리 백버튼이나 iOS 제스처 뒤로가기와 결합되면 사용자는 앱이 고장난 것처럼 느끼게 된다. 해결 방법은 간단하다. 첫 번째는 location.href 대신 히스토리를 남기지 않는 location.replace 를 사용하는 것이다. location . replace( 'pageB.php' ); 이렇게 하면 히스토리가 쌓이지 않아 뒤로가기 루프가 발생하지 않는다. 두 번째는 자동 이동 로직이 한 번만 실행되도록 조건을 추가하는 방법이다. if (!sessionStorage.getItem('moved')) { sessionStor...
댓글 쓰기

서버(Server)와 클라이언트(Client)의 쉬운 이해

작성자:

클라이언트(Client)란?

서버에 일정 서비스를 요구하는 자로서 컴퓨터에 앉아있는 "나"로 보시면 됩니다.


서버(Server)란?

클라이언트가 요청하는 정보를 제공해주는 컴퓨터 또는 정보 제공에 참여하는 컴퓨터 프로그램이라고 할 수 있습니다.


서버(Server)와 클라이언트(Client)의 관계

구글에서 내가 원하는 정보를 얻고자 하는 경우의 예를 들어보겠습니다.

찾고자 하는 정보가 "2022년 월드컵"이라 했을 경우 클라이언트인 나는 구글에 "2022년 월드컵"이라 타이핑 하겠죠? Enter 키를 치는 순간 서버는 아마도 열심히 일을 할 것입니다. 이 과정이 구글 서버 쪽에 내가 원하는 정보를 달라고 요구하는 것입니다. 그러면 구글은 정보를 담고 있는 컴퓨터에서 일정 프로그램에 의해서 클라이언트가 요구한 데이터를 검색하고 정리하여 내 컴퓨터로 보여줍니다.


즉, 클라이언트는 웹 문서, 동영상, 사진, 각종 사이트 등 원하는 서비스를 요청하는 고객이고 서버를 이러한 서비스를 만족 시킬 수 있는 정보나 처리 시스템을 가지고 있는 회사(?), 상인(?) 따위로 풀어 보면 쉽게 답이 나올 듯 합니다. 이래도 어렵나요?


이제 클라이언트나 서버라는 말이 나오면 너무 어렵게 생각하지 말고 내가 시장 가서 물건 산다고 가볍게 생각하고 컴퓨터에 앉아보세요~^^ 서버(Server)와 클라이언트(Client)

댓글

댓글 쓰기