React 입문(6) : Checking if an app is installed from a web-page : IOS (last update: 2020.12.23.)

devpark·2020년 12월 23일
0

React.js & JavaScript

목록 보기
6/11

2-2. Checking if an app is installed from a web-page : IOS


0. References

How to check if an app is installed from a web-page on an iPhone? - stackoverflow
Window setTimeout() Method - w3schools


Notion의 Theory & Technique : React.js 페이지 바로가기


1. Introduction

이번에 맡은 실무 역할 중, 브라우저로 사이트에 접속한 후 주문하기 버튼을 클릭했을 때 해당 사이트의 어플리케이션으로 이동시키는 기능을 구현할 일이 생겼다. 특히, 1. 어플리케이션이 설치 되어있지 않으면 설치 화면으로 이동하고 2. 설치 된 경우라면 어플리케이션의 해당 페이지로 이동시켜주되, Android/ios로 플랫폼 분기 또한(동일한 deeplink로 어플리케이션의 상세페이지 이동이 불가하므로) 처리해야 했다. 이 중, ios에 해당하는 경우에 대해 알아본다.


2. Syntax

생소한 내용이라 다소 헤맸지만, 작성법은 다음과 같다:

  1. 함수 내부에 setTimeout을 선언하고, 인자로 또 다른 함수를 하나 받는다.
  2. 이 인자-함수의 내부에 appstore로 이동하는 코드를 작성한다 : window.location.href ="";
  3. setTimeout의 두 번째 인자로 시간을 전달한다. 참고로 단위는 ms이다.
  4. setTimeout의 후위에 어플리케이션의 해당 페이지의 deep link로 이동하는 코드를 작성해 준다. window.location.href="";
  5. 선언한 함수를 원하는 요소의 onClick 이벤트로 this.function-name의 형태로 대입한다.

Stackoverflow에서 참고한 바에 따르면, 그 문법은 다음과 같다:

// legacy-js version
setTimeout(function(){
	window.location = "appstore-path-on-here";
}, 25);
window.location = "deeplink-on-here";

차근차근 이해해보면 아주 쉬운 원리다. setTimeout을 통해 처리하면 되는데, 이 setTimeout의 2가지 인자는 다음과 같은 것을 받는다: 1. timeout이 실행되었을 때 실행할 동작 2. timeout의 기준 시간이다. 이는 곧, 25ms가 지나면 setTimeout의 첫 번째 인자로 전달한 함수가 실행된다는 의미이다. 즉 위의 코드작성을 통해 이 setTimeout의 후위에 작성한 window.location = "deeplink-on-here"링크 이동이 이루어지지 않는 경우, 25ms 이후에 앱스토어로 이동하는 링크가 setTimeout에 전달된 첫 번째 인자 함수에 의해 작동하게 된다.


3. Examples & Usages

나는 이 코드를 react의 Component, 그 중 특정 구성 요소에 대입하기 위해 ES6 문법을 사용하여 재 작성 및 호출하는 것이 필요했고, 이를 위해서 다음과 같이 코드를 변형하고 대입하였다 :

...
ios(){
	setTimeout(
		{
		isNotExistIOS(){
			window.location.href="appstore-path-on-here";
			}
		}, 25
);
	window.location.href="deep-link-on-here"
}
...
{/* CONDITIONAL RENDERING FROM HERE */}
          {(() => {
            // CONDITION 1: MOBILE-IOS
        if (isMobile && isIOS) {
          return (
              <div className="order-btn-wrapper" onClick={ this.ios } >
                  <div className="order-btn" id="order-btn">run the app or install</div>
              </div>
          )
...

따라서 위의 코드는 다음과 같이 작동한다:

  1. 브라우저에 접속한 디바이스가 핸드폰 또는 태블릿 pc이며 동시에 ios 운영 체제인 경우
  2. onClick={ this.ios }를 통해 ios라는 이름의 함수를 onClick 이벤트로 호출한다
  3. 이 ios 함수의 내부에는 setTimeout을 통해 첫 번째 인자로 appstore로 이동하는 함수 isNotExistIOS를 받으며 두 번째 인자로 25를 받아 25ms 이후 앱스토어로 이동하게 한다.
  4. 단, ios 함수 내부에 window.location.href=""를 대입하여 해당 어플리케이션의 deeplink로 이동하는 구문을 입력 해 준다.
  5. 따라서, 해당 app의 deeplink로의 이동이 실패한 경우 = 어플리케이션이 설치되지 않아 이동이 불가한 경우 setTimeout이 실행되어 window.location.href=""를 통해 앱스토어로 이동하게 된다.

profile
아! 응응애에요!

0개의 댓글