2부: 앱 수명 주기 및 상태 관리(HTML)

2부: 앱 수명 주기 및 상태 관리(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

시스템의 속도 저하 또는 배터리 소모에 대해 걱정하지 않고 여러 앱을 시작하고 그 사이를 전환할 수 있습니다. 이는 시스템이 백그라운드에서 실행되는 앱을 자동으로 일시 중단하고 경우에 따라서는 종료하기 때문입니다. 일시 중단 또는 종료되었을 때 앱 상태를 저장하고 다시 시작될 때 상태를 복원하면 앱 실행이 중지되지 않은 것처럼 보일 수 있습니다.

학습할 내용:

  • 여러 가지 유형의 로밍 저장소를 사용하여 상태 저장
  • 다음에 앱이 시작될 때 앱 상태 복원
  

자습서를 건너뛰고 바로 코드를 보려면 JavaScript 시작: 자습서 시리즈의 전체 코드(영문)를 참조하세요.

 

시작하기 전에...

  • 이 자습서는 시리즈 중 두 번째 자습서입니다. 이 자습서를 시작하기 전에 1부: "Hello, world!" 앱 만들기를 읽어보세요. 여기에서는 1부에서 만든 코드를 가지고 시작합니다.

앱의 수명 주기 정보

이전 자습서에서 default.js 파일에 앱의 활성화를 처리하는 코드를 포함하는 방법에 대해 설명했습니다. 코드로 돌아가기 전에 먼저 앱의 수명 주기에 대해 잠깐 소개하겠습니다.

특정 시점에 앱은 실행 중 아님, 실행 중 또는 일시 중단 상태입니다.

앱 수명 주기

사용자가 잠깐 조작을 멈추거나 장치가 전원 부족 상태가 되면 앱이 일시 중단될 수 있습니다. 앱은 사용자가 신속하고 안정적으로 일시 중단된 앱 사이를 전환하여 다시 시작할 수 있도록 일시 중단 상태에서도 메모리에 계속 상주합니다. 앱이 일시 중단된 다음 다시 시작될 때 전체 시간 동안 실행하고 있었던 것처럼 보이도록 하기 위해 추가 코드를 작성할 필요가 없습니다.

운영 체제에서 다른 앱을 위한 메모리를 확보하거나 전원을 절약하기 위해 언제든지 일시 중단된 앱을 종료할 수도 있습니다. 앱이 종료되면 실행이 중지되고 메모리에서 언로드됩니다.

사용자가 Alt+F4를 누르거나 닫기 제스처를 사용하여 앱을 닫으면 앱은 10초간 일시 중단되었다가 종료됩니다.

운영 체제는 앱을 일시 중단할 때 해당 내용을 앱에 알리지만 앱을 종료할 때는 추가 알림을 제공하지 않습니다. 따라서 앱은 일시 중단 이벤트를 처리하고 이를 사용하여 상태를 저장하고 독점적인 리소스 및 파일 핸들을 즉시 해제해야 합니다.

좋은 사용자 환경을 만들기 위해서는 앱이 실행을 중단하지 않은 것처럼 보이도록 해야 합니다. 이는 앱이 사용자가 입력한 데이터, 사용자가 변경한 설정 등을 유지해야 함을 의미합니다. 따라서 운영 체제에서 앱을 종료하는 경우 나중에 해당 상태를 복원할 수 있도록 앱을 일시 중단할 때 앱의 상태를 저장해야 합니다.

앱에서 관리해야 하는 데이터 유형에는 앱 데이터세션 데이터의 두 가지가 있습니다.

다음 단계에서 이러한 유형의 데이터를 저장하도록 앱을 업데이트하는 방법에 대해 알아보겠습니다. 어떤 상태를 저장해야 할까요? 지금은 사용자가 자신의 이름 항목만 변경할 수 있습니다. 또한 사용자는 Say "Hello" 단추를 클릭하여 개인 설정 인사말을 생성할 수 있습니다.

1단계: 앱 데이터 저장

앱 데이터는 전체 세션에서 유지되며 사용자가 항상 액세스할 수 있어야 합니다. 이 앱에서는 nameInput input 상자의 value가 앱 데이터(사용자가 실행할 때마다 앱에 나타나야 하는 설정)입니다. 앱에서 일시 중단 이벤트 처리기의 코드를 실행할 수 있는 시간은 최대 5초에 불과하므로 앱이 일시 중단되거나 종료되는 시점에는 중요한 앱 데이터가 영구적 저장소에 저장되도록 해야 합니다. 이렇게 하는 가장 좋은 방법은 앱 데이터가 변경될 때 증분식으로 저장하는 것입니다.

Windows.Storage.ApplicationData 개체를 사용하여 앱 데이터를 관리할 수 있습니다. 이 개체에는 ApplicationDataContainer를 반환하는 roamingSettings 속성이 있습니다. 개발자는 이 로밍 ApplicationDataContainer를 사용하여 전체 세션에서 유지되는 사용자 데이터를 저장할 수 있습니다. 사용자가 자신의 이름과 등급을 입력할 때 로밍 ApplicationDataContainer에 이를 저장해 보겠습니다.

참고  이 자습서에서는 roamingSettings의 사용 방법을 보여 줍니다. 로밍 설정 앱 데이터 컨테이너를 사용하면 여러 컴퓨터에서 사용자가 액세스할 수 있도록 데이터를 손쉽게 저장할 수 있습니다. 기본적으로 데이터는 백그라운드에서 자동으로 클라우드에 업로드됩니다. 로컬 설정 앱 데이터 컨테이너(localSettings)를 사용할 수 있지만, 이것은 컴퓨터별 정보를 저장하려는 경우에만 사용해야 합니다.
 

여기에서는 1부: "Hello, world!" 앱 만들기의 코드로 시작합니다.

Hh986966.wedge(ko-kr,WIN.10).gif앱 데이터를 저장하려면

  1. default.js 파일에서 nameInput input 상자의 change 이벤트에 대한 이벤트 처리기를 만듭니다. 이벤트 처리기의 이름을 nameInputChanged로 지정합니다. 이 코드를 1부에서 만든 buttonClickHandler 바로 뒤에 추가합니다.

    
        function nameInputChanged(eventInfo) {
    
        }
    
    
  2. eventInfo 개체의 srcElement 속성을 사용하여 nameInput 컨트롤에 액세스합니다. srcElement 속성은 이벤트를 일으킨 요소를 검색합니다.

    
        function nameInputChanged(eventInfo) {
            var nameInput = eventInfo.srcElement;
    
        }
    
    
  3. 로밍 설정용 ApplicationDataContainer에 사용자의 이름을 저장합니다.

    1. Windows.Storage.ApplicationData.current 속성을 호출하여 앱의 ApplicationData 개체를 가져옵니다.
    2. 그런 다음 ApplicationData 개체의 roamingSettings 속성을 호출하여 로밍 설정용 ApplicationDataContainer를 가져옵니다.

    이제 원하는 키를 사용하여 사용자의 이름을 저장할 수 있습니다. 사용자 이름을 "userName"으로 저장하겠습니다.

    
        function nameInputChanged(eventInfo) {
            var nameInput = eventInfo.srcElement;
    
            // Store the user's name for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["userName"] = nameInput.value;
        }
    
    
  4. 1부: "Hello, world!" 앱 만들기에서는 onactivated 이벤트 처리기를 사용해 이벤트 처리기를 등록했습니다. 이번에는 약간의 코드를 더 추가하여 nameInput 컨트롤과 함께 nameInputChanged 이벤트 처리기를 등록하겠습니다.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
                    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                }));
    
            }
        };
    
    
  5. 이제 Rating 컨트롤이 변경될 때 해당 상태를 저장하겠습니다. 여기서 해야 할 일은 roamingSettings 앱 컨테이너에 값을 저장할 수 있도록 1부에서 만든 이벤트 처리기를 업데이트하는 것입니다. 등급을 greetingRating으로 저장하겠습니다.

    
        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
            // Store the rating for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
        }
    
    

이제 앱을 실행하여 텍스트 상자에 사용자의 이름과 등급을 입력하면 데이터가 저장됩니다. 그러나 앱을 다시 시작하면 이름이 다시 사라집니다. 따라서 방금 저장한 상태를 로드하는 코드를 추가해야 합니다. 이 작업은 3단계에서 수행합니다. 그러나 이를 수행하기 전에 먼저 세션 데이터를 저장하는 방법을 알아보겠습니다.

2단계: 세션 데이터 저장

세션 데이터는 앱에서 사용자의 현재 세션과 관련된 임시 데이터입니다. 사용자가 닫기 제스처나 Alt + F4를 사용해 앱을 닫거나, 컴퓨터를 다시 부팅하거나, 컴퓨터를 로그오프하면 세션이 종료됩니다. 이 앱에서는 greetingOutput divinnerText가 세션 데이터입니다. Windows에서 앱을 일시 중단하고 종료하는 경우에만 이 데이터를 복원합니다. 세션 데이터를 저장하려면 WinJS.Application.sessionState 개체를 사용합니다.

세션 데이터를 언제 저장해야 할까요? default.js 파일에는 개발자가 사용할 수 있는 oncheckpoint 이벤트 처리기가 포함되어 있습니다. 이 이벤트 처리기는 Windows에서 앱을 일시 중단하려고 할 때 호출됩니다. 그러나 앱 데이터와 마찬가지로 세션 데이터도 변경될 때 증분식으로 저장하는 것이 가장 좋습니다. 따라서 사용자가 "Say Hello" 단추를 클릭할 때마다 세션 데이터를 저장하겠습니다.

Hh986966.wedge(ko-kr,WIN.10).gif세션 데이터를 저장하려면

  • default.js에서 개인 설정 인사말을 저장할 수 있도록 1부: Hello, world!" 앱 만들기에서 만든 buttonClickHandler 함수를 업데이트합니다.

    개인 설정 인사말은 해당 세션에 대해서만 저장하면 되므로 WinJS.Application.sessionState 개체에 이를 저장합니다. sessionState 개체를 사용하려면 이 개체에 속성을 추가하고 속성의 값을 설정하기만 하면 됩니다. 속성 greetingOutput을 호출하겠습니다.

    
        function buttonClickHandler(eventInfo) {
    
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString;
    
            // Save the session data. 
            WinJS.Application.sessionState.greetingOutput = greetingString;
        }
    
    

앱이 종료되기 전에 앱의 상태를 저장하려면 이 작업만 수행하면 됩니다. 이제 다음에 사용자가 앱을 시작할 때 앱의 상태를 복원하는 방법에 대해 알아보아야 합니다.

3단계: 앱 상태 복원

앱 활성화를 처리하는 onactivated 이벤트 처리기의 코드를 자세히 살펴보겠습니다.

이 코드에서는 제일 먼저 앱에 대한 참조를 가져와서 app이라는 변수에 저장합니다. 그런 다음 Windows.ApplicationModel.Activation 네임스페이스를 참조하는 activation이라는 변수를 만듭니다. 이러한 단계는 모두 전적으로 선택적이며 앱 또는 Windows.ApplicationModel.Activation 네임스페이스를 참조하기 위해 입력해야 하는 코딩 양을 줄여주는 역할만 합니다.


    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;


다음에는 코드에서 활성화 이벤트 처리기를 정의합니다. 이 처리기는 방금 발생한 활성화의 유형을 파악합니다. 이 처리기는 활성화가 launch 활성화인 경우에만 작동합니다. 다른 유형의 활성화가 발생한 경우에는 처리기가 아무것도 수행하지 않습니다.

이벤트 처리기를 확장하여 다른 유형의 활성화에 응답하도록 할 수 있지만 이 자습서에서는 해당 내용을 다루지 않습니다. 자세한 내용은 응용 프로그램 수명 주기를 참조하세요.



    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
          

다음에는 처리기에서 이전 실행 상태를 확인하여 앱이 마지막으로 어떻게 종료되었는지 파악합니다.



            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }


이전 실행 상태가 terminated인 경우, 이는 마지막으로 앱이 실행되었을 때 Windows에서 앱을 일시 중단한 다음 종료했음을 의미합니다. 앱이 종료되지 않았던 경우 처리기는 앱이 처음으로 시작되는 것처럼 취급합니다.

마지막으로 처리기에서는 WinJS.UI.processAll 메서드와 이벤트 처리기를 등록하기 위해 추가한 코드를 호출합니다. 처리기는 이전 실행 상태와 관계없이 앱이 시작될 때마다 이 코드를 호출합니다.



            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function completed() {

                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");

                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;

                // Register the event handler. 
                ratingControl.addEventListener("change", ratingChanged, false);

                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);

                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", nameInputChanged);

            }));

        }
    };

onactivated 이벤트 처리기가 수행하는 작업에 대해 알아보았으므로 이제 이를 사용하여 앱의 상태를 복원해 보겠습니다.

Hh986966.wedge(ko-kr,WIN.10).gif앱의 상태를 복원하려면

  1. previousExecutionStateterminated이면 개인 설정 인사말을 로드합니다.

    앱의 상태를 복원하라는 설명이 있는 else 절에서 WinJS.Application.sessionState.greetingOutput에 값이 있는지 여부를 확인합니다. 여기에 값이 있는 경우 greetingOutput div 요소를 검색하고 이를 사용하여 인사말을 표시합니다.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
    
                    // Retrieve our greetingOutput session state info, 
                    // if it exists. 
                    var outputValue = WinJS.Application.sessionState.greetingOutput;
                    if (outputValue) {
                        var greetingOutput = document.getElementById("greetingOutput");
                        greetingOutput.innerText = outputValue;
                    }
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                }));
    
            }
        };
    
    
  2. 이제 사용자 이름 및 등급을 로드합니다. 여기에서는 여러 세션에 걸쳐 사용자 이름 및 등급 데이터를 유지하기 위해 이 데이터를 roamingSettings 앱 데이터 컨테이너에 저장했습니다. 이제 앱 데이터 컨테이너를 검색한 후 사용자 이름 및 등급이 있는 경우 이를 표시하는 코드를 추가해 보겠습니다.

    앱이 마지막으로 실행되었을 때 어떻게 종료되었는지와 상관없이(세션 데이터에서 이전 실행 상태만 확인하면 됨) 이 코드를 실행하려고 합니다. 따라서 앱의 이전 실행 상태를 확인하는 if 절 외부에 코드를 추가합니다. WinJS.UI.processAll에 대한 then 처리기 내부(이벤트를 등록하는 곳)에 추가하겠습니다.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
    
                    // Retrieve our greetingOutput session state info, 
                    // if it exists. 
                    var outputValue = WinJS.Application.sessionState.greetingOutput;
                    if (outputValue) {
                        var greetingOutput = document.getElementById("greetingOutput");
                        greetingOutput.innerText = outputValue;
                    }
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                    // Restore app data. 
                    var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                    // Restore the user name.
                    var userName =
                        Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                    if (userName) {
                        nameInput.value = userName;
                    }
    
                    // Restore the rating. 
                    var greetingRating = roamingSettings.values["greetingRating"];
                    if (greetingRating) {
                        ratingControl.userRating = greetingRating;
                        var ratingOutput = document.getElementById("ratingOutput");
                        ratingOutput.innerText = greetingRating;
                    }
    
                }));
    
            }
        };
    
    

이제 앱을 빌드하고 실행하여 앱이 세션 상태를 어떻게 저장 및 복원하는지 확인할 수 있습니다. 지금까지는 디버그 모드에서 앱을 실행하고 Microsoft Visual Studio에서 디버깅 중지를 선택하여 앱을 테스트했습니다. 그러나 이렇게 하면 앱에서 정상 종료를 수행하여 Suspending 이벤트가 발생하지 않게 됩니다. 다행히 Visual Studio에는 앱의 일시 중단, 종료 및 복원을 시뮬레이트할 수 있는 기능이 있습니다.

Hh986966.wedge(ko-kr,WIN.10).gifVisual Studio에서 앱의 일시 중단, 종료 및 복원을 시뮬레이트하려면

  1. F5를 눌러 디버그 모드에서 앱을 실행합니다.
  2. 입력 상자에 이름을 입력하고 "Say "Hello""를 클릭합니다. 인사말이 표시됩니다.
  3. Alt+Tab을 눌러 Visual Studio로 돌아옵니다.
  4. 디버그 위치 도구 모음의 일시 중단 단추 옆에 있는 드롭다운 메뉴를 엽니다.

    디버그 도구 모음은 디버거가 실행 중인 동안 기본적으로 표시됩니다. 이 도구 모음이 보이지 않는 경우 보기 > 도구 모음 > 디버그 위치를 선택하여 표시합니다.

    일시 중단 및 종료 단추

  5. 일시 중단 및 종료를 선택합니다.

    Visual Studio에서 앱의 일시 중단 및 종료를 시뮬레이트하면서 Suspending 이벤트가 발생하고 상태 관리 코드가 실행됩니다.

  6. F5 키를 눌러 앱을 다시 실행합니다. 앱이 이전 상태로 복원됩니다.

요약

축하합니다. 이 자습서를 마쳤습니다! 앱의 수명 주기를 관리하고 상태를 저장하는 방법에 대해 알아보았습니다. 이 자습서에서는 앱 상태를 저장할 수 있는 두 가지 방법만 소개했습니다. 상태를 저장할 수 있는 다른 방법에 대해 자세히 알아보려면 앱 데이터 관리상태를 효율적으로 사용을 참조하세요.

샘플 다운로드

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 이 경우 JavaScript 시작 샘플을 다운로드(영문)하세요.

다음 단계

이 자습서 시리즈의 다음 부분에서는 보다 복잡한 앱을 만드는 방법에 대해 알아봅니다. 3부: PageControl 개체 및 탐색으로 이동하세요.

관련 항목

JavaScript 시작: 자습서 시리즈의 전체 코드
HTML, CSS 및 JavaScript를 사용하여 Windows 8 앱 프로그래밍(전자책)

 

 

표시:
© 2017 Microsoft