업무 중 이슈가 하나 생겼다.
'부적절한 값 입력 등의 이유로 폼 제출 후 다시 뒤로가기를 통해 페이지로 돌아왔을 때, SelectBox만 값이 남아있질 않아요!'
똑같이 Form에 들어있는 다른 Input 박스나 Textarea의 값들은 잘 남아있는데, 이상하게 Select박스만 데이터가 넘어오질 않는거다.
왜 그런가 하고 보니 Select만 커스텀으로 만들어졌기 때문이었다. (다른 입력창들은 모두 기본 input태그에 스타일링만 했다.) 그래서 선택된 값을 커스텀 DOM으로 갱신해주는 함수를 페이지가 로드될 때 스크립트에서 한번씩 실행해주어야 했다.
함수가 정상 로드 되는 것으로 보이는데도 불구하고 계속 정상적으로 실행이 되지 않아 처음에는 함수 자체의 문제인 줄 알고 여러가지 방법으로 로직을 바꾸는 시도를 했다. 이 때 select 태그의 value 값을 브라우저 콘솔로 찍으면 값은 잘 나왔지만, 자바스크립트 내부에서 value값을 콘솔로 찍으면 뒤로가기 이후 값이 나오질 않는다는 점을 발견했다.
이 점이 이상해서 관련 정보를 찾던 중 뒤로가기를 통해 페이지로 재진입한 경우에는 자바스크립트가 실행되지 않는다는 사실을 발견했다!
뒤로가기를 위한 캐시, BFCache
브라우저들은 뒤로가기 시 빠른 반응을 위해 BFCache를 사용하여 저장해놓은 이전 페이지를 바로 로드한다고 한다. 그래서 이런 경우 자바스크립트가 동작하지 않는다.
참고글에서는 크롬에서는 뒤로가기로 진입해도 자바스크립트가 동작한다고 했으나 내 경우 크롬에서도 동작하지 않았다.
pageshow 이벤트로 해결
window의 pageshow 이벤트를 사용하면 새롭게 진입하든, 재진입하든 항상 페이지가 보여질 때 마다 전달한 이벤트 함수의 코드를 실행한다. 즉 load 이벤트와 유사한 기능을 하는 것이다.
window.onpageshow = () => { ... }문제가 된 selectBox는 초기(default)값이 있고, 커스텀 option을 클릭할 때 경우 select태그의 선택값이 갱신되며 change 이벤트가 발생하는 구조로 이루어져 있었다. 따라서 페이지를 로드하면 첫 화면은 항상 default 값이 보여졌던 것이다.
페이지를 되돌아오는 경우, select 태그의 value값 자체는 캐시로 남아있으나 change 이벤트에 바인딩 되어있던 select 옵션을 선택하고 화면을 갱신하는 함수는 실행되지 않았다. 따라서 pageshow 이벤트 함수에서 강제로 change 이벤트를 발생시키는 방법을 사용하여 문제를 해결했다.
window.onpageshow = () => {
$('.select').trigger('change');
}