뒤로 가기 시 데이터 초기화 문제 해결 방법(BFCache와 PageShow)

1. 문제상황:
    - 로컬에서는 브라우저에서 “뒤로 가기” 시 $(document).ready()가 다시 실행됨
    - 배포 환경에서는 뒤로 가기 시 $(document).ready()가 실행되지 않음

2. 원인:
  - 현대 브라우저는 성능을 위해 뒤로/앞으로 이동 시 페이지를 메모리에 저장해두고 복원 한다고 합니다.
    이를 Back-Forward Cache (bfcache)라고 하는데,
    이 때문에 뒤로가기시 document.ready나 window.onload는 재실행 되지 않는다고 합니다.

  - 로컬에서는 개발자 도구 또는 로컬 서버 세팅 때문에 bfcache가 꺼져 있을 수 있어, 
    document.ready가 재실행되는 것으로 보입니다.
    -> 여러 설정, 개발자 도구를 확인해 보았으나, bfcache를 막는 코드는 찾지 못함
    -> 일부 브라우저는 개발 중 문제를 방지하기 위해 로컬호스트에서 bfcache를 기본적으로 비활성화하거나 다르게 처리합니다.

3. 해결 방법
  - 이때, pageshow를 사용하면 뒤로가기로 재진입 한 경우에도 재실행되므로
    $(document).ready(function() {}); 대신 
    $(window).on("pageshow", function(event) {}); 으로 초기화 방식 변경하였습니다.

4. pageshow 동작 방식
    1. 뒤로가기, 앞으로 가기 실행
    2. BFCache에 해당 페이지의 데이터 저장되어 있으면, 데이터를 복원하는 방식으로 빠르게 로딩
    3. 이때, JavaScript는 다시 실행되지 않지만, 브라우저는 복원되었음을 알리기 위해 pageshow 이벤트를 트리거
    4. DOMContentLoaded 이벤트에 연결되는 jQuery 문법인 $(document).ready(function() {}); 는 실행되지 않음