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

Swiper-slider로 반응형 작업할 때 이미지 사이즈에 따라서 높이 지정하기

작성자:

 Swiper 슬라이더를 사용하면 웹페이지에 쉽게 슬라이드 기능을 삽입할 수 있습니다.

심지어는 반응 형 웹을 개발할 때도 옵션 만으로 쉽게 반응 형 기능을 구현할 수 있습니다.

autoHeight : true;

위와 같이 옵션을 주면 이미지의 넓이에 맞춰서 이미지의 높이가 자동 조절됩니다. 

하지만 이미지의 크기가 그리 크지 않을 때에는 화면을 줄임에 따라 이미지의 높이가 자동 

조절 되면서 이미지가 너무 작아져 버리는 문제가 생깁니다. 

그래서 이미지가 줄어들 때 이미지의 넓이에 맞춰서 높이를 강제 지정해 주어야 하는 것이

필요할 때도 생깁니다.   

<body>
    <section class="main swiper mySwiper">
      <div class="wrapper swiper-wrapper">
        <div class="slide swiper-slide">
          <img src="images/img01.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img02.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img03.jpg" alt="" class="image" />
        </div>
      </div>
      <div class="swiper-button-next nav-btn"></div>
      <div class="swiper-button-prev nav-btn"></div>
      <div class="swiper-pagination"></div>
    </section>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
		autoplay: {     //자동슬라이드 (false-비활성화)         
		    delay: 2500, // 시간 설정          
		   disableOnInteraction: false, // false-스와이프 후 자동 재생        
		},
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>

위의 코드는 Swiper 슬라이더에서 제공해 주는 기본 코드 중에 하나 입니다.

브라우저의 화면 크기에 따라 높이도 자동으로 조절되는 듯이 보이지만 마우스를 이용

해서 브라우저의 넓이를 서서히 줄이면 높이가 변하지 않고 그대로 유지 됩니다.

마우스를 이용해서 브라우저의 크기를 변경할 때는 아래와 CSS 코드를 만들어 주시면

됩니다.

  <style>
	@media screen and (max-width: 1024px) {
            .swiper{
		height: 650px !important;
            }
    }

	@media screen and (max-width: 768px) {
            .swiper{
		height: 450px !important;
            }
    }
  </style>

Swiper 슬라이더를 아래와 같이 CDN으로 사용하므로 ! important 선언을 해서 height 속성의 우선 순위를 높여 줍니다. 


    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

댓글

댓글 쓰기