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('새로 고침되었습니다.');
}
'Web > Quasar' 카테고리의 다른 글
Axios를 이용한 통신 - ts 버전 (0) | 2024.07.09 |
---|---|
Quasar에서 환경 변수 사용하기 - 보류(파일로 사용하는 방식은 보안이 안됨) (0) | 2024.07.02 |
Quasar용 SessionStorage, LocalStorage 사용하기 (0) | 2024.05.03 |
Quasar UI 개발 4 - 심화 예시 (0) | 2024.04.29 |
Quasar UI 개발 3 - 예시 (0) | 2024.04.29 |