Quasar App의 생명주기와 저장소별 생명주기

Quasar Application 생명주기

 웹프로그램에 생명주기가 있을까 싶지만, 의외로 몇가지 사항들이 존재합니다.

 일단 웹사이트에 접속할때와 웹사이트에서 종료할때가 있습니다.

 그리고 새로고침이라는 웹사이트만의 전용 상태가 존재합니다. 

 다행이 웹의 생명주기는 단순합니다. 

 [브라우저 시작] => [App 초기화] => [새로고침] => [App 초기화] => [브라우저 종료] 이렇게 됩니다.

그리고 [App 초기화] 상태에서는 사용자가 작성한 Boot 부터 다시 수행됩니다. 

따라서 [App 초기화] 상태만 봐서는 브라우저가 시작한것인지 새로고침 한것인지 판단이 어렵습니다. 

 

저장소별 생명주기

 웹프로그램은 크게 3가지 저장소가 존재합니다.

 프로그램 메모리, Session Storage, Local Storage 인데 각각 살펴보겠습니다.

	데이터 보관 기간	특이사항
프로그램 메모리 (지역, 전역변수)	새로고침하거나 브라우저가 꺼질때까지 존재함	[App 초기화] 할때 데이터는 초기화 됨
Session Storage	브라우저가 꺼질때까지 존재함	새로고침을 하더라도 데이터는 존재함
Local Storage	명시적으로 지울때까지 존재함	브라우저의 Local Storage를 직접 지우기 전까지 존재함.

 

위와 같은 특성이 있어서 상황별로 변수를 어디에 저장할지 잘 판단해야 합니다. 

몇가지 살펴보자면 

일반적으로 변수들은 프로그램 안에서 쓰고 지울것이므로 메모리에 저장하고 관리할 것입니다.

그런데 프로그램이 시작 플래그는 Session Storage에 넣어야 새로고침을 하더라도 잘 유지될것입니다. 

마지막으로 사용자가 로그인한 아이디를 다음 접속할때도 사용하고자 한다면 Local Storage에 넣어야 브라우저를 나중에 다시 켜더라도 해당 정보를 가져올 수 있습니다.

 

App과 저장소 생명주기를 활용한 브라우저 시작인지 새로고침 상태인지 판별하기

// boot 영역에서 애플리케이션 시작 시 SessionStorage에 플래그 설정
if (!sessionStorage.getItem('appStarted')) {
  sessionStorage.setItem('appStarted', 'true');
  console.log('처음 시작되었습니다.');
} else {
  console.log('새로 고침되었습니다.');
}