하이브리드 앱 개발에서 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...
댓글 쓰기

도메인, 루트 도메인, 서브 도메인이란?

작성자:

노드란?

네트워크 환경에 연결 되어있는 한 개의 기계를 노드라고 합니다. 즉 노드는 네트워크에 연결만 되어 있으면 컴퓨터든, 라우터든, 프린터든, 스마트폰이든 모두 노드입니다.


아이피 주소란?

네트워크 환경에 연결되어 있는 컴퓨터(노드)는 서로 간에 통신이 필요합니다. 통신을 하려면 고유의 식별 자가 필요한데 이 식별 자 역할을 해주는 것이 아이피 주소입니다.

아이피 주소는 컴퓨터 간에 서로 통신하기 위해 필요한 내 컴퓨터의 고유의 주소라고 생각하시면 됩니다.

아이피 주소는 아래와 같은 형태를 가지는데

127.0.0.1

127.0.0은 공통적인 부분이고 끝에 1이 중복 없는 유일한 식별 자 역할을 하게 됩니다.


도메인이란 (?)

인터넷이란 거대한 네크워크 환경에서 홈페이지에 접근하기 위해 위와 같이 숫자로 된 아이피를 사용한다고 생각해 보십시오. 한 두개는 외워서 사용할 수 있을 것 같습니다. 

하지만 수많은 홈페이지를 아이피를 기억해서 접근 한다는 것은 불가능에 가까운 일입니다.도메인이란 아이피 주소를 우리가 기억하기 쉬운 문자 개념으로 바꿔서 인터넷 상의 홈페이지에 접근 할 수 있게 해주는 인터넷 주소입니다.

아래의 예에서 https:// 를 제외한 www.naver.com이 도메인입니다.

ex) https://www.naver.com


루트 도메인이란?

루트 도메인은 서브 도메인이 없는 도메인을 말합니다 www.naver.com이란 도메인에서 www를 제외한 naver.com이 루트 도메인입니다.

www는 서브 도메인이며 mail.naver.com 이나 blog.naver.com 에서 mail과 blog는 모두 서브 도메인입니다.

서브 도메인은 하위 도메인이며 홈페이지의 성격에 따라 구분해서 사용할 때 사용하게 됩니다.

서브도메인-루트도메인





           

댓글

댓글 쓰기