Lovelyredsky

HTML5에 추가된 window.history가 있습니다. hash 등을 이용해 처리하던 ajax 방식의 페이지 이동에 따라서 생기는 history와 url관리의 문제에 대응하는 것입니다.

>http://diveintohtml5.info/detect.html#history
>https://developer.mozilla.org/en-US/docs/DOM/window.history 

그런데 아직 브라우저에 따라 다른 부분도 있고, HTML5를 지원하지 못하는 오래된 브라우저들에서는 문제가 될 수 있기 때문에 호환성을 고려하는 사람들은 >History.js를 사용하고 있습니다. 그런데 이 History.js에서 >empty initial state라는 알려진 오류가 있습니다. 임의의 hash를 가진 url로 직접 이동했을 경우, 예를 들어 http://site.com/?state=1234와 같은, url이 가지고 있는 state를 처음에 제대로 복원해내지 못하는 문제인데, initial state의 data가 empty object로 체크되는 것입니다. 여러가지로 테스트를 해본 결과 다음과 같은 현상을 알아낼 수 있었습니다.

1. ?state=hello world 와 같이 data에 space와 같은 특수문자가 있는 경우, initial state에서 어떤 경우도 값을 체크해내지 못합니다.
2. ?state=1234 와 같이 data에 특수문자가 없을 경우, 현재 페이지를 reload하게 되면 initial state가 정상적으로 체크가 됩니다.
3. 어떤 경우에든 새로운 탭을 열거나 다른 브라우저에서 해당 페이지로 이동할 경우 initial state가 항상 empty로 표시됩니다.

결국 2번 경우를 제외하면, 어떻게든 정상적으로 History.js를 통해 window.History의 initial state를 체크할 수 없는 것 같습니다. 단, window.history는 잘 체크합니다. 그러나 처음에 언급한대로 브라우저 호환성을 고려하지 않을 수 없기 때문에 History.js에서 해결할 수 있는 방법을 찾아야 할 수 있습니다. 또한 가능한 url을 사람이 읽을 수 있도록 해주는 것이 더 좋다고 생각한다면 2번과 같은 스타일을 피하고 싶다면 문제가 됩니다.

이런 경우 History.js의 initial state에서 data는 비어있지만, url값을 정상적으로 표시되기 때문에 url string을 parsing해서 data값을 알아내어 수동으로 처리하는 방법이 일반적으로 사용되고 있는 것 같고, 저도 그렇게 해결을 하고 있습니다.
그런데 state의 initial data를 수동으로 찾아내더라도, History에 새로운 상태를 업데이트해야 합니다. 그렇지 않으면 기존 상태가 empty state로 잘못되어 있기 때문에, 나중에 back/forward와 같이 히스토리를 이동하는 경우 에러가 생길 수 있습니다. 그런데 역시 History.replaceState()를 이용해서 업데이트를 해줄 때에도 문제가 있을 수 있습니다.

1. ?state=hello world 와 같이 data에 특수문자가 있으면 History.replaceState() 를 호출한 후에 History.js의 statechange 이벤트가 중복 호출되면서 업데이트한 상태가 정상적으로 적용되지 않습니다.
2. ?state=1234 와 같은 형식의 경우 정상적으로 History.replaceState()를 통해서 수동으로 알아낸 상태를 적용할 수 있습니다.

가능하면 url을 직접 이해할 수 있는 형태로 만들어주는 것이 좋다고 생각하기 때문에 ?state=1234와 같은 형태를 지양하고싶지만, 위와 같은 문제를 고려해서 적절히 판단하고 대응해야 하는 상황인 것 같습니다.