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

구글 블로거(블로그스팟) 이미지에 Alt 속성 입력 방법

작성자:

 HTML의 <img> 태그에서 쓰이는 alt 속성은 이미지를 보여줄 수 없을 때 이미지 대신 보여질 텍스트를 기록하는 속성입니다.


검색 엔진은 이미지의 정보를 alt 속성으로 얻기 때문에 검색엔진에 노출이 잘 되게 하려면 alt 속성을 작성하는 것이 좋습니다. 구글 블로거는 포스트에 이미지를 삽입할 때 alt속성을 작성할 수 있게 지원합니다.


<img alt="텍스트" src="이미지 경로" />

이미지를 업로드 후에 이미지를 클릭하면 하단에 그림과 같이 작은 메뉴가 나옵니다. 그 왼쪽에 있는 톱니바퀴 모양을 클릭합니다.

톱니바퀴 모양을 클릭하면 아래 그림과 같은 팝업이 뜹니다.



팝업에 있는 대체 텍스트가 alt 속성을 작성하는 곳이고 제목 텍스트가 title 속성을 작성하는 곳입니다. title 속성을 작성하면 이미지 위에 마우스커서가 올려져 있으면 속성에 기록된 텍스트가 작은 풍선 도움말로 보여집니다. 

title 속성은 필수 사항은 아니므로 우리는 대체 텍스트에 alt 속성만 입력해 주면 됩니다


alt속성 입력 시 고려 사항

alt속성을 입력할 때 띄어쓰기 대신 "-" 하이픈을 쓰는 것이 좋습니다. alt속성을 입력할 때 <a> 태그 내에 위치하고 있다면 텍스트가 어디와 링크되어 있는지 설명해주세요.



댓글

댓글 쓰기